From bfbf6982e879549c47ebb3935052dbe840879e51 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Sun, 12 Jul 2020 18:33:35 +0200
Subject: [PATCH] Fix function es exports

---
 .../__snapshots__/index.test.ts.snap              | 15 ++++++++++++++-
 .../babel/convert-esmodule/index.test.ts          | 12 ++++++++++++
 .../transpilers/babel/convert-esmodule/index.ts   | 10 +++++++++-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/__snapshots__/index.test.ts.snap b/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/__snapshots__/index.test.ts.snap
index 32396221f71..43dea6af0b2 100644
--- a/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/__snapshots__/index.test.ts.snap
+++ b/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/__snapshots__/index.test.ts.snap
@@ -38,8 +38,8 @@ exports[`convert-esmodule can convert function exports 1`] = `
 Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
-function test() {}
 exports.test = test;
+function test() {}
 const test2 = () => {};
 exports.test2 = test2;
 class Test {}
@@ -236,6 +236,19 @@ const short = {
 "
 `;
 
+exports[`convert-esmodule defines its exports before requires 1`] = `
+"\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.get = get;
+var $csb__colorsvalues = require(\\"./colors-values\\");
+function get() {
+  return 5;
+}
+"
+`;
+
 exports[`convert-esmodule does empty exports 1`] = `
 "\\"use strict\\";
 Object.defineProperty(exports, \\"__esModule\\", {
diff --git a/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.test.ts b/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.test.ts
index 0ee51752a99..062171ade63 100644
--- a/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.test.ts
+++ b/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.test.ts
@@ -411,4 +411,16 @@ describe('convert-esmodule', () => {
 
     expect(convertEsModule(code)).toMatchSnapshot();
   });
+
+  it('defines its exports before requires', () => {
+    const code = `
+    import { COLORS } from './colors-values';
+
+    export function get() {
+      return 5;
+    }
+    `;
+
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
 });
diff --git a/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.ts b/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.ts
index 4fc416fc290..4076e390311 100644
--- a/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.ts
@@ -198,7 +198,15 @@ export function convertEsModule(code: string) {
 
           const varName = statement.declaration.id.name;
           i++;
-          program.body.splice(i, 0, generateExportStatement(varName, varName));
+          // Add to start of the file, after the defineModule for __esModule. This way this export is already
+          // defined before requiring other modules. This is only possible for function exports.
+          const positionToInsert =
+            statement.declaration.type === n.FunctionDeclaration ? 1 : i;
+          program.body.splice(
+            positionToInsert,
+            0,
+            generateExportStatement(varName, varName)
+          );
         } else {
           // export const a = {}