import() & System.import() to UMD pattern transformer plugin for Babel

License: MIT License

JavaScript 100.00%

babel-plugin-system-import-transformer's People

Contributors

Stargazers

Watchers

Forkers

afilp amilajack reverbdotcom asturur andrewnicols

babel-plugin-system-import-transformer's Issues

Working with babel 7

Since i upgraded from babel 6 to babel 7 i cannot make this transform work anymore.

I m running tests with jest, and while webpack 3 Is able to remove the System.transforms for me, when babel-jest run this plugin i get errors.

  ● Test suite failed to run

    Unknown node type: "undefined"

      at cloneNode (node_modules/@babel/types/lib/clone/cloneNode.js:44:11)
      at Object.clone (node_modules/@babel/types/lib/clone/clone.js:13:33)
      at getImportedModuleFile (node_modules/babel-plugin-system-import-transformer/dist/moduleImportHelper.js:34:57)
      at getImportModuleName (node_modules/babel-plugin-system-import-transformer/dist/moduleImportHelper.js:46:28)
      at new SystemImportExpressionTransformer (node_modules/babel-plugin-system-import-transformer/dist/SystemImportExpressionTransformer.js:33:68)
      at PluginPass.CallExpression (node_modules/babel-plugin-system-import-transformer/dist/index.js:25:31)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)

Would look like that something in @babel/types is not good anymore to clone the nodes as passed from this plugin.

Any clue?

Add support for babel 6

This is currently under development in the babel6 branch.

ReferenceError: self is not defined

Hi @thgreasi I use this plugin for my react universal app with webpack2, but when I am running dev building I encounter an error it says :

var _systemImportTransformerGlobalIdentifier = typeof window !== 'undefined' ? window : self;
^
ReferenceError: self is not defined

I have no idea what's wrong with it, do you know how to fix it?

Here's my routes with System.import :

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';

if (module.hot) {
  // HMR falls over when a Route uses a dynamic component resolution
  // property (i.e. getComponent or getComponents).  As a workaround for any
  // of your components that are resolved dynamically please require them below.
  require('./containers/Home');
  require('./containers/UserInfo');
  require('./containers/NotFound');
}

const errorLoading = err => {
  console.error(`==> 😭  Dynamic page loading failed: ${err}`);
};

const resolveIndexComponent = (nextState, cb) => {
  System.import('./containers/Home')
    .then(module => cb(null, module.default))
    .catch(errorLoading);
};

const resolveUserInfoComponent = (nextState, cb) => {
  System.import('./containers/UserInfo')
    .then(module => cb(null, module.default))
    .catch(errorLoading);
};

const resolveNotFoundComponent = (nextState, cb) => {
  System.import('./containers/NotFound')
    .then(module => cb(null, module.default))
    .catch(errorLoading);
};

export default (
  <Route path="/" component={App}>
    <IndexRoute getComponent={resolveIndexComponent} />
    <Route path="UserInfo/:id" getComponent={resolveUserInfoComponent} />
    <Route path="*" getComponent={resolveNotFoundComponent} />
  </Route>
);

System is not defined

After webpack 4, it seems System.import is deprecated, which results in this issue

When compiling AMD modules and the moduleIds flag is set, the wrong moduleId is inserted

If the moduleIds babel configuration is configured, then the wrong file-level module name will be used whenever a dynamic import is transformed using this plugin.

For example, the following:

// index.js
export default () => {
    import('./example').then((example) => console.log(example()));
};

Should generate a module:

// build/index.js
define("index", ["exports"], function(_exports) {

    // ...
    _systemImportTransformerGlobalIdentifier.require(["example"], resolve, reject);

});

Unfortunately the imported module name is hoisted to the top of the file and the wrong moduleId is inserted into the built file:

// build/index.js
define("example", ["exports"], function(_exports) {
//      ^^^^^^^ <== Should be "index"
    // ...
    _systemImportTransformerGlobalIdentifier.require(["example"], resolve, reject);

});

Problem accessing module

Using this with webpack in Chrome I get the following error:

Not allowed to load local resource: file:///{path to project root}/{name of module trying to load}

Add support for `require.ensure()` target

As initially noted in #11.

make commonjs use require.ensure by default

Support `import` function

Apparently the module loader spec is now using import() for dynamic loading. Would be great if this plugin could support both syntaxes. Babel syntax plugin here.

Cannot transform when module name was a variant rather than literal

This works.

System.import('./my-module').then((module) => {
    console.log(module);
}).catch((error) => {
    console.log(`Failed: ${error}`);
});

But if I put my module path into a variant it doesn't work.

const moduleName = './my-module';
System.import(moduleName).then((module) => {
    console.log(module);
}).catch((error) => {
    console.log(`Failed: ${error}`);
});

Seems that this plugin only transform System.import when the argument is literal. But I think in most cases, we use module loader when the module name was defined in a config file, or loop files in a folder.

Compilation fails when path is a template literal

Runing:

[email protected]
[email protected]

// this is ok
System.import('./pages/' + name + '/route');

// this is not
System.import(`./pages/${name}/route`);

Adding transform-es2015-template-literals to plugins before system-import-transformer does not seem to have any effect. Here is the full stack trace:

TypeError: /var/app/routes.js: Property value expected type of string but got null
    at Object.validate (/var/app/node_modules/babel-types/lib/definitions/index.js:161:13)
    at validate (/var/app/node_modules/babel-types/lib/index.js:505:9)
    at Object.builder (/var/app/node_modules/babel-types/lib/index.js:466:7)
    at new SystemImportExpressionTransformer (/var/app/node_modules/babel-plugin-system-import-transformer/dist/SystemImportExpressionTransformer.js:28:63)
    at PluginPass.CallExpression (/var/app/node_modules/babel-plugin-system-import-transformer/dist/index.js:16:31)
    at newFn (/var/app/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/var/app/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/var/app/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/var/app/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/var/app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/var/app/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/var/app/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/var/app/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/var/app/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/var/app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/var/app/node_modules/babel-traverse/lib/context.js:103:17)

Server-side/CommonJS loading time increase

This works great when on the client but I noticed on the server it adds more load time when requiring large components that have many children (nested components / libs). I should mention that server I mean using CommonJS

Thoughts?

only client side?

Does this support server-side too?

thgreasi / babel-plugin-system-import-transformer Goto Github PK

babel-plugin-system-import-transformer's People

Contributors

Stargazers

Watchers

Forkers

babel-plugin-system-import-transformer's Issues

Recommend Projects

Recommend Topics

Recommend Org