Develop Reference

Preset not found #babel/react when using browserify to bundle js code

In the project that I work at the moment, we use browserify. I have done npm i into my console.
Then when I wanted to generate the js with the command
browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js
it throw an error
preset not found #babel/react
Like every developer I went online and did a search for #babel/react but nothing came up. I have seen variations as #babel/preset-react and tried to use them but it didn't solve my problem.
At that point, my package.json locked like:
{
...
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"stage-1"
]
},
"scripts": {
"build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
"buildSignUp": "npm run build-js",
...
},
"author": "",
"license": "ISC",
"dependencies": {
"#ungap/url-search-params": "^0.1.2",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"braintree-web": "^3.17.0",
"form-serialize": "^0.7.1",
"jest-junit": "^6.3.0",
"nock": "^10.0.6",
"object-assign": "^4.1.1",
"react": "^15.4.2",
"react-accessible-dropdown": "^1.0.2",
"react-animate-height": "^0.10.8",
"react-dom": "^15.4.2",
"react-dropdown": "^1.2.0",
"react-modal": "^3.8.1",
"react-redux": "^5.0.6",
"react-responsive-modal": "^1.9.4",
"react-scroll": "^1.4.7",
"react-select": "^2.1.2",
"react-slick": "^0.24.0",
"react-swipeable": "^5.4.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.8.1",
"validator": "^6.2.1"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"core-js": "^2.5.3",
"envify": "^4.1.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-15": "^1.2.0",
"jest": "^23.6.0",
"react-test-renderer": "^15.6.2",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-test-utils": "^0.3.0",
"uglify-js": "^3.3.9",
"uglifyify": "^4.0.5"
},
"-vs-binding": {
"ProjectOpened": [
"build"
]
},
"jest": {
"setupFiles": [
"<rootDir>/test-setup.js"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"testMatch": [
"**/tests/*.js?(x)"
],
"reporters": [
"default",
"jest-junit"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
],
"coveragePathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
]
}
}
What to install or what to change in order to fix this problem?

The solution in my case was to extend the preset of the package.json
Because the node module extends and evolves from one version to another one there a lot of cases when they are not compatible.
I had deleted my node_module.
Run npm i again.
Added babel-preset-react to my package.json without installing anything, browserify worked properly. My package.json locked like this.
{
"main": "App.jsx",
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"babel-preset-react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"babel-preset-react",
"stage-1"
]
},
"scripts": {
...
}
}
This solved my problem. Please let me know if it works for you as well.

Babel Syntax Error when building React components (with flow typing)

