Jest: Babel plugin-syntax-dynamic-import not in effect when running with Jest

[revmischa]

My project builds and runs fine with webpack normally. When I run it under Jest, it doesn't like my dynamic import:

        const ExtensionReducer = await import('../../../reducers/extension');
                                       ^^^^^^

    SyntaxError: Unexpected token import

      46 | 
      47 | class LinksContainer extends React.Component {
    > 48 |   constructor (props) {
      49 |     super(props)
      50 | 
      51 |     this.state = {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/pixel/links/linksContainer.jsx:48:46)
      at Object.<anonymous> (src/components/pixel/firstPixelCreator/firstPixelCreator.jsx:22:46)

.babelrc:

{
  "presets": [[
    "@babel/preset-env", {
      "targets": {
        "chrome": "60"
      }
  }], "@babel/react"],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-decorators",
    "@babel/plugin-proposal-object-rest-spread"]
}

I tried asking #need-help on discord and they didn't know what was up.

I share the same webpack config with Jest that I use normally to build.

[SimenB]

Please create a reproduction repo we can pull and test

[revmischa]

Using my advanced programmer skills of guessing, I looked at https://www.npmjs.com/package/babel-preset-react-app-babel-7 dependencies and guessed that I was missing babel-plugin-transform-dynamic-import. Tests seem to run now that this is added. Why this is needed for Jest and not for normal operation is a mystery to me.

[revmischa]

Also I don't know how people normally figure this insane shit out

[SimenB]

What do you mean with "normal operation"? Node doesn't support import(), so it has to be transformed for you to use it in node.

[revmischa]

Like on the web. I was already using @babel/plugin-syntax-dynamic-import", I think it was working on web with just that. Jest seems to additionally need transform-dynamic-import. Unless I'm very confused (which is quite possible)

[SimenB]

The web is not node - node does not support import() (yet).

$ node -p 'import()'
[eval]:1
import()
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (module.js:643:30)
    at evalScript (bootstrap_node.js:462:27)
    at startup (bootstrap_node.js:163:9)
    at bootstrap_node.js:608:3

[nurbek-ab]

@SimenB I think you are missing the point here. @revmischa is talking about the envs. The syntax error mentioned above only occurs in test env. In development and production envs everything works fine. I had the same problem and replacing plugin-syntax-dynamic-import with babel-plugin-transform-dynamic-import eliminates the error.

[SimenB]

All I'm saying is you have to transpile it, node doesn't support it. The fact OP configured Babel wrong isn't an issue with Jest. Jest's docs contains both the syntax plugin and a transform: https://facebook.github.io/jest/docs/en/webpack.html#using-with-webpack-2

[kopax]

How did you solve this issue? I have the same after upgrading to babel 7 -/

[artzhy]

it's working with babel 7, react, jest
for react use

@babel/plugin-syntax-dynamic-import

for jest use

dynamic-import-node

plugins: [
  ...
    '@babel/plugin-syntax-dynamic-import',
 ...
],
  env: {
    test: {
      plugins: ['dynamic-import-node']
    }
  }

[jdgarcia1381]

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

[MilosRasic]

syntax plugins simply allow the syntax without transforming it.

We use syntax plugin for dynamic imports with bundlers because bundlers handle imports.

Jest doesn't handle imports so it needs a transform plugin.

[hellatan]

All I'm saying is you have to transpile it, node doesn't support it.

@SimenB we are transpiling our server-side code with babel and do not need the 'dynamic-import-node' plugin for our server builds and didn't see an issue when running that build process. If this is needed for jest since jest runs in a node environment, shouldn't I see the same issues with my server build? I have '@babel/plugin-syntax-dynamic-import' in the server build as a plugin but why isn't that enough in this case to transpile dynamic imports for jest to understand?

[SimenB]

I'm not sure what code you're running, could you provide an example?

import() doesn't work in node

$ node -v
v10.15.3
$ yarn init -y
$ yarn add @babel/core @babel/cli @babel/plugin-syntax-dynamic-import
$ echo 'import("thing")' | yarn --silent babel --no-babelrc --plugins=@babel/plugin-syntax-dynamic-import | node -p
UnhandledPromiseRejectionWarning: Error: Not supported

Which is the same result as doing

$ node
> import('thing')
Promise {
  <rejected> Error: Not supported

or

$ node -p 'import("thing")'
Promise {
  <rejected> Error: Not supported

---

It seems node now support the syntax, but throws an error when running the code. So if it actually works for you, that means you either transpile away import() or you bundle with something that transpiles it away for you, like webpack.

[MilosRasic]

It seems node now support the syntax, but throws an error when running the code. So if it actually works for you, that means you either transpile away import() or you bundle with something that transpiles it away for you, like webpack.

or it's dead code :wink:

[SimenB]

$ node -e "import('fs').then(fs => { console.log('yay, it works', fs) }).catch(e => { console.error('oh no, it failed', e) })"
oh no, it failed Error: Not supported
    at [eval]:1:1
    at Script.runInThisContext (vm.js:119:20)
    at Object.runInThisContext (vm.js:326:38)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at evalScript (internal/bootstrap/node.js:589:27)
    at startup (internal/bootstrap/node.js:265:9)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

EDIT: Oh, you meant the code never executes for the people saying it's working in node? If so, I guess that might be the case. I really hope not, though 😛

[hellatan]

@MilosRasic or it's dead code is definitely not the case here 😄

@SimenB thanks for pointing me in the right direction. Though we use webpack, we don't use it on the server. However, our build setup is creating a file list dynamically and adding it to the only array for our @babel/register configuration so it seems like that's where we do our transpiling for imports, etc. That being the case, we do not use @babel/register with our jest config. Now it's making a lot more sense.

[vhoyer]

how about import(`./assets/${someVariable}`)? I can't find any material online for it :/