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.

react-native "Export statement may only appear at top level" was working fine until cleaning project how do I find out the issue?

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...

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!

Nodejs export aggregates throws syntax error [duplicate]

When running my gulp task, I get the following error:
SyntaxError in plugin "gulp-babel"
Message:
/Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
^^^^^^^^^^^^^^
I'm not sure why this is as I am running the required plugins to allow ES6 imports/exports, or so I thought...
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"add-module-exports",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from"
]
}
package.json - I've included the full list, most of it will probably be irrelevant but just in case there are any known package conflicts.
"dependencies": {
"#babel/polyfill": "^7.8.3",
"classnames": "^2.2.5",
"concurrent-transform": "^1.0.0",
"deep-freeze": "0.0.1",
"eslint": "^3.17.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.10.0",
"git-rev": "^0.2.1",
"gulp-awspublish": "^4.0.0",
"gulp-sftp": "^0.1.5",
"moment": "^2.18.1",
"moment-timezone": "^0.5.26",
"path": "^0.12.7",
"qs": "^6.4.0",
"react": "^16.8.4",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^16.8.4",
"react-fastclick": "^3.0.2",
"react-redux": "^4.4.5",
"react-router": "^3.2.5",
"react-router-redux": "^4.0.8",
"react-string-replace": "^0.4.0",
"react-transition": "^1.0.3",
"react-transition-group": "^2.7.0",
"redux": "^3.5.2",
"redux-thunk": "^2.3.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.8.3",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-polyfill": "^6.26.0",
"babelify": "^9.0.0",
"chai": "^3.5.0",
"enzyme": "^2.7.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-clean": "^0.3.2",
"gulp-color": "0.0.1",
"gulp-connect": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-mocha": "^4.3.0",
"gulp-param": "^0.6.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^2.4.1",
"gulp-ssh": "^0.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.1.0",
"gulp-watch": "^4.3.11",
"gulp-webserver": "^0.9.1",
"jest": "^25.1.0",
"jsdom": "^9.12.0",
"lint-staged": "^3.4.0",
"mocha": "^3.2.0",
"mocha-jsdom": "^1.1.0",
"mocha-junit-reporter": "^1.13.0",
"mock-require": "^2.0.1",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.6.0",
"react-addons-test-utils": "^15.6.0",
"react-tools": "^0.13.3",
"redux-mock-store": "^1.2.3",
"run-sequence": "^1.2.2"
}
Any help appreciated - I'm really at a loss for this one.
(Using node v9.11.2)

From this thread
The problem is that we added export * as ns from "foo" support by
default to #babel/parser (in #10521) but not to #babel/preset-env.
As a workaround, you can enable
#babel/plugin-proposal-export-namespace-from in your config.
So add #babel/plugin-proposal-export-namespace-from to your .babelrc and dev dependencies and you should be OK!
It looks like eventually this will be built into the preset-env so you won't have to use a plugin.

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.