Git Product home page Git Product logo

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

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.

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>
);

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?

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.

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?

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}

Compilation fails when path is a template literal

Runing:

// 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)

System is not defined

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.