"@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.54"> SyntaxError: Unexpected token import

[rickcoub]

i have server side rendering on client package.json

    "@babel/core": "^7.0.0-beta.54",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.54",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "@babel/preset-react": "^7.0.0-beta.54",
    "@babel/preset-stage-0": "^7.0.0-beta.54",
    "babel-loader": "^8.0.0-beta.4",
    "babel-plugin-dynamic-import-node": "^2.0.0",
    "babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-runtime": "^6.26.0",

on server side package.json

    "@babel/core": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "@babel/register": "^7.0.0-beta.54",
    "babel-plugin-dynamic-import-node": "^2.0.0",
    "babel-plugin-dynamic-import-node-babel-7": "^2.0.7"

in webpack.config.js

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          "plugins": ["@babel/plugin-syntax-dynamic-import"],
          "presets": [ '@babel/preset-react',
            '@babel/preset-env',
            '@babel/preset-stage-0', ]
        }
      },

on server side in server.js

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-syntax-dynamic-import"],
  presets: [ [ '@babel/preset-env',
  ], '@babel/preset-react', '@babel/preset-stage-0', ],
});

starting server side got error

node server.js
/Users/z/project/src/_server/routes.js:1
(function (exports, require, module, __filename, __dirname) { import express from 'express';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/z/project/src/_server/server.js:62:14)

[babel-bot]

Hey @rickcoub! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[existentialism]

On the node side, you will want to use babel-plugin-dynamic-import-node.

[rickcoub]

@existentialism yes, i tried this also, it does not work

[existentialism]

From above:

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-syntax-dynamic-import"],
  presets: [ [ '@babel/preset-env',
  ], '@babel/preset-react', '@babel/preset-stage-0', ],
});

Have you tried including it in your server side config?

[loganfsmyth]

Can you clarify what you mean with

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-syntax-dynamic-import"],
  presets: [ [ '@babel/preset-env',
  ], '@babel/preset-react', '@babel/preset-stage-0', ],
});

That's literally compiling a JS string "code" and then discarding the compiled result. Did you maybe mean for that to be @babel/register?

[againksy]

@existentialism yes i tried plugins: ["@babel/plugin-syntax-dynamic-import"], - got same error

[existentialism]

@againksy that enables our parser to understand the syntax, but you’ll need babel-plugin-dynamic-node to transpire it so that it works with node...

[againksy]

@existentialism @loganfsmyth https://github.com/againksy/webpack4-serverside-react16/tree/babel7 - branch babel7 here you can check - i set up the babel-plugin-dynamic-node and got the unexpected token import error

[jdgarcia1381]

You can check a possible solution on this issue: https://github.com/babel/babel-loader/issues/493#issuecomment-452380751

[mqliutie]

@existentialism Yeah! It works

[sergioviniciuss]

Have you tried removing the trailing comma you have after '@babel/preset-stage-0' ?