Dynamic imports in Jest produce: SyntaxError: Unexpected token import

Question

Can't figure out how to resolve these errors yet, Jest is complaining about dynamic imports like these:

const importModules = Promise.all([
      import('containers/HomePage/reducer'),
      import('containers/HomePage/sagas'),
      import('containers/HomePage'),
    ]);

Error message:

F:\react-boilerplate\app\store.js:49
      import('./reducers').then(function (reducerModule) {
      ^^^^^^
SyntaxError: Unexpected token import

You can find all of the details here: https://github.com/mxstbr/react-boilerplate/pull/1358

It looks like this: github.com/Dattaya/react-boilerplate/blob/… — Dattaya
– Dattaya, Commented Dec 17, 2016 at 14:40
Have you tried to use the same plugins for prod and test. Seems like babel cant compile the stuff with your babel env.test settings — Andreas Köberle
– Andreas Köberle, Commented Dec 17, 2016 at 18:26
Thank you @AndreasKöberle for your suggestion, I added babel-plugin-dynamic-import-node plugin to the list of plugins in test environment and the error was resolved for the most parts. I guess dynamic import()s can't be polyfilled so the only choice for node is to transform them to require inside a Promise. — Dattaya
– Dattaya, Commented Dec 17, 2016 at 20:52

Dattaya · Accepted Answer · 2017-01-04 15:01:17Z

7

Installing babel-plugin-dynamic-import-node solved our problem. In addition, make sure that babylon (babel dependency) is at least 6.12.0.

Also, we had a problem with Travis build because Travis cached node_modules and old babylon with it:

$ npm ls babylon
[email protected] /home/travis/build/mxstbr/react-boilerplate
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]

, so we had to turn the cache off with: cache: false

answered Jan 4, 2017 at 15:01

Dattaya

93911 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arnaud Valle Over a year ago

I had a similar issue where Jest tests would run fine locally (with the @babel/plugin-syntax-dynamic-import plugin) but they would fail during CI. Adding babel-plugin-dynamic-import-node worked (because the CI runs on node). See github.com/facebook/jest/issues/5920#issuecomment-444112504

Andreas Köberle · Accepted Answer · 2016-12-17 21:00:39Z

0

It looks like jest cant compile your files with the babel settings for test in your .babelrc file. You need to have the same settings for prod and test

answered Dec 17, 2016 at 21:00

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

Collectives™ on Stack Overflow

Dynamic imports in Jest produce: SyntaxError: Unexpected token import

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related