Babel 6->7: Error unknown: Unexpected token (spread operator)

Question

I migrating from babel 6 to babel 7. I get some errors that I can't correct.

unknown: Unexpected token (even though I am using @babel/plugin-proposal-object-rest-spread).

This issue appear whin I ran the jest unit test suite.

The error log:

 ► yarn run test:unit
yarn run v1.13.0
$ jest --clearCache && jest --coverage=false
Cleared /tmp/jest_rs
 FAIL  test/unit/store.test.js
  ● Test suite failed to run

    unknown: Unexpected token (55:10)

      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
      Here's what you can do:
       • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
       • If you need a custom transformation specify a "transform" option in your config.
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
      You'll find more details and examples of these config options in the docs:
      https://jestjs.io/docs/en/configuration.html
      Details:
      unknown: Unexpected token (55:10)
        53 |       mainMenu: [
        54 |         {
      > 55 |           ...this.$store.state.routes.home,
           |           ^
        56 |           type: Utils.MenuRecordType.PAGE,
        57 |           name: this.$t(`main_menu.${this.$store.state.routes.home.key}`),
        58 |           children: []

My babel.config.js and my jest.config.js. (Not post here due to stackoverflow limitation (too many code in your post…)).

The whole code can be found on github.

Do you get those errors when you build your site or just when running Jest? Which npm command are you running to kick off Jest? — Matt Oestreich, Mar 30 '19 at 02:51
It seems like you just need to find the correct plugin.. try these: [Link One](https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread), [Link Two](https://books.google.com/books?id=1plGDwAAQBAJ&pg=PA254&lpg=PA254&dq=babel-preset-stage-2+jest+nuxt&source=bl&ots=gjI09iTC1v&sig=ACfU3U0NeHUlkgO0ZIFR3-XMaVCIk7BjFQ&hl=en&sa=X&ved=2ahUKEwistpzv6KjhAhUEL6wKHfwcD7YQ6AEwDXoECAkQAQ#v=onepage&q=babel-preset-stage-2%20jest%20nuxt&f=false) - best of luck! — Matt Oestreich, Mar 30 '19 at 03:00
it seems that u dont have babel config for jest at all. Create .babelrc — Aldarund, Mar 30 '19 at 11:08
@MattOestreich, You provide a bad link. Link one is for babel 6, no babel 7. Second link seem to not realy related to this issue. — Heziode, Mar 30 '19 at 11:24
@Aldarund, nop, I already have a babel config. I can't put it here due to stackoverflow code restriction (to many code in you post…), [check my babel.config.js](https://github.com/Heziode/FOE-Tools.github.io/blob/feature/migrate-to-babel-7/babel.config.js), and my [jest.config.js](https://github.com/Heziode/FOE-Tools.github.io/blob/feature/migrate-to-babel-7/jest.config.js) — Heziode, Mar 30 '19 at 11:27
@MattOestreich Those errors only appears with Jest. for test I run `yarn run test:unit` that run: `jest --clearCache && jest --coverage=false` — Heziode, Mar 30 '19 at 11:34
@Heziode have you tried Googling this error? There is a TON of stuff you could try. [Scroll to the bottom](https://forum.vuejs.org/t/unexpected-token-when-using-mapstate/4162/7) - [Another](https://forum.vuejs.org/t/vue-loader-unexpected-token-error-for-using-spread-operator-on-my-vue-component/10241/6) - [Another](https://stackoverflow.com/questions/51229628/setting-up-the-babel-plugin-for-spread-operator-correctly) - [Stage2](https://www.npmjs.com/package/babel-preset-stage-2) — Matt Oestreich, Mar 30 '19 at 19:47
Perhaps you need to add that plugin under your env->test->plugins in babel config? `plugins: ["transform-vue-jsx", "@babel/plugin-transform-modules-commonjs", "@babel/plugin-proposal-object-rest-spread", "dynamic-import-node"]` - or use it like this? `plugins: ["transform-vue-jsx", "@babel/plugin-transform-modules-commonjs", "transform-object-rest-spread", "dynamic-import-node"]` - Best of luck! — Matt Oestreich, Mar 30 '19 at 19:49
@MattOestreich, no this do not change anything. Yes I have already check on the internet. (I only create a post when I do not find a answer to my problem, so is very very very rare…). I have check your links and this cannot be applied here, because is [deprecated on babel 7](https://babeljs.io/docs/en/babel-preset-stage-2). I have also tested `babel-upgrade` without success… — Heziode, Mar 31 '19 at 00:03
Maybe this issue is happening because you're *currently using* other [deprecated plugins](https://babeljs.io/docs/en/babel-preset-stage-0)? If you're not willing to just try them and give it a shot to see if they work, I'm not sure we can offer any help. — Matt Oestreich, Mar 31 '19 at 01:37
@MattOestreich when I remove everything (`babel.config.js` only contains: `presets: ["@babel/preset-env"]`), errors are always here… — Heziode, Mar 31 '19 at 03:16

score 0 · Answer 1 · answered Mar 06 '20 at 07:54

I have similar issue on 'unexpected token ...', which is the spread operator error against my @testing-library. Even after I check all plugins applied correct as mentioned here and here, and using babel.config.js instead of .babelrc (due to babel7); the error still persists. And the puzzling part is that, the Jenkins pipeline is able to successfully pass the tests for the same commit, without the 'unexpected token error ...'.

Then I found the pattern, that my other team members were also able to run the tests without encountering the error... except me. We're all also using the same package-lock.json

The only difference was I'm using older version of nodejs and npm compared to my peers.

If for the same source code commit, your other peers able to run the test but you. Then this might be useful:

npm cache clean --force
inside your main repo folder: rm -rf node_modules/
upgrade your node js (for me at least to 8.11.x and above)
npm install again
run jest again or npm run test if you define that in package.json

notice that I don't need to upgrade my npm.

Tried your solution. With 8.12.X I have an other error: [file.isFile is not a function](https://github.com/Heziode/FOE-Tools.github.io/blob/feature/migrate-to-babel-7/test/unit/utils.js#L8). With above version (12, 13), I got the same error. — Heziode, Apr 24 '20 at 08:32

Babel 6->7: Error unknown: Unexpected token (spread operator)

1 Answers1