Develop Reference

TypeError: getAllByTestId(...).at is not a function locally but passes in Azure Pipeline

I am very new to programming and even greener when it comes to JS. I noticed when testing with jest, several of the tests failed even though they succeeded in the pipeline and were merged into the project. A coworker pulled my branch that had my revisions and the tests passed for him locally. The only tests that are failing use getAllByTestId from React Testing Library. Example test:
it('Should render component with text input change', () => {
Object.defineProperty(AppConfig, 'IS_WEB', { value: false });
const { getAllByTestId } = render(
<div>
<CaregiverEditAlert />
</div>
);
const elem = getAllByTestId('test-input').at(0);
elem && fireEvent.change(elem, { target: { value: 'test' } });
});
When run, the output is:
CaregiverEditAlert › Should render component with text input change
TypeError: getAllByTestId(...).at is not a function
79 | </div>
80 | );
> 81 | const elem = getAllByTestId('test-input').at(0);
| ^
82 | elem && fireEvent.change(elem, { target: { value: 'test' } });
83 | });
84 |
at Object.<anonymous> (src/components/__tests__/CaregiverEditAlert.test.tsx:81:47)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
If I log
console.log('GetAllByTestId is a', typeof(getAllByTestId));
it returns:
console.log
GetAllByTestId is a function
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#material-ui/core": "^4.12.4",
"#miblanchard/react-native-slider": "^2.1.0",
"#mui/material": "^5.9.1",
"#react-google-maps/api": "^2.13.1",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-community/netinfo": "^9.3.5",
"#react-native-community/picker": "^1.8.1",
"#react-native-community/slider": "4.1.12",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/core": "^6.1.1",
"#react-navigation/material-top-tabs": "^6.1.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.1.1",
"#react-navigation/web": "^1.0.0-alpha.9",
"#testing-library/react": "12",
"#testing-library/react-native": "^9.0.0",
"#testing-library/user-event": "^14.4.3",
"#types/googlemaps": "^3.43.3",
"#types/react": "^18.0.7",
"#types/react-datepicker": "^4.3.4",
"#types/react-dom": "^18.0.0",
"#types/react-native": "^0.67.1",
"#types/react-native-vector-icons": "^6.4.10",
"#types/react-pdf": "^5.0.2",
"#types/styled-components": "^5.1.24",
"apisauce": "^2.1.5",
"aws-amplify": "^4.3.15",
"google-libphonenumber": "^3.2.27",
"jest-svg-transformer": "^1.0.0",
"modal-enhanced-react-native-web": "^0.2.0",
"moment": "^2.29.1",
"react": "17.0.1",
"react-datepicker": "^4.7.0",
"react-dom": "17.0.1",
"react-geocode": "^0.2.3",
"react-native": "0.65.1",
"react-native-actionsheet": "^2.4.2",
"react-native-communications": "^2.2.1",
"react-native-config": "^1.4.5",
"react-native-date-picker": "^4.2.0",
"react-native-geocoder": "^0.5.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-image-crop-picker": "^0.37.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-modal": "^13.0.1",
"react-native-open-settings": "^1.0.1",
"react-native-pager-view": "5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-splash-screen": "^3.3.0",
"react-native-tab-view": "^3.1.1",
"react-native-toast-message": "^2.1.2",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "^0.17.7",
"react-native-web-maps": "^0.3.0",
"react-pdf": "^5.4.1",
"react-portal": "^4.2.1",
"react-redux": "^7.2.6",
"react-test-renderer": "^17.0.2",
"reactotron-react-native": "^5.0.1",
"redux": "^4.1.2",
"redux-mock-store": "^1.5.4",
"redux-persist": "^6.0.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.1.3",
"reduxsauce": "^1.2.1",
"require": "^2.4.20",
"reselect": "^4.1.5",
"safe-buffer": "^5.2.1",
"seamless-immutable": "^7.1.4",
"ts-node": "^10.9.1"
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-proposal-private-methods": "^7.16.11",
"#babel/plugin-proposal-private-property-in-object": "^7.16.7",
"#types/jest": "^27.4.1",
"#types/prop-types": "^15.7.4",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.20.0",
"#typescript-eslint/parser": "^5.20.0",
"babel-loader": "^8.2.4",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-react-app": "^10.0.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.6",
"dotenv-expand": "^8.0.3",
"eslint": "^8.14.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-n": "^15.2.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"eslint-plugin-react-native": "^4.0.0",
"eslint-watch": "^8.0.0",
"eslint-webpack-plugin": "^3.1.1",
"fork-ts-checker-webpack-plugin": "^7.2.3",
"html-webpack-plugin": "^5.5.0",
"image-webpack-loader": "^8.1.0",
"jest": "^27.5.1",
"mini-css-extract-plugin": "^1.6.2",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"patch-package": "^6.4.7",
"pnp-webpack-plugin": "^1.7.0",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-safe-parser": "^6.0.0",
"prettier": "^2.6.2",
"react-dev-utils": "^12.0.0",
"react-native-dotenv": "^3.3.1",
"reactotron-react-js": "^3.3.7",
"reactotron-redux": "^3.1.3",
"reactotron-redux-saga": "^4.2.3",
"rimraf": "^3.0.2",
"sass": "^1.52.3",
"sass-loader": "^10.1.1",
"style-loader": "^3.3.1",
"styled-components": "^5.3.3",
"ts-jest": "^27.1.3",
"ts-loader": "^9.2.8",
"typescript": "^4.6.2",
"url-loader": "^4.1.1",
"webpack": "^5.71.0",
"webpack-dev-server": "^4.8.1",
"webpack-manifest-plugin": "^5.0.0",
"workbox-webpack-plugin": "^6.5.2"
I have looked all over for a solution and asked some coworkers what they think the issue might be.
One mentioned it might be an issue with a version of a module I am using, but I haven't changed anything since I cloned the repo. I am also using linux and everyone else uses windows or Mac. Has anyone else come across an issue like this or know of a possible solution? Thank you. If I'm missing anything that you might need, I can include it.