I have written a set of React components which I wish to publish. However when I try to build them to commonjs format with babel before publishing I get the following error which I cannot find a resolution to.
The project is created and ejected from create-react-app
SyntaxError: src/packages/core/src/MyAppBar/MyAppBar.js: Unexpected token, expected ; (20:5)
18 | import {isEmpty} from "lodash";
19 |
> 20 | type MyAppBarPropsType = {
| ^
21 | position?: string,
22 | commandBarActions?: Array<React$Element<React$ElementType>>,
23 | title?: string,
The build line in my npm scripts is
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
I would have thought that #babel/preset-flow would have been sufficient to deal with flow types in my code.
The presets from my babel.config.js file are as follows
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
For completeness my full package.json and babel.config.js are as follows
package.json
{
"name": "react-ccl",
"version": "0.2.0-alpha",
"description": "Common component library based on xyz look and feel guidelines",
"private": true,
"dependencies": {
"#babel/core": "7.6.0",
"#material-ui/core": "3.9.2",
"#material-ui/icons": "3.0.2",
"#material-ui/lab": "3.0.0-alpha.30",
"#material-ui/styles": "3.0.0-alpha.10",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.0",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"highlight": "^0.2.4",
"highlight.js": "^9.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.10.0",
"react-addons-test-utils": "15.5.1",
"react-app-polyfill": "^1.0.3",
"react-dev-utils": "^9.0.4",
"react-dom": "^16.10.0",
"react-test-renderer": "16.10.0",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.40.2",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"#babel/cli": "7.7.7",
"#babel/node": "7.7.7",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/plugin-transform-react-constant-elements": "7.6.0",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.7",
"#babel/preset-flow": "7.7.4",
"#babel/preset-react": "7.7.4",
"#babel/register": "7.0.0",
"babel-cli": "^6.26.0",
"chokidar": "1.6.1",
"cpx": "^1.5.0",
"cross-env": "^6.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.3",
"flow-bin": "0.113.0",
"flow-typed": "^2.6.2",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"lerna": "3.16.4",
"npm-run-all": "4.0.2",
"prop-types": "15.7.2",
"rimraf": "3.0.0",
"react-docgen": "3.0.0"
},
"scripts": {
"prestart": "npm run gen:docs",
"start": "npm-run-all --parallel start:docs gen:docs-watch",
"start:docs": "node scripts/start.js",
"gen:docs": "node scripts/generateComponentData.js",
"gen:docs-watch": "npm run gen:docs -- --watch",
"build:docs": "node scripts/build.js",
"test": "node scripts/test.js",
"predeploy:docs": "npm run build:docs",
"deploy:docs": "gh-pages -d build",
"flow": "flow",
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src/packages/core"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/jest-test-setup.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
}
}
babel.config.js
const productionPlugins = [
'#babel/plugin-transform-react-constant-elements',
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
[
'babel-plugin-transform-react-remove-prop-types',
{
mode: 'unsafe-wrap',
},
],
];
module.exports = {
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-object-rest-spread', { loose: true }],
'#babel/plugin-transform-runtime',
// for IE 11 support
'#babel/plugin-transform-object-assign',
],
ignore: [/#babel[\\|/]runtime/], // Fix a Windows issue.
env: {
cjs: {
plugins: productionPlugins,
},
},
};

Evidently preset-flow was not enough for babel to transpile a flow type defined within a JS file. When I added the following line to devDependencies in my package.json the build worked perfectly.
"babel-plugin-react-remove-properties": "^0.3.0",

React CKeditor Jest error: SyntaxError: Cannot use import statement outside a module

App was created using CreateReactApp with ejecting.
I'm trying to use CKeditor according to this doc CKeditor 5
After few hours it works fine, but much more hours trying to fix error in test finished unsuccessfully!
When I run npm test I got this error:
node_modules/#ckeditor/ckeditor5-editor-classic/src/classiceditor.js:10
import Editor from '#ckeditor/ckeditor5-core/src/editor/editor';
SyntaxError: Cannot use import statement outside a module
1 | import React, { useState, useEffect } from 'react';
2 | import CKEditor from '#ckeditor/ckeditor5-react';
> 3 | import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
my package.json:
{
"private": true,
"dependencies": {
"#babel/core": "7.4.3",
"#ckeditor/ckeditor5-alignment": "^16.0.0",
"#ckeditor/ckeditor5-basic-styles": "^16.0.0",
"#ckeditor/ckeditor5-dev-utils": "^12.0.5",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.5",
"#ckeditor/ckeditor5-editor-classic": "^16.0.0",
"#ckeditor/ckeditor5-essentials": "^16.0.0",
"#ckeditor/ckeditor5-heading": "^16.0.0",
"#ckeditor/ckeditor5-link": "^16.0.0",
"#ckeditor/ckeditor5-list": "^16.0.0",
"#ckeditor/ckeditor5-paragraph": "^16.0.0",
"#ckeditor/ckeditor5-react": "^2.0.0",
"#ckeditor/ckeditor5-theme-lark": "^16.0.0",
"#svgr/webpack": "4.1.0",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"axios": "^0.18.1",
"babel-eslint": "10.0.1",
"babel-jest": "24.7.1",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^8.0.0",
"base64url": "^3.0.1",
"blueimp-load-image": "^2.21.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"cleave.js": "^1.4.10",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"file-loader": "3.0.1",
"fingerprintjs2": "^2.1.0",
"flow-typed": "^2.5.2",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.4",
"history": "^4.9.0",
"html-react-parser": "^0.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"lint-staged": "^8.1.5",
"mini-css-extract-plugin": "0.5.0",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"qs": "^6.7.0",
"raw-loader": "^3.1.0",
"rc-slider": "^8.6.9",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.0",
"react-avatar-editor": "^11.0.7",
"react-dates": "^20.2.2",
"react-dev-utils": "^9.0.0",
"react-dom": "^16.8.6",
"react-modal": "^3.8.1",
"react-onclickoutside": "^6.8.0",
"react-places-autocomplete": "^7.2.1",
"react-redux": "^7.0.3",
"react-responsive": "^6.1.2",
"react-router-dom": "^5.0.0",
"react-select": "^2.4.3",
"react-slick": "^0.24.0",
"react-test-renderer": "^16.8.6",
"react-truncate": "^2.4.0",
"react-with-direction": "^1.3.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-standard": "^18.3.0",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run test && flow"
}
},
"proxy": "https://getrenty-qa.devopsready.tools",
"scripts": {
"start": "node scripts/start.js",
"precommit": "npm test && lint-staged",
"build": "node scripts/build.js",
"test:lint:js": "eslint src/**/*.{js,jsx}",
"test:lint:scss": "stylelint --config=.stylelintrc \"**/*.scss\"",
"test:lint": "npm run test:lint:js && npm run test:lint:scss",
"test:unit": "node scripts/test.js --env=jsdom",
"test": "npm run test:lint && npm run test:unit",
"test:ci": "node scripts/test.js --env=jsdom --ci --reporters=default --reporters=jest-junit --coverage",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"flow-bin": "^0.98.0",
"jest-junit": "^7.0.0",
"prettier": "^1.17.0",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"stylelint-scss": "^3.6.1",
"husky": "^2.1.0"
},
"jest": {
"coverageReporters": [
"text",
"cobertura"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [
"src/"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
}
}
component code:
import React, { useState, useEffect } from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '#ckeditor/ckeditor5-heading/src/heading';
import Link from '#ckeditor/ckeditor5-link/src/link';
import List from '#ckeditor/ckeditor5-list/src/list';
import styles from './rtf.module.scss';
const editorConfig = {
plugins: [
Essentials,
Alignment,
Bold,
Italic,
Paragraph,
Heading,
Link,
List,
],
toolbar: [
'heading',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'alignment',
],
};
type Props = {
initialData?: string,
onSave: Function,
title?: string,
savingStatus?: string,
};
const Editor = ({ initialData, onSave, title, savingStatus }: Props) => {
const [editorData, setData] = useState(initialData || '');
useEffect(() => {
setData(initialData);
}, [initialData]);
const handleChange = (event, editor) => {
const data = editor.getData();
setData(data);
};
const resetEdit = () => {
setData(initialData);
};
const handleSave = () => {
onSave(editorData);
};
return (
<div>
<div className={styles.title_row}>
<h5 className={styles.title}>{title}</h5>
<button
type="button"
className={`button_small ${styles.to_right}`}
onClick={resetEdit}
>
Reset
</button>
<button
type="button"
className="button_green_dark_short"
onClick={handleSave}
>
Save
</button>
</div>
<div className={styles.saving_status}>{savingStatus}</div>
<div className={styles.rtf_wrapper}>
<CKEditor
config={editorConfig}
editor={ClassicEditor}
onChange={handleChange}
data={editorData}
/>
</div>
</div>
);
};
Editor.defaultProps = {
initialData: '',
title: '',
savingStatus: '',
};
export default Editor;
I have tried modify jest.transformIgnorePatterns in package.json but it failed again.
Any advices?????

This is happening because you are using the unbundled version of the ckeditor, jest does not understand es6, so you got to change transformIgnorePatterns so jest can be able to compile the files for you.
This is for a standard jest configuration (e.g jest.config.js) and .babelrc
*If you are using .babelrc try changing it to babel.config.js
In your jest configuration file include this:
{
moduleNameMapper: {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
},
transformIgnorePatterns: ['/node_modules/(?!#ckeditor)/.+\\.js$']
}
If you are using craco in a react app use it like this:
jest: {
configure(config) {
config.moduleNameMapper = {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
};
...
config.transformIgnorePatterns = ['/node_modules/(?!#ckeditor)/.+\\.js$'];
return config;
},
},
The ckeditor builded version is buggy right now, I hope they fix it soon enough...

How can I solve " TypeError: Cannot set property '_eventListeners' of undefined" with jest

I have a vue.js application, and I installed Jest using these instruction:
https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-jest.html.
when I run npm test, I get the error.
● Test suite failed to run
TypeError: Cannot set property '_eventListeners' of undefined
at Window.close (node_modules/jsdom/lib/jsdom/browser/Window.js:475:51)
I have done everything in the docs, and every other thing about the app is fine, except testing. Please, how can I solve this issue?
This is my package.json config file:
{
"name": "vendor",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"vue": "^2.5.22",
"vue-router": "^3.0.2",
"vuetify": "^1.3.0"
},
"devDependencies": {
"vue-server-renderer": "^2.6.6",
"babel-core": "^6.26.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.4.0",
"#vue/cli-service": "^3.4.0",
"#vue/server-test-utils": "^1.0.0-beta.29",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"gulp-babel": "^8.0.0",
"jest": "^24.1.0",
"jest-serializer-vue": "^2.0.2",
"jsdom": "^13.2.0",
"jsdom-global": "^3.0.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.4.6",
"vue-jest": "^3.0.3",
"vue-template-compiler": "^2.6.5",
"vuetify-loader": "^1.0.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.{js,vue}",
"!**/node_modules/**"
],
"coverageReporters": [
"html",
"text-summary"
],
"snapshotSerializers": [
"jest-serializer-vue"
]
}
}

