In my project I config babel:
{
"presets": ["react", "es2015","stage-1", "transform-optional-chaining"],
"plugins": ["transform-runtime"]
}
And this is my devDependencies in package.json:
"devDependencies": {
"babel-cli": "^7.0.0-alpha.19",
"babel-loader": "^7.1.5",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"react-hot-loader": "^4.3.4",
"style-loader": "^0.22.1",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
When I run the project I get this error:
Cannot find module 'babel-preset-transform-optional-chaining'
Can anyone explain how to fix this error?
transform-optional-chaining is a plugin (not a preset). Try changing your babel config to:
{
"presets": ["react", "es2015","stage-1"],
"plugins": ["transform-runtime", "transform-optional-chaining"]
}
It seems the bigger issue is you have a mix of versions of babel, all of which are outdated. "transform-optional-chaining" is already included in "stage-1" presets for babel 7 but was not back-ported to babel 6.
However, to make matters more confusing: babel has done away with stage-presets (and es201x presets were deprecated in Babel 6). So in the latest version of babel, you not only do need to list out "transform-optional-chaining", but also every other plugin you're using.
I think the only real option here (if you want to use the latest plugins) is to upgrade to the latest version of Babel 7 - which includes a lot of changes, but you'll have to do it eventually anyway. You can find a migration guide here.
I suppose you could find an alpha version before before stage-presets were removed but that's just giving yourself more work for the future, and there will likely still be changes that have to be made anyhow.
Related
I wanted to use the new satisfies operator in my Typescript React app but it doesn't works.
here are the package.json and typescript related package details.
{
"dependencies": {
.
.
.
"babel-plugin-react-require": "^3.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
.
.
.
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/plugin-transform-runtime": "^7.16.10",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#babel/preset-typescript": "^7.18.6",
"#types/react": "^17.0.36",
"#types/react-dom": "^17.0.11",
"#typescript-eslint/eslint-plugin": "^5.45.0",
"#typescript-eslint/parser": "^5.45.0",
"babel-loader": "^8.2.3",
"esbuild-loader": "^2.20.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.6.7",
"typescript": "^4.9.3",
"webpack": "^5.75.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0",
"webpack-merge": "^5.8.0"
}
}
What could be the reason?
I've upgraded all the typescript related packages to latest but issue is not fixed
It seems the problem is caused by the babel version. (But take my answer with a grain of salt, as I am still learning myself)
The satisfies operator was introduced with Typescript 4.9 and babel supports this Typescript version since 7.20.0.
In the release notes babel specifically mentions #babel/plugin-transform-typescript and #babel/preset-typescript working with satisfies. But the newest version for the npm package #babel/preset-typescript is 7.18.6.
So it seems to me, to solve your problem you could:
Manually install a supporting version of #babel/preset-typescript
Switch to #babel/plugin-transform-typescript
Wait for the npm package to be updated
Have same problem, as workaround added plugin #babel/plugin-transform-typescript, not instead of #babel/preset-typescript, but additionally.
And now it works. I doubt this plugin makes something bad, maybe add a few ms to processing time.
Maybe someone has a better solution? If someone want to reproduce, this is a repo where it reproducible https://github.com/sshmyg/frontend. Just install, update babel packages and try to use satisfies in any tsx file.
VSCode uses it's own version of Typescript. So it might use older versions which doesn't understand satisfies keyword.
You can:
Upgrade your VSCode to the latest version
Use your workspace version of typescript by selecting Typescript: Select Typescript version... in command palette.
Also note that you have to restart TS Server. So restart your VSCode to see the effects.
This is my first time building an a-frame app with react and when running npm run-script build in my cmd prompt I come across this error.
Failed to compile.
static/js/main.9516bce8.js from UglifyJs
Unexpected token: operator (>) [./~/aframe/dist/aframe-master.js:57303,0][static/js/main.9516bce8.js:80512,32]
"aframe": "^1.0.4"
"webpack": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-2.6.1.tgz",
"integrity": "sha1-LgRX8KuxrF3zqxBsacZy8jZ4Xwc=",
"requires": {
"acorn": "^5.0.0",
"acorn-dynamic-import": "^2.0.0",
"ajv": "^4.7.0",
"ajv-keywords": "^1.1.1",
"async": "^2.1.2",
"enhanced-resolve": "^3.0.0",
"interpret": "^1.0.0",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"loader-runner": "^2.3.0",
"loader-utils": "^0.2.16",
"memory-fs": "~0.4.1",
"mkdirp": "~0.5.0",
"node-libs-browser": "^2.0.0",
"source-map": "^0.5.3",
"supports-color": "^3.1.0",
"tapable": "~0.2.5",
"uglify-js": "^2.8.27",
"watchpack": "^1.3.1",
"webpack-sources": "^0.2.3",
"yargs": "^6.0.0"
},
based on my research i'm guessing the version of uglify that i'm using doesn't support ES6
but I can't find anything online that can help me update or replace uglify-js to handle ES6
You can update it with
npm update uglify-js
which updates the package to the latest version that satisfies it version tag.
If this new version does not work, you can update it to a specific version
npm update uglify-js#3.0.5
or just update it to the latest one
npm update uglify-js#latest
Be careful because updates might break some existing code
terser-webpack-plugin works for me using webpack v4. it does support ES6+
I tried to upgrade Webpack and babel to 4, 7 respectively but couldn’t make it work. Also the official doc isn’t helping much with the upgrade
I am getting following issue
compiler error: ERROR in Cannot find module '#babel/core' # multi
main
dependencies I am using:
"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
Please let me know if more details required.
Use babel-upgrade
Tested on node#10.15.3, npm#6.4.1 and babel#7.4.0
You can use following script. (npx on node 5+ only)
npx babel-upgrade --write
The --write flag writes the updates to your package.json and .babelrc.
You will end up with following modifications to package.json:
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-private-methods": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0"
}
.babelrc
{
"plugins": [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
[
"#babel/plugin-proposal-class-properties"
],
"#babel/plugin-proposal-json-strings",
[
"#babel/plugin-proposal-private-methods"
]
]
}
Out of the above plugins you need #babel/plugin-proposal-class-properties #babel/plugin-proposal-private-methods to make private properties work correctly if you choose to implement them.
If you are using eslint, dont forget to set your parser as babel-eslint like so in your .eslintrc file:
{
"parser": "babel-eslint"
}
Babel changed the name of the module babel-core to #babel/core. Just run npm install #babel/core. This will install the latest version of Babel core.
Most of the packages in Babel has been renamed to follow the pattern #babel/PACKAGE_NAME. So if you want to upgrade, change the package names to follow the pattern and run npm install.
To upgrade to Babel 7 you can use this migration guide.
You can use babel-upgrade for smooth upgrading.
https://github.com/babel/babel-upgrade
You might need npm prune after that in order to discard outdated packages in node_modules.
EDIT:
When I tried babel-upgrade, babel and webpack config was not modified. so I had to change it manually. Here is the example.
.babelrc
"presets": ["#babel/env", "#babel/react"]
webpack config
loader: 'babel-loader',
options: { presets: ['#babel/env', '#babel/react']}
My Jest snapshot tests consistently fail on Travis with the following difference:
- "_instance": Constructor {
+ "_instance": {
Dev dependencies include:
"babel-jest": "^19.0.0",
"jest": "^19.0.2",
"react-addons-test-utils": "^15.4.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"react-test-renderer": "^15.4.2",
"enzyme": "^2.7.1",
"enzyme-to-json": "^1.5.0",
"react": "^15.2.0",
"react-dom": "^15.2.1"
Using Node 7.0.0 locally and on Travis.
Any ideas?
I would make sure that I am using the exact same version on both locally and on CI. Try pinning jest and babel-jest to a specific version:
"babel-jest": "=19.0.0",
"jest": "=19.0.2",
Maybe I would do the same with all the dependencies! Then remove node_modules/ from your machine, run the tests (update snapshots if necessary) and push.
Ps. I would also try to empty the caches on travis: https://travis-ci.com/USERNAME/REPOSITORY_NAME/caches.
In my case, I had a mismatch between the node version in the build system vs local.
I used Reactjs and webpack to start a project, and when I run the "node server" in the command prompt, there is an error like this:
And the chrome explorer opened successful but also have problems as follows:
The github is: (github.com/Yangqin0607/gallery)
Here is the package.json
{
"private": true,
"version": "0.0.1",
"description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
"main": "",
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"start": "node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false"
},
"repository": "",
"keywords": [],
"author": "Your name here",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.23.0",
"eslint": "^3.0.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^6.0.0",
"file-loader": "^0.9.0",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"karma": "^1.0.0",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"minimist": "^1.2.0",
"mocha": "^3.0.0",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"core-js": "^2.0.0",
"normalize.css": "^4.0.0",
"react": "^15.0.0",
"react-dom": "^15.0.0"
}
}
This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder.
There is no easy one way fix for that but you have a few options which are:
Try to follow the instructions here: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (but I have been unlucky so far)
Remove the hot reloader for react (in your webpack.config remove the 'react-hot' loader)
Update the react-hot-loader package to version 3 (here is how to do so: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915). But note that this package has been in alpha for a while now...
Rollback your react version to one that includes the ReactMount.js in the lib folder (15.0.1 used to have this file not sure when it stopped).
Update: React Hot Loader 3 is now in beta with a more comprehensive upgrade guide: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30
None of the above solutions worked for me.
Spent the rest of the day in a rabbit hole of github issues/comments, weighing the pros/cons/feasibility of various hacky workarounds.
The quickest, simplest, "I just want to work on the original problem I intended to work on today" fix that worked for me comes from: https://github.com/gaearon/react-hot-loader/issues/417#issuecomment-261548082
In your webpack config, add the following alias to the resolve section:
resolve: {
alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}
This is not a stable long term fix, this is a development only fix so you can continue developing without being forced to deal with upgrade issues out of the blue.
I'm still not 100% sure why I'm seeing this problem in my one app and not another, both were generated from fountain.js react-redux generator and have identical package.json.
You are using an outdated react-hot-loader package that uses the internal react api throught react\lib\ReactMount. Now react doesn't allow this hence the problem.
Try updating it to the latest version:
$ npm install --save-dev react-hot-loader#latest
Thank you for all your answers. I have solved my problems.
" This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder." said by cheesemacfly.
So here is the solution for me:
1) updating the react-hot-loader to the latest version
npm install --save-dev react-hot-loader#latest
but here is another problem linked with react-hot-loader
2) so I removed the react-hot-loader from 'cfg/dev.js'
change the code
loader: 'react-hot!babel-loader'
into
loader: 'babel-loader'
Many thanks to cheesemacfly, I was able to solve the same issue with your suggestion to remove 'react-hot' from the loader.
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /(node_modules|lib\/ckeditor)/
}
I Changed to:
{
test: /\.(js|jsx)$/,
loader: 'babel',
exclude: /(node_modules|lib\/ckeditor)/
}
Remember to change the word 'loaders' to 'loader' since you are no longer referencing a list.
This is probably just a dependency issue. It's either not getting the correct version of react or not installing it correctly.
# update npm
$ npm install -g npm
# reinstall the generator-react-webpack package (note the global tags)
$ npm install -g yo
$ npm install -g generator-react-webpack
Then attempt to generate your app.
I had the same problem and none of the solution worked. It then occurred to me that it seems that react is missing. I got the problem after I installed and uninstalled a package for postgreSQL.
So I added it. PS, I was using yarn
yarn add react
Updating react-hot-loader didn't work for me, but removing the react-hot form the loaders list, by simply commenting it, fixed the issue:
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
// 'react-hot',
'babel'
]
}
There are two issues at play:
Properly upgrading all your dependencies, and,
Use webpack v. 3.11.0, DO NOT upgrade to webpack v. 4.00,
Downgrade ReactJS to React v. 15.6.2.
Open package.json, which will have a list of things like...
"dependencies": {
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10",
"webpack": "^3.6.0"
(etc.)
Then run a command like this in your package base directory, which has the same dependencies as listed above...
sudo npm install --save react#15.6.2 react-dom#15.6.2 react-scripts#latest webpack#3.11.0 jquery#latest jquery-ui#latest
TLDR ANSWER : ^^^ This is the one command you'll actually need to run.
Notice the webpack-specific version.
After this, everything worked for me! I I checked the ReactJS version , using this answer , https://stackoverflow.com/a/36994601/2430549 , and my package.json now looks like...
"dependencies": {
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.2.0",
"react-scripts": "^1.1.4",
Source: Answer by JanTheHun, https://github.com/angular/angular-cli/issues/9793
For me it was an old version of react-dom.
I changed versions of react and react-dom to 16.X (to be exact : "react": "16.13.1", "react-dom": "16.13.1",), and then this problem went away for me.