systemjs / plugin-babel

SystemJS Babel Plugin
MIT License
83 stars 33 forks source link

Variable scoping error for named exports when doing minimal babel transpilation #75

Open JensLincke opened 7 years ago

JensLincke commented 7 years ago

Our goal was to use babels transpilation only for the import/export statements and let the browser handle features such as classes / async natively.

Therefore we used the following options:

var defaultBabelOptions = {
  modularRuntime: true,
  sourceMaps: true,
  es2015: false,
  stage3: false,
  stage2: false,
  stage1: false,
  compact: false,
  comments: true
};

This works reasonably well, but we found the following issue. The class Foo is not in the scope the exported function greet.

export class Foo {
  static greet() {
    return "Hi"
  }
}
export function greet() {
  return Foo.greet()
}

Because it gets transpiled to:

(function(System, SystemJS) {System.register([], function (_export, _context) {
  "use strict";

  function greet() {
    return Foo.greet();
  }

  _export("greet", greet);

  return {
    setters: [],
    execute: function () {
      class Foo {
        static greet() {
          return "Hi";
        }
      }

      _export("Foo", Foo);
    }
  };
});
})

This will result in a runtime error when calling greet.

Uncaught (in promise) ReferenceError: Foo is not defined
    at ModuleNamespace.greet (tanspilationbug.js:7)
    at System.import.then.m (eval at resolve (juicy-ace-editor.js!transpiled:NaN), <anonymous>:1:55)
guybedford commented 7 years ago

Thanks for posting. This is a known bug in the Babel system transformer unfortunately! See https://github.com/babel/babel/issues/4701.