Need Help : How can I solve "System is not defined"

[anekpattanakij]

Base on example code below.

import { asyncComponent } from 'react-async-component';

export default asyncComponent({
resolve: () => System.import('./Product')
});

I tried to implement it with my project but I found an error that "System is not defined".

I have checked with https://github.com/ctrlplusb/react-universally , but still could not find a clue how to add system in global scope.

Could you please help me how can I manage to integrate this part of code to my project?

Thanks,

[sergiokopplin]

Could you send more information about? Like your system, node version, etc. Also, copy and paste the error here.

[anekpattanakij]

Sure, I put my code on https://github.com/anekpattanakij/react-cool-starter
For node version : 7.10.0
npm : 4.2.0
webpack : 3.9.1

This the the first error that I got

D:\Project\react-cool-starter-master\src\containers\Home\index.js
4:18  error  'System' is not defined  no-undef
✖ 1 problem (1 error, 0 warnings)

 @ ./src/routes.js 6:0-41
 @ ./src/containers/App/index.js
 @ ./src/client.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/client.js

Then I added System as a global variable in babelrc as below but the problem is still exist.

    "globals": {
      "__CLIENT__": true,
      "__SERVER__": true,
      "__DISABLE_SSR__": true,
      "__DEV__": true,
      "webpackIsomorphicTools": true,
      "System": true
    }

Thanks,

[wellyshen]

@anekpattanakij, You can use babel-plugin-dynamic-import-node on server-side. And use import() instead of System.import().

BTW, for client side, you can use babel-plugin-syntax-dynamic-import

[CreativeBuilds]

When I use babel-plugin-syntax-dynamic-import for client side, it says invalid token and then still breaks.

[maullerz]

confirm, using babel-plugin-syntax-dynamic-import and webpack v4.29.0, webpack-cli v3.2.1
getting error from webpack

ERROR in ./src/pages/promo/index.jsx 13:11
Module parse failed: Unexpected token (13:11)
You may need an appropriate loader to handle this file type.
| var AsyncLandingPage = asyncComponent({
|   resolve: function resolve() {
>     return import(
|     /* webpackChunkName: "landing-page" */
|     './LandingPage');
 @ ./src/routes.jsx 17:0-63 36:15-31 58:15-23 61:15-19
 @ ./src/index.jsx
 @ multi webpack-dev-server/client?http://0.0.0.0:3000 webpack/hot/dev-server ./src/index.jsx

But when i use System.import()

WARNING in ./src/pages/promo/index.jsx 13:11-15:20
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/

😆