Switching to babel 7 causes jest to show 'unexpected token' - redux

Question

I am struggling with this jest error and have no idea how to fix it. Basically I ran the following commands to switch to new babel 7:
npx babel-upgrade --write --install
npm install --save-dev #babel/preset-react
npm install babel-polyfill
Here is my package.json where all of the configs are specified (no .babelrc, no jest.config.js):
{
"name": "seqr",
"version": "0.2.0",
"homepage": "",
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.0.0",
"#babel/polyfill": "^7.8.3",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.8.3",
"#babel/runtime-corejs2": "^7.0.0",
"autoprefixer": "7.1.6",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-styled-components": "^1.5.1",
"babel-preset-react-app": "^3.1.2",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"chalk": "2.3.0",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "3.2.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.0",
"eslint-plugin-react": "^7.10.0",
"eslint-plugin-react-perf": "^2.0.8",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "1.1.5",
"fs-extra": "^4.0.3",
"html-webpack-plugin": "2.30.1",
"jest": "^23.6.0",
"natives": "^1.1.6",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.9",
"promise": "8.0.1",
"purify-css": "^1.2.6",
"purifycss-webpack": "^0.7.0",
"react-error-overlay": "^3.0.0",
"react-test-renderer": "16.2.0",
"redux-mock-store": "^1.5.3",
"style-loader": "0.19.0",
"stylelint": "^8.4.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.3.1",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "^3.8.1",
"webpack-cleanup-plugin": "0.5.1",
"webpack-dev-server": "^2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"optionalDependencies": {
"fsevents": "^1.1.3"
},
"dependencies": {
"ajv": "^5.5.2",
"babel-polyfill": "^6.26.0",
"detect-port": "^1.2.3",
"draft-js": "^0.10.4",
"draftjs-md-converter": "^0.1.6",
"filesize": "3.5.11",
"glob": "^7.1.2",
"gtex-d3": "github:broadinstitute/gtex-viz#8d65862",
"gzip-size": "4.1.0",
"igv": "^2.2.2",
"jquery": "3.2.1",
"lodash": "^4.17.11",
"object-hash": "^1.3.0",
"prop-types": "15.6.0",
"query-string": "^6.1.0",
"random-material-color": "1.0.3",
"react": "^16.2.0",
"react-addons-shallow-compare": "15.6.2",
"react-dev-utils": "^4.2.2",
"react-document-title": "2.0.3",
"react-dom": "^16.2.0",
"react-hot-loader": "^3.0.0-beta.7",
"react-markdown-renderer": "^1.4.0",
"react-rangeslider": "^2.2.0",
"react-redux": "5.0.6",
"react-render-visualizer-decorator": "0.4.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-transition-group": "^2.2.1",
"react-virtualized": "^9.9.0",
"react-xhr-uploader": "^0.4.4",
"recursive-readdir": "2.2.1",
"redux": "^3.7.2",
"redux-form": "^7.3.0",
"redux-thunk": "2.2.0",
"request": "^2.88.0",
"reselect": "3.0.1",
"semantic-ui": "2.2.12",
"semantic-ui-react": "^0.80.0",
"slugify": "1.2.6",
"styled-components": "^2.2.3",
"timeago.js": "3.0.2",
"timeout-as-promise": "1.0.0",
"typescript": "^2.9.2",
"why-did-you-update": "^0.1.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"testMatch": [
"<rootDir>/**/?*.(test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"<rootDir>[/\\\\]node_modules[/\\\\](?!(igv|gtex-d3)/).+\\.(js|jsx|ts|tsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"env": {
"test": {
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
},
"plugins": [
"#babel/plugin-syntax-dynamic-import",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
[
"babel-plugin-styled-components",
{
"displayName": true
}
],
[
"babel-plugin-module-resolver",
{
"root": [
"./"
],
"extensions": [
".js",
".jsx",
".css"
],
"alias": {
"shared": "./shared/",
"pages": "./pages/",
"gtex-d3": "./node_modules/gtex-d3/"
}
}
]
],
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"modules": false
}
]
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/macarthur-lab/seqr.git"
},
"license": "AGPL-3.0"
}
I updated to webpack 4 since before I had version 3 as suggested in the thread:
Babel 7 Unexpected token for React component
But it did not help.
Testing is launched by using the specified in package.json script scripts/test.js that looks like that:
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const jest = require('jest');
const argv = process.argv.slice(2);
// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
argv.push('--watch');
}
jest.run(argv);
And ../config/env.js file is the following:
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
`${paths.dotenv}.${NODE_ENV}`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv').config({
path: dotenvFile,
});
}
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
console.log('NODE_PATH: ', process.env.NODE_PATH)
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
module.exports = getClientEnvironment;
Currently running npm run test causes the following error:
Jest encountered an unexpected token
import { json } from 'd3-fetch';
^
>SyntaxError: Unexpected token {
I tried a lot of things. Here is another relevant thread that unfortunately did not help me:
babel#7 and jest configuration
The error is happening in node_modules same as here:
https://github.com/facebook/jest/issues/6229
Any suggestions would be greatly appreciated.
Update
Tried changing test object in package.json config to the following one:
"env": {
"test": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs",
"babel-plugin-dynamic-import-node"
]
}
},
But no luck
Update
Tried to create a separate babel.config.js and move settings from package.json to it, but still not successful:
module.exports = {
"env": {
"test": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-syntax-dynamic-import"
]
}
},
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-regenerator",
"#babel/plugin-syntax-dynamic-import",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
[
"babel-plugin-styled-components",
{
"displayName": true
}
],
[
"babel-plugin-module-resolver",
{
"root": [
"./"
],
"extensions": [
".js",
".jsx",
".css"
],
"alias": {
"shared": "./shared/",
"pages": "./pages/",
"gtex-d3": "./node_modules/gtex-d3/"
}
}
]
],
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"modules": false
}
]
]
}
Update
Finally adding babel-plugin-dynamic-import-node fixed the issue with testing, however, I got a new error:
[eslint-import-resolver-babel-module] TypeError: Cannot read property 'find' of undefined
Update
Updating eslint-import-resolver-babel-module to the latest version fixed the issue, but another came out:
./node_modules/draftjs-md-converter/dist/index.js
Syntax error: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/draftjs-md-converter/dist/index.js: Identifier '_toConsumableArray' has already been declared (195:9)
193 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
194 |
> 195 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
| ^
196 |
197 | var parse = require('markdown-to-ast').parse;
198 |
at parser.next (<anonymous>)