Related
the context is the following: I am learning unit testing using Jest. My current enviroment is Jest with Webpack as I am using ES6 Modules. In my current project, I'm only testing JavaScript logic, not the UI. Ideally, Jest would skip over my imported files and only test functions in my current file. The test suite was working as expected, until I imported a DOM rendering file into my main JS file (import './display.js'). I see this error in every test I run.
import './display.js';
import './style.css';
import {pubSub, ps} from './subscriptions.js';
import {Gameboard, tiles} from './gameboard.js'
If I don't add import './display.js', I get this error:
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
I did try installing jsdom as well, but nothing happens.
I also tried adding './display.js' to an excluded files list in my package.json, but that didn't work either.
I used:
collectCoverageFrom: ['!src/display.js']
This is my package.json:
{
"name": "battleship",
"jest": {
"collectCoverageFrom": [
"!src/display.js"
]
},
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "jest --coverage",
"build": "webpack",
"watch": "jest --watch *.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/itsaflamingo/Battleship.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/itsaflamingo/Battleship/issues"
},
"homepage": "https://github.com/itsaflamingo/Battleship#readme",
"devDependencies": {
"#babel/preset-env": "^7.18.6",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.2",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"acorn": "^8.7.1",
"acorn-import-assertions": "^1.8.0",
"ajv": "^6.12.6",
"ajv-keywords": "^3.5.2",
"ansi-regex": "^5.0.1",
"boolbase": "^1.0.0",
"browserslist": "^4.21.1",
"buffer-from": "^1.1.2",
"camel-case": "^4.1.2",
"caniuse-lite": "^1.0.30001361",
"chrome-trace-event": "^1.0.3",
"clean-css": "^5.3.0",
"clone-deep": "^4.0.1",
"colorette": "^2.0.19",
"commander": "^2.20.3",
"cross-spawn": "^7.0.3",
"css-select": "^4.3.0",
"css-what": "^6.1.0",
"cssesc": "^3.0.0",
"dom-converter": "^0.2.0",
"dom-serializer": "^1.4.1",
"domelementtype": "^2.3.0",
"domhandler": "^4.3.1",
"domutils": "^2.8.0",
"dot-case": "^3.0.4",
"electron-to-chromium": "^1.4.173",
"enhanced-resolve": "^5.10.0",
"entities": "^2.2.0",
"envinfo": "^7.8.1",
"es-module-lexer": "^0.9.3",
"escalade": "^3.1.1",
"eslint-scope": "^5.1.1",
"esrecurse": "^4.3.0",
"estraverse": "^4.3.0",
"events": "^3.3.0",
"fast-deep-equal": "^3.1.3",
"fast-json-stable-stringify": "^2.1.0",
"fastest-levenshtein": "^1.0.12",
"find-up": "^4.1.0",
"function-bind": "^1.1.1",
"glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.2.10",
"has": "^1.0.3",
"has-flag": "^4.0.0",
"he": "^1.2.0",
"html-minifier-terser": "^6.1.0",
"htmlparser2": "^6.1.0",
"icss-utils": "^5.1.0",
"import-local": "^3.1.0",
"interpret": "^2.2.0",
"is-core-module": "^2.9.0",
"is-plain-object": "^2.0.4",
"isexe": "^2.0.0",
"isobject": "^3.0.1",
"jest-worker": "^27.5.1",
"jsdom": "^20.0.0",
"json-parse-even-better-errors": "^2.3.1",
"json-schema-traverse": "^0.4.1",
"kind-of": "^6.0.3",
"loader-runner": "^4.3.0",
"locate-path": "^5.0.0",
"lodash": "^4.17.21",
"lower-case": "^2.0.2",
"lru-cache": "^6.0.0",
"merge-stream": "^2.0.0",
"mime-db": "^1.52.0",
"mime-types": "^2.1.35",
"nanoid": "^3.3.4",
"neo-async": "^2.6.2",
"no-case": "^3.0.4",
"node-releases": "^2.0.5",
"nth-check": "^2.1.1",
"p-limit": "^2.3.0",
"p-locate": "^4.1.0",
"p-try": "^2.2.0",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-exists": "^4.0.0",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"picocolors": "^1.0.0",
"pkg-dir": "^4.2.0",
"postcss": "^8.4.14",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"pretty-error": "^4.0.0",
"punycode": "^2.1.1",
"randombytes": "^2.1.0",
"rechoir": "^0.7.1",
"relateurl": "^0.2.7",
"renderkid": "^3.0.0",
"resolve": "^1.22.1",
"resolve-cwd": "^3.0.0",
"resolve-from": "^5.0.0",
"safe-buffer": "^5.2.1",
"schema-utils": "^3.1.1",
"semver": "^7.3.7",
"serialize-javascript": "^6.0.0",
"shallow-clone": "^3.0.1",
"shebang-command": "^2.0.0",
"shebang-regex": "^3.0.0",
"source-map": "^0.6.1",
"source-map-js": "^1.0.2",
"source-map-support": "^0.5.21",
"strip-ansi": "^6.0.1",
"supports-color": "^8.1.1",
"supports-preserve-symlinks-flag": "^1.0.0",
"tapable": "^2.2.1",
"terser": "^5.14.1",
"terser-webpack-plugin": "^5.3.3",
"tslib": "^2.4.0",
"update-browserslist-db": "^1.0.4",
"uri-js": "^4.4.1",
"util-deprecate": "^1.0.2",
"utila": "^0.4.0",
"watchpack": "^2.4.0",
"webpack-merge": "^5.8.0",
"webpack-sources": "^3.2.3",
"which": "^2.0.2",
"wildcard": "^2.0.0",
"yallist": "^4.0.0"
},
"keywords": []
}
This is my webpack.config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
display: './src/display.js',
subscriptions: './src/subscriptions.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Battleship',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
This is the test I am running for index.js:
import {Ship, Players, playerBoats} from './index';
test('factory function returns object', () => {
expect(Ship('Carrier', 5)).toMatchObject({
boatName: 'Carrier',
length: 5,
hitSpot: [],
sunk: false,
});
})
test('when hit, factory function returns modified object', () => {
expect(Ship('Destroyer', 2).isHit(1, playerBoats)).toMatchObject({
boatName: 'Destroyer',
coordinates: [],
length: 2,
hitSpot: [1],
sunk: false,
});
})
test('player can attack computer multiple times', () => {
expect(Players().Player().playerAttack(4)).toMatchObject({
boatName: 'Carrier',
coordinates: [2, 3, 4],
length: 5,
hitSpot: [2, 4],
sunk: false,
})
})
I am running Linux on Chromebook and using VS Code, I'm not sure if that makes a difference. I just want to be able to skip UI tests with Jest.
Came back to answer as I struggled with this for a while. My issue was that I was not separating my UI and logic, and jest does not accept DOM methods or selectors unless specified.
I'm only seeing mention of changes in babelrc etc. online for this message. I've tried to remove the dependency that gives me this error and it appears that then next dependency evaluated returns the same message.
The error is coming from any/all of my node_modules folder and the code is correct. I'm guessing something has changed w/ versions of something in my dev dependencies but not sure how to track it down...
I'm using RN 61.5 old I know but this is a production env and can't update atm. Any help on where to look to find the issue please?
"dependencies": {
"#nartc/react-native-barcode-mask": "1.1.5",
"#react-native-community/async-storage": "1.7.1",
"#react-native-community/masked-view": "0.1.5",
"#react-native-community/netinfo": "6.0.2",
"#react-native-community/picker": "1.6.5",
"#reduxjs/toolkit": "1.2.3",
"clone": "2.1.2",
"expo-keep-awake": "8.0.0",
"expo-linear-gradient": "8.0.0",
"lodash": "4.17.19",
"moment": "2.24.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-ble-manager": "git+https:/react-native-ble-manager.git#mergeUpstreamv750",
"react-native-camera": "3.15.1",
"react-native-date-picker": "2.7.12",
"react-native-device-battery": "2.0.0",
"react-native-device-info": "5.5.1",
"react-native-elements": "^3.4.2",
"react-native-exception-handler": "^2.10.10",
"react-native-fs": "2.16.4",
"react-native-gesture-handler": "1.5.3",
"react-native-json-tree": "^1.3.0",
"react-native-lock-task": "1.0.8",
"react-native-masked-text": "1.13.0",
"react-native-modal": "11.5.4",
"react-native-reanimated": "1.4.0",
"react-native-restart": "0.0.17",
"react-native-safe-area-context": "0.6.2",
"react-native-screens": "2.0.0-alpha.23",
"react-native-svg": "12.0.3",
"react-native-unimodules": "0.7.0",
"react-native-vector-icons": "6.6.0",
"react-native-version-number": "0.3.6",
"react-navigation": "4.1.1",
"react-navigation-animated-switch": "0.5.5",
"react-navigation-header-buttons": "3.0.5",
"react-navigation-hooks": "1.1.0",
"react-navigation-stack": "2.0.13",
"react-redux": "7.1.3",
"redux": "4.0.5",
"redux-saga": "1.1.3",
"redux-storage": "4.1.2",
"redux-storage-engine-reactnativeasyncstorage": "1.0.7",
"reselect": "4.0.0",
"sedcommon": "git+https://sedcommon.git#p2.3.6",
"semver": "7.3.2",
"socket.io-client": "4.1.3",
"styled-components": "5.0.0",
"ts-optchain": "0.1.8"
},
"devDependencies": {
"#babel/core": "^7.7.7",
"#babel/runtime": "^7.7.7",
"#carimus/metro-symlinked-deps": "^1.1.0",
"#react-native-community/eslint-config": "^0.0.6",
"#types/jest": "~26.0.13",
"#types/lodash": "^4.14.153",
"#types/node": "^14.0.6",
"#types/react": "^16.9.17",
"#types/react-native": "^0.60.30",
"#types/react-navigation": "^3.4.0",
"#types/react-redux": "^7.1.7",
"#types/react-test-renderer": "^16.9.1",
"#types/socket.io": "^2.1.4",
"#types/styled-components": "^4.4.2",
"#typescript-eslint/eslint-plugin": "^2.26.0",
"#typescript-eslint/parser": "^2.26.0",
"apk-parser": "^0.1.7",
"babel-jest": "^24.9.0",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"husky": "^4.2.3",
"jest": "^26.4.2",
"js-yaml": "^4.1.0",
"jshint": "^2.11.0-rc1",
"metro-react-native-babel-preset": "^0.56.4",
"node-apk-parser": "^0.2.3",
"prettier": "^2.0.5",
"prettier-eslint": "^9.0.1",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "16.9.0",
"redux-devtools-extension": "^2.13.8",
"redux-perf-middleware": "1.2.2",
"simple-git": "^2.44.0",
"ts-jest": "^26.3.0",
"ts-node": "^10.2.0",
"typescript": "^4.4.4"
},
My current babel.conig.js
module.exports = (api) => {
api.cache.using(() => process.env.NODE_ENV);
const presets = ['module:metro-react-native-babel-preset'];
const plugins = [
['dynamic-import-node'],
[
'module-resolver',
{
root: ['./src'],
extensions: ['.js', '.ts', '.tsx', '.ios.js', '.android.js'],
alias: {
// when changed here also change in tsconfig.json
actions: './src/actions',
components: './src/components',
constants: './src/constants',
images: './src/images',
lib: './src/lib',
reducers: './src/reducers',
sagas: './src/sagas',
screens: './src/screens',
utils: './src/utils',
types: './src/types',
},
},
],
];
return {
presets,
plugins,
};
};
we decided to take the big plunge. upgrade the project from rn 61.5 to 67! it only took 2 days ;) wish we would have started there...
I've been using package react-date-range for some time now. After installing some other package, my app suddenly crashes with the following error message as I do npm start
I have NO idea where this is coming from. Tried re-installing the packages after removing them, but it still complains about the missing module.
Here is my package.json file. (Don't mind the mixture of material-ui and bootstrap for the front-end)
Many thanks!
{
"name": "redux-easy-boilerplate",
"version": "1.3.3",
"description": "",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --config webpack/prod.config.js --progress --display-error-details",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"start": "webpack-dev-server --hot --config webpack/dev.config.js --color --progress",
"test": "jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"
},
"jest": {
"setupFiles": [
"./jestsetup.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "identity-obj-proxy"
},
"modulePathIgnorePatterns": [
"jestsetup.js"
],
"collectCoverageFrom": [
"**/src/actions/**.{js,jsx}",
"**/src/reducers/**.{js,jsx}",
"**/src/constants/**.{js,jsx}",
"!**/src/actions/account.js",
"!**/src/actions/user.js",
"!**/src/reducers/account.js",
"!**/src/reducers/user.js",
"!**/src/reducers/index.js",
"!**/http_functions.js",
"!**/misc.js"
]
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"react",
"reactjs",
"boilerplate",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"author": "https://github.com/anorudes, https://github.com/keske",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/polyfill": "^7.2.5",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"autoprefixer": "6.5.3",
"axios": "^0.15.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"bootstrap": "^3.3.5",
"bootstrap-less": "^3.3.8",
"bootstrap-loader": "^3.0.2",
"bootstrap-sass": "^3.4.0",
"bootstrap-webpack": "0.0.6",
"classnames": "^2.2.3",
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^0.26.4",
"csswring": "^5.1.0",
"deep-equal": "^1.0.1",
"deep-freeze": "0.0.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.2.1",
"eslint": "^3.4.0",
"eslint-config-airbnb": "13.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^3.0.1",
"eslint-plugin-react": "^6.1.2",
"expect": "^1.13.4",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.5",
"express": "^4.16.4",
"express-open-in-editor": "^1.1.0",
"file-loader": "^3.0.1",
"gapi": "0.0.3",
"history": "^4.4.1",
"html-webpack-plugin": "^3.2.0",
"http-proxy": "^1.12.0",
"identity-obj-proxy": "^3.0.0",
"imports-loader": "^0.6.5",
"jquery": "^3.1.0",
"jwt-decode": "^2.1.0",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.7.0",
"less": "^2.5.3",
"less-loader": "^4.1.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.5.0",
"morgan": "^1.9.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"q": "^1.4.1",
"qs": "^6.1.0",
"rc-datepicker": "^4.0.1",
"react-addons-css-transition-group": "^15.6.2",
"react-addons-test-utils": "^15.6.2",
"react-calendar-component": "^1.0.0",
"react-date-picker": "^5.3.28",
"react-datepicker": "^0.37.0",
"react-document-meta": "^2.0.0-rc2",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "^1.3.0",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "^5.3.3",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-test-renderer": "^15.6.2",
"react-transform-hmr": "^1.0.1",
"redux": "^3.2.1",
"redux-form": "^6.0.1",
"redux-logger": "2.7.4",
"redux-mock-store": "^1.3.0",
"redux-thunk": "^2.1.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.13.2",
"url-loader": "^0.5.7",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-middleware": "^3.5.2",
"webpack-dev-server": "^3.1.14",
"webpack-hot-middleware": "^2.24.3",
"webpack-merge": "^4.2.1",
"yargs": "^6.5.0"
},
"dependencies": {
"#material-ui/core": "^3.9.0",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^3.0.0-alpha.8",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-sass-loader": "^1.0.10",
"clsx": "^1.0.4",
"codemirror": "^5.33.0",
"date-fns": "^1.30.1",
"emoji-dictionary": "^1.0.10",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"gulp-sass": "^4.0.2",
"markdown-to-jsx": "^6.9.0",
"marked": "^0.3.12",
"moment": "^2.22.2",
"notistack": "^0.8.6",
"react": "^16.7.0",
"react-bootstrap": "^0.32.3",
"react-bootstrap-datetimerangepicker": "^2.0.4",
"react-checkbox-tree": "^1.5.1",
"react-date-range": "^1.0.0-beta",
"react-dom": "^16.7.0",
"react-drag-and-drop": "^2.4.0",
"react-markdown": "^4.2.2",
"react-notifications": "^1.4.3",
"react-swipeable-views": "^0.12.13",
"react-time-picker": "^3.5.2",
"react-timezone": "^2.3.0",
"recharts": "^1.4.2",
"prop-types": "latest",
"uuid": "latest"
}
}
I found a solution. Just did npm install date-fns#next and everything was okay. Had to change some lines of code in app to match date-fns documentation though.
I am using webpack as module bundler and babel for transpiling.
My current npm version is 3.10.9 and node version is v6.9.2.
Package.json
"devDependencies": {
"axios": "^0.17.0",
"babel-eslint": "^8.0.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-preset-mobx": "^1.0.2",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.26.0",
"babel-core": "^6.9.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-1": "^6.5.0",
"clean-webpack-plugin": "^0.1.17",
"compression": "^1.6.1",
"cors": "^2.8.4",
"cross-env": "^5.0.5",
"css-loader": "^0.23.1",
"csslint": "^1.0.5",
"csslint-loader": "^1.0.0",
"eslint": "^4.10.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.4.0",
"express": "^4.9.8",
"express-https-redirect": "^1.0.0",
"express-manifest": "^0.1.1",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"http2": "^3.3.7",
"https": "^1.0.0",
"image-webpack-loader": "^3.4.2",
"jasmine-core": "^2.8.0",
"json-loader": "^0.5.4",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.1",
"karma-webpack": "^2.0.9",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"moment": "^2.19.2",
"node-sass": "^4.5.3",
"postcss": "^6.0.13",
"postcss-css-variables": "^0.8.0",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.6",
"postcss-mixins": "^6.1.1",
"postcss-nested": "^2.1.2",
"postcss-start-to-end": "^1.0.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-doc-generator": "^1.2.5",
"react-docgen-plugin": "^0.1.1",
"react-dom": "^16.2.0",
"react-lazy-load": "^3.0.13",
"react-redux": "^5.0.6",
"react-responsive-carousel": "^3.1.28",
"redux": "^3.7.2",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.0.3",
"rollup-plugin-postcss": "^1.3.3",
"rollup-plugin-replace": "^2.0.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"sw-precache-webpack-plugin": "^0.11.4",
"url-loader": "^0.6.2",
"webfonts-loader": "^4.0.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.1",
"webpack-node-externals": "^1.6.0",
"workbox-webpack-plugin": "^2.1.2",
"wrapper-webpack-plugin": "^1.0.0"
},
"dependencies": {
"expres": "0.0.5",
"express": "^4.14.0",
"express-minify-html": "^0.11.5",
"html-minifier": "^3.5.6",
"jade": "^1.11.0",
"mobx": "^3.0.0",
"mobx-react": "^4.1.0",
"pa11y-ci": "^1.3.1",
"redux-promise": "^0.5.3",
"stylelint-webpack-plugin": "^0.10.2"
},
"babel": {
"plugins": [
"transform-es2015-modules-commonjs"
]
},
when I compile I get below issue.
Using default export (`import mobx from 'mobx'`) is deprecated and wont work in mobx#4.0.0
Use `import * as mobx from 'mobx'` instead
D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL] D:\mgm\dmp\fe-react\webpack.config.babel.js: Unknown option: base.Reaction. 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.
at Logger.error (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at OptionManager.init (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at Object.transformFileSync (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\api\node.js:152:10)
at compile (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:118:20)
at loader (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:154:7)
Please help.
First things first, remove mobx presets from your .babelrc.
{
"presets": ["mobx"]
}
then npm i --save-dev babel-plugin-transform-decorators-legacy and add below .babelrc configration.
{
"presets": ["react", "env", "stage-2"],
"plugins": [
"transform-decorators-legacy", // must on the top of plugins array.
... ...
]
}
finally, you must delete babel-preset-mobx that 0 start on the GitHub, I think it's unstable.
I'm having lots of trouble getting the webpack DLL plugin to work for me. It's work in the sense that the dll is being extracted, and the other bundle sizes are reducing, however when run in the browser I get the following error:
module.js from dll-reference [name]:1 Uncaught TypeError: __webpack_require__(...) is not a function
at Object.../node_modules/webpack/buildin/module.js (module.js from dll-reference [name]:1)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/node-libs-browser/node_modules/punycode/punycode.js (punycode.js:533)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/url/url.js (url.js:24)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.<anonymous> (client:6)
My config seems to be correct according to the docs and people on SO / github who have had the same error message.
webpack.development.js:
let fs = require('fs')
let path = require('path')
let webpack = require('webpack')
const { extractLegacy, extractModules } = require('./extract-text')
let defaultConfig = require('./webpack')
module.exports = Object.assign({}, defaultConfig, {
cache: true,
devtool: '#source-map',
entry: Object.assign(defaultConfig.entry, {
'webpack-dev-server/hot/client?https://app.local.app:8080/':
'webpack-dev-server/client?https://app.local.app:8080/',
'dll.vendor': '../build/dll.vendor.js'
}),
devServer: {
hot: true,
inline: true,
disableHostCheck: true,
host: 'app.local',
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
key: fs.readFileSync(path.join(__dirname, '../l ocalssl/server.key')),
cert: fs.readFileSync(path.join(__dirname, '../localssl/server.crt'))
},
stats: {
cached: false,
cachedAssets: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
depth: false,
errors: true,
errorDetails: true,
hash: false,
maxModules: 0,
modules: false,
providedExports: false,
reasons: false,
source: false,
timings: false,
usedExports: false
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
extractLegacy,
extractModules,
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.DllReferencePlugin({
manifest: require('../build/vendor.json'),
name: '[name]',
context: path.resolve(__dirname, '../')
})
]})
webpack.dll.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [path.resolve(__dirname, './vendors.js')]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory']
}
]
},
output: {
path: path.resolve(__dirname, '../build'),
filename: 'dll.[name].js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../build', '[name].json'),
name: '[name]'
})
],
resolve: {
modules: ['node_modules']
}
}
package.json
{
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"#heroku/foreman": "^2.0.2",
"adm-zip": "^0.4.7",
"amqplib": "^0.5.2",
"autoprefixer": "7.1.3",
"aws-sdk": "^2.104.0",
"babel-cli": "6.16.0",
"babel-eslint": "^7.2.3",
"babel-loader": "6.2.5",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0",
"basic-auth": "1.1.0",
"bcrypt": "^1.0.3",
"body-parser": "1.17.2",
"bookshelf": "0.10.4",
"bookshelf-cascade-delete": "2.0.1",
"bookshelf-paranoia": "0.9.0",
"bootstrap": "3.3.7",
"bunyan": "1.8.10",
"bunyan-middleware": "0.4.0",
"change-case": "3.0.1",
"cheerio": "^1.0.0-rc.2",
"classnames": "2.2.5",
"compression": "1.7.0",
"connect-flash": "0.1.1",
"connect-redis": "3.3.0",
"cookie-parser": "^1.4.3",
"cookies-js": "^1.2.3",
"cron": "1.2.1",
"css-loader": "0.28.4",
"csvtojson": "^1.1.7",
"date-holidays": "^1.2.0",
"deep-equal": "^1.0.1",
"deep-freeze": "^0.0.1",
"deserialize-error": "^0.0.3",
"draft-convert": "^1.4.8",
"draft-extend": "^1.5.0",
"draft-js": "^0.10.1",
"elasticsearch": "^13.0.1",
"email-templates": "^2.7.1",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flow-vars": "^0.5.0",
"express": "4.16.0",
"express-request-id": "1.4.0",
"express-session": "1.15.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"flow": "^0.2.3",
"forever": "^0.15.3",
"helmet": "3.8.0",
"http-errors": "1.6.1",
"ignore-styles": "^5.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "2.2.1",
"jackrabbit": "git+https://github.com/leonlau/jackrabbit.git#da554347132757cd81c39037dd527ee258d088b5",
"jsdom": "^11.5.1",
"json-loader": "0.5.4",
"json2csv": "^3.7.3",
"knex": "0.13.0",
"knex-migrate": "^1.3.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"lodash": "4.16.4",
"md5": "^2.2.1",
"microtime-nodejs": "^1.0.0",
"moment": "2.15.2",
"moment-range": "^2.2.0",
"mongo": "0.1.0",
"mongodb": "2.2.11",
"nconf": "0.8.4",
"newrelic": "^2.6.0",
"node-sass": "^4.5.3",
"normalizr": "^3.2.1",
"numeral": "^2.0.6",
"oauth": "git+https://github.com/Dakuan/node-oauth.git#24bc9bec128b5ca718eb5cd6e319cd22129a5158",
"oauth2-server": "^2.4.1",
"ordinal-numbers": "^1.0.3",
"pdfmake": "^0.1.32",
"pg": "6.1.6",
"pg-hstore": "2.3.2",
"pluralize": "^7.0.0",
"postcss": "6.0.10",
"postcss-loader": "1.1.1",
"prettyjson": "^1.2.1",
"proxyquire": "^1.7.11",
"pug": "2.0.0-beta6",
"quill": "^1.3.1",
"react": "^15.4.1",
"react-addons-perf": "^15.4.2",
"react-autosize-textarea": "^0.4.4",
"react-datepicker": "^0.40.0",
"react-dom": "^15.6.1",
"react-joyride": "^1.10.1",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-redux": "4.0.7",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.1",
"react-slick": "^0.15.0",
"react-slider": "^0.7.0",
"react-sparklines": "^1.6.0",
"react-stripe-elements": "^1.0.1",
"react-table": "^6.6.0",
"react-textarea-autosize": "^5.0.6",
"react-toggle": "^4.0.2",
"react-tooltip": "^3.2.10",
"recharts": "^1.0.0-beta.1",
"recompose": "^0.24.0",
"redfour": "^1.0.2",
"redis": "2.6.3",
"redux": "3.6.0",
"redux-devtools-extension": "^1.0.0",
"redux-form": "^7.1.1",
"redux-logger": "2.7.0",
"redux-saga": "^0.16.0",
"redux-saga-test-plan": "^3.3.1",
"redux-thunk": "2.1.0",
"request": "^2.78.0",
"request-promise": "^4.2.2",
"rewire": "^2.5.2",
"s3": "^4.4.0",
"sass-loader": "^6.0.6",
"sendgrid": "4.7.1",
"serialize-error": "^2.1.0",
"simulant": "^0.2.2",
"snyk": "^1.41.1",
"soap": "^0.21.0",
"socket.io": "^2.0.2",
"socket.io-client": "^2.0.2",
"socket.io-cookie-parser": "^1.0.0",
"socket.io-redis": "^5.1.0",
"stripe": "^5.1.0",
"style-loader": "^0.19.1",
"url-loader": "0.5.7",
"url-parse": "^1.1.9",
"urlencode": "^1.1.0",
"uuid": "2.0.3",
"validate.js": "^0.11.1",
"velocity-animate": "^1.4.0",
"velocity-react": "^1.2.1",
"victory": "0.13.7",
"webpack": "^3.10.0",
"xml2json": "^0.11.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-jest": "16.0.0",
"babel-register": "6.16.3",
"chromedriver": "^2.34.1",
"enzyme": "^2.7.0",
"eslint": "3.8.1",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-lodash-fp": "2.1.3",
"eslint-plugin-react": "6.4.1",
"fetch-mock": "5.5.0",
"flow-bin": "^0.57.2",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"nightwatch": "^0.9.19",
"nock": "9.0.2",
"node-mocks-http": "^1.5.4",
"nodemon": "1.11.0",
"npm-run-all": "^4.1.1",
"nyc": "8.3.2",
"prettier": "1.9.2",
"ps-node": "^0.1.4",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-mock-store": "^1.2.2",
"selenium-server-standalone-jar": "^3.8.1",
"sinon": "1.17.6",
"supertest": "2.0.1",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.21.0"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": "inherit"
},
"nyc": {
"extension": [
".jsx",
".js"
],
"include": [
"src"
],
"exclude": [
"tests",
"build",
"node_modules"
]
},
"engines": {
"node": "8.9.x",
"npm": "5.5.x",
"yarn": "1.3.2"
},
}
folder structure:
-- build
-- src
-- webpack