babelHelpers is not defined when using an old package

Currently, I'm working on a vuetify v1.5 project. One of my dependency package (d3-flextree) does not work in the case of the 'babelHelpers is not defined' error.
What I've found says: "Use transform-runtime instead of the external-helpers plugin".
My .babelrc file is:
{
"presets": ["es2015", "stage-2"],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
],
"comments": false
}
but .babelrc in ./node_module/d3-flextree is:
{
"presets": [
[
"es2015",
{ "modules": false }
]
],
"plugins": ["external-helpers"]
}
Should I override ./node_module/d3-flextree/.babelrc? if yes, how?
Is there any webpack trick?
My package.json
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.5.3",
"d3": "^5.7.0",
"d3-flextree": "^2.1.1",
"d3-flextree-v4": "^1.0.1",
"font-awesome": "^4.6.3",
"hchs-vue-charts": "^1.2.8",
"html-loader": "^1.1.0",
"html-webpack-externals-plugin": "^3.8.0",
"html2canvas": "^1.0.0-rc.5",
"ts-loader": "^7.0.5",
"vue": "^2.5.11",
"vue-color": "^2.7.1",
"vue-grid-layout": "^2.3.8",
"vue-i18n": "^8.22.1",
"vue-input-autowidth": "^1.0.10",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.6.11",
"vue-template-compiler": "^2.5.11",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.23.2",
"vuetify": "^1.5.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^3.4.1",
"cross-env": "^3.1.3",
"css-loader": "^0.26.4",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^0.5.7",
"vue-loader": "^13.6.0",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}

I've found a trick.
There is a CDN file for 'd3-flextree'. Just copy it into a file in the project and then replace the original npm package.
- import * as d3flex from "d3-flextree"
+ import * as d3flex from "../statics/scripts/d3-flextree.min"