Babel module build failed when passing multiple presets into create-react app package.json

I have the following package.json config(babel options are at the bottom):
{
"name": "react-tea-timer",
"version": "0.2.0",
"private": false,
"devDependencies": {
"autoprefixer": "6.7.2",
"babel-core": "6.22.1",
"babel-eslint": "7.1.1",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-preset-mobx": "^1.0.1",
"babel-preset-react-app": "^2.2.0",
"babel-runtime": "^6.20.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.1",
"detect-port": "1.1.0",
"dotenv": "2.0.0",
"enzyme": "^2.7.1",
"eslint": "3.16.1",
"eslint-config-react-app": "^0.6.2",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "4.0.0",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.10.0",
"flow-bin": "^0.42.0",
"fs-extra": "0.30.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.3",
"jest": "^19.0.2",
"json-loader": "0.5.4",
"object-assign": "4.1.1",
"postcss-loader": "1.2.2",
"promise": "7.1.1",
"react-addons-test-utils": "^15.4.2",
"react-dev-utils": "^0.5.2",
"sinon": "^2.1.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.2"
},
"dependencies": {
"mobx": "^3.1.9",
"mobx-react": "^4.1.8",
"rc-slider": "^6.3.1",
"react": "^15.4.2",
"react-blur-image-loader": "^0.2.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"flow": "flow"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
}
},
"babel": {
"presets": [
"react-app",
"mobx"
]
},
"eslintConfig": {
"extends": "react-app"
},
"homepage": "https://shooshte.github.io/teaTimer/"
}
Now according to the babel docs this is the correct way to pass in multiple presets, but I am still getting the following error when running npm run start:
Error in ./src/Stores/timerStore.js Module build failed:
ReferenceError: [BABEL]
/Users/shooshte/PersonalProjects/teaTimer/src/Stores/timerStore.js:
Unknown option:
/Users/shooshte/PersonalProjects/teaTimer/node_modules/mobx/lib/mobx.js.extras.
Check out http://babeljs.io/docs/usage/options/ for more information
about options.
A common cause of this error is the presence of a configuration
options object without the corresponding preset name. Example:
Invalid: { presets: [{option: value}] } Valid: { presets:
[['presetName', {option: value}]] }
For more detailed information on preset configuration, please see
http://babeljs.io/docs/plugins/#pluginpresets-options. (While
processing preset:
"/Users/shooshte/PersonalProjects/teaTimer/node_modules/mobx/lib/mobx.js")
at Array.map (native) # ./src/index.js 15:18-48