How to solve webpack plugin compilation error

I am in the process of migrating my node.js project. I just upgraded to Webpack 4 and I can't compile the project after running npm run dev. It throws the following error:
Error: Plugin could not be registered at 'html-webpack-plugin-after-emit'. Hoo k was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compa tibility layer for this hook, hook into 'this._pluginCompat'.
- Tapable.js:69 Compilation.plugin
[treetopmall]/[tapable]/lib/Tapable.js:69:9
- util.js:89 Compilation.deprecated [as plugin]
internal/util.js:89:15
- dev-server.js:40
C:/Users/duncan/projects/treetopmall/build/dev-server.js:40:15
- Hook.js:154 SyncHook.lazyCompileHook
[treetopmall]/[tapable]/lib/Hook.js:154:20
- Compiler.js:631 Compiler.newCompilation
[treetopmall]/[webpack]/lib/Compiler.js:631:26
- Compiler.js:667
[treetopmall]/[webpack]/lib/Compiler.js:667:29
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[treetopmall]/[tapable]/lib/Hook.js:154:20
- Compiler.js:662 Compiler.compile
[treetopmall]/[webpack]/lib/Compiler.js:662:28
- Compiler.js:328 Compiler.runAsChild
[treetopmall]/[webpack]/lib/Compiler.js:328:8
- child-compiler.js:110
[treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:110:21
- new Promise
- child-compiler.js:109 HtmlWebpackChildCompiler.compileTemplates
[treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:109:31
- cached-child-compiler.js:344 PersistentChildCompilerSingletonPlugin.compileE ntries
[treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:344:21
- cached-child-compiler.js:211
[treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:211:47
My package.json file:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-decorators": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/plugin-proposal-function-sent": "^7.8.3",
"#babel/plugin-proposal-json-strings": "^7.8.3",
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"#babel/plugin-proposal-throw-expressions": "^7.8.3",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.8.3",
"apexcharts": "^3.19.2",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"bootstrap-vue": "^2.14.0",
"install": "^0.13.0",
"moment": "^2.26.0",
"mysql": "^2.18.1",
"numeral": "^2.0.6",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-awesome": "^4.0.2",
"vue-chat-scroll": "^1.4.0",
"vue-router": "^3.2.0",
"vue-star-rating": "^1.6.1"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/plugin-transform-runtime": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"babel-plugin-istanbul": "^6.0.0",
"babel-register": "^6.26.0",
"chai": "^4.2.0",
"chalk": "^4.0.0",
"chromedriver": "^83.0.0",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^6.0.1",
"cross-env": "^7.0.2",
"cross-spawn": "^7.0.2",
"css-loader": "^3.5.3",
"cssnano": "^4.1.10",
"eventsource-polyfill": "^0.9.6",
"express": "^4.17.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^4.3.0",
"http-proxy-middleware": "^1.0.4",
"inject-loader": "^4.0.1",
"karma": "^5.0.9",
"karma-coverage": "^2.0.2",
"karma-mocha": "^2.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^4.0.2",
"mocha": "^7.1.2",
"nightwatch": "^1.3.5",
"node-sass": "^4.14.1",
"opn": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^4.0.4",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^3.0.2",
"sass-loader": "^8.0.2",
"selenium-server": "^3.141.59",
"semver": "^7.3.2",
"shelljs": "^0.8.4",
"sinon": "^9.0.2",
"sinon-chai": "^3.5.0",
"sw-precache-webpack-plugin": "^1.0.0",
"uglify-es": "^3.3.10",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
So as you can see, running npm run dev executes the dev-server.js script, so according to the error message, I think the error originates from a plugin from the script:
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
I wonder if .plugin syntax has deprecated and some other syntax should be used instead? I tried compiler.hooks.done.tap({' and still not does work, it returns a 'webpack is not defined error instead.
Any help would be greatly appreciated. Thanks!

Global is not defined in Nuxt 2.5 and higher

My app used Nuxt 2.1, than I graduately updated it and till Nuxt 2.4 everything is ok, but from 2.5 and up production builds brake with global is not defined error.
Place of error is in .nuxt/client.js#26:
if (!global.fetch) { global.fetch = fetch }
I can't figure out how to fix this (need to define global as far as I understand) and no answers out there. As well as such bug reports, what is strange.
Dependencies list:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.7",
"#fortawesome/free-regular-svg-icons": "^5.4.2",
"#fortawesome/free-solid-svg-icons": "^5.4.2",
"#fortawesome/vue-fontawesome": "^0.1.1",
"#johmun/vue-tags-input": "^2.0.1",
"#nuxtjs/auth": "^4.5.3",
"#nuxtjs/axios": "^5.3.6",
"#nuxtjs/dotenv": "^1.3.0",
"#nuxtjs/google-analytics": "^2.2.0",
"#nuxtjs/moment": "^1.0.0",
"#saeris/vue-spinners": "^1.0.8",
"apexcharts": "^2.0.9",
"axios": "^0.18.0",
"canvas": "^2.0.1",
"deep-map": "^2.0.0",
"deepmerge": "^3.3.0",
"element-ui": "^2.4.7",
"glob-all": "^3.1.0",
"html-element-attributes": "^2.0.0",
"json-loader": "^0.5.7",
"laravel-echo": "^1.5.3",
"lockr": "^0.8.5",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"nib": "^1.1.2",
"nuxt": "^2.8.1",
"nuxt-babel": "^1.0.1",
"nuxt-i18n": "^5.12.7",
"purgecss-webpack-plugin": "^1.5.0",
"pusher-js": "^4.4.0",
"raw-loader": "^3.0.0",
"rupture": "^0.7.1",
"s-grid": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"underscore": "^1.9.1",
"v-viewer": "^1.3.1",
"vue-apexcharts": "^1.2.1",
"vue-awesome": "^3.2.0",
"vue-cookie-law": "^1.10.0",
"vue-filter": "^0.2.5",
"vue-js-modal": "^1.3.28",
"vue-lodash": "^2.0.0",
"vue-nl2br": "^0.1.1",
"vue-scrollto": "^2.15.0",
"vue-the-mask": "^0.11.1",
"vue-wysiwyg": "^1.7.2",
"vue2-editor": "^2.6.6",
"vue2-google-maps": "^0.10.6",
"vue2-transitions": "^0.2.3",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "^1.5.4"
},
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/node": "^7.5.0",
"#babel/plugin-proposal-export-default-from": "^7.5.2",
"#babel/plugin-proposal-export-namespace-from": "^7.5.2",
"#babel/plugin-proposal-object-rest-spread": "^7.5.4",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.5.0",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.5.4",
"#babel/preset-flow": "^7.0.0",
"babel-eslint": "^8.2.1",
"cross-env": "^5.2.0",
"deep-map-async": "^1.5.1",
"electron": "2.0.0-beta.7",
"electron-builder": "^20.8.1",
"electron-devtools-installer": "^2.2.3",
"es6-weak-map": "^2.0.3",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"google-translate-api": "^2.3.0",
"tosource": "^1.0.0",
"translatte": "^2.4.3",
"webpack-node-externals": "^1.7.2",
"yargs": "^13.2.4"
}
.babelrc:
{
"presets": ["#babel/env"],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-export-namespace-from"
]
}

After many hours of investigation I've figured out that problem was in this config:
extend(config, {isDev, isClient, isServer}) {
if (isClient) {
config.target = process.env.BUILD_TARGET || 'electron-renderer';
}
})
Have ho idea why it all worked prior 2.5 and broke after, but here is the case

Webpack compiling throwing error with mobx

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.