I need help, there was an error while building the application.
Cannot find package 'babel-preset-react' imported from Path\babel-virtual-resolve-base.js
Installed in devDependencies:
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.7",
"#babel/node": "^7.20.7",
"#babel/plugin-transform-async-to-generator": "^7.20.7",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.2.2",
"babel-preset-react-app": "^10.0.1",
"babelify": "^10.0.0",
In dependencies:
"grunt-babel": "^8.0.0",
"#babel/polyfill": "^7.12.1",
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
Cannot find package 'babel-preset-react'.
babel-preset-react is babel 6 version, I don't need it. I am using babel version 7.
If I install babel-preset-react a new error occurs.
Plugin/Preset files are not allowed to export objects, only functions. In Path\node_modules\babel-preset-react\lib\index.js
Before that, I migrated from babel 6 to babel 7.
Deleted node_modules and package-lock.json and npm install again
Related
When I run tests using Jest I get the error SyntaxError: Unexpected identifier and it points to the line import React from 'react'
I have a pretty basic project setup: I am not using create-react-app or a bundler like Webpack or Rollup.
My npm scripts and dependencies are:
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"scripts": {
"build": "babel --watch src --out-dir ./dist --presets react-app/prod",
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.7.7",
"#babel/preset-env": "^7.7.7",
"#babel/preset-react": "^7.7.4",
"#testing-library/react": "^9.4.0",
"babel-cli": "^6.26.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-preset-react-app": "^3.1.2",
"jest": "^24.9.0",
"react-test-renderer": "^16.12.0"
}```
I also have a `.babelrc`: ```{
"presets": [
"#babel/preset-react"
]
}```
Link to repo: https://github.com/o-t-w/test-lib
I have a project in react with webpack and add an image, I added the file-loader and the image and gave the following error:
ERROR in ./src/assets/images/image.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/pages/Home/index.js 26:0-52
# ./src/routes.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
my webpack looks like this:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
If I remove the file-loader the error continues, then the problem is that it does not recognize the file-loader, but I can not resolve.
I load the image like this, but I've tried it in other ways and the error is always the same:
import imgHome from "../../assets/images/image.png"
Installed Packages:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^2.0.0",
"file-loader": "^3.0.1",
"flow-bin": "^0.86.0",
"flow-typed": "^2.5.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
Look at your package.json and see if there is file-loader.
If not, you may need to install it by:
npm install file-loader --save-dev
Try this:
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
Het all, I'm converting to create-react-app 2.1.1, and it requires Webpack 7.0.0 as a dependency. But when I convert my app from Babel 6 to Babel 7, I'm getting this error:
The error is coming from inside #babel/runtime in my node_modules, which I'd expect to be ignored.
This is the original code using babel-register require() I'm using:
enter image description here
This is the updated code using #babel/register require() I'm using:
This is my package.json:
```
{
"name": "klaw-boilerplate-mernt",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.1.6",
"#babel/helper-module-transforms": "^7.1.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
...
},
"devDependencies": {
...
}
}
```
I had the same issue and was able to solve it with this.
// server/index.js
require("ignore-styles");
require("url-loader");
require("file-loader");
require("#babel/polyfill");
require("#babel/register");
// your custom stuff
In my case I moved the presets line to a .babelrc file but it shouldn't matter.
// .babelrc
{
"presets": ["#babel/env", "#babel/preset-react"]
}
Uninstall syntax-dynamic-import, dynamic-import-node, react-loadable/babel and react-app.
From what I gather, because these are older versions they are not compatible leading to the error. node_modules is ignored by default.
Here are the important entries in package.json.
{
"dependencies": {
"#babel/polyfill": "^7.2.5",
"#babel/preset-env": "^7.2.3",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"file-loader": "^3.0.1",
"url-loader": "^1.1.2",
}
}
Some of these names can also be abbreviated when using them but I like to keep the full names
Seems like i am missing something here, it should work without errors but eslint keeps throwing the following:
Unable to resolve path to module 'react'. (import/no-unresolved)
Missing file extension for "react" (import/extensions)
when trying to import React from 'react'
here is some debug info:
package.json
{
"dependencies": {},
"devDependencies": {
"react": "16.3.2",
"react-dom": "16.3.2",
"#storybook/addon-actions": "^3.4.2",
"#storybook/addon-links": "^3.4.2",
"#storybook/addons": "^3.4.2",
"#storybook/react": "^3.4.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0"
}
}
.eslintrc
{
"parser": "babel-eslint",
"extends": ["airbnb", "prettier"],
"env": {
"browser": true,
"node": true,
"es6": true
}
}
.babelrc
{
"presets": ["env", "react"]
}
editor: atom v1.26.1
Thanks.
If you're using React Native it may help to add .native.js as an allowed extension in your .eslintrc file.
Also, if you're using Typescript then .ts and .tsx will help too.
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx", ".native.js"]
}
}
}
I had some problem i removed nodo_modules directory from project and run yarn install / npm install
I think it complains because react should be in dependencies:
{
"dependencies": {
"react": "16.3.2",
"react-dom": "16.3.2",
},
"devDependencies": {
"#storybook/addon-actions": "^3.4.2",
"#storybook/addon-links": "^3.4.2",
"#storybook/addons": "^3.4.2",
"#storybook/react": "^3.4.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0"
}
}
I installed react and react-dom using npm i -E react react-dom trying to install the exact version which didn't install it correctly.
npm i react react-dom -D solved the problem.
This also happened to me. In my case, it was because I was running npm version 6, but a team member had installed a new library via npm version 7. Version 7 uses a new version for the lock file format.
Our solution was to make sure everyone was running the same npm version so that our package-lock.json files would be consistent.
Just comment out the import and run. Then again remove the comments. It worked for me.
try to add in eslintrc:
"rules": {
"import/no-unresolved": [2, { "devDependencies": true }],
...
}
I have experience with the same problem.
In my case, this error appear because I pull new update from the remote repository and it's bring new dependencies.
To solve this, I just install that dependencies with npm install
I'm using a very up-to-date (December 2017) stack of dependencies. As I try-out isomorphic react tests with Jest, the test suit keeps failing with the following error:
* Test suite failed to run
[BABEL] /__tests__/router.test.js: Plugin/Preset files are not allowed to
export objects, only functions.
Here are my dependencies:
"dependencies": {
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"cors": "^2.8.4",
"express": "^4.16.2",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.35",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.0.2",
"babel-jest": "^22.0.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"enzyme-to-json": "^3.2.2",
"eslint": "^4.11.0",
"eslint-plugin-react": "^7.5.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.1",
"nodemon": "^1.11.0",
"parallelshell": "^3.0.2",
"react-test-renderer": "^16.2.0",
"regenerator-runtime": "^0.11.1",
"supertest": "^3.0.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"peerDependencies": {
"babel-core": "^7.0.0-0"
}
.babelrc :
{
"presets": [
"env",
"react",
]
}
Does anyone have any insights as to why Jest won't run?
{
"presets": [
"env",
"react"
],
"test": [
"jest"
]
}
Add the last block of code for "test" to you babel.rc
Here is my .babelrc code for reference
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"test": [
"jest"
]
}
Here is my output from the command-line
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 9.264s
Ran all test suites.
Done in 12.99s.
babel bridge is meant to cover any issues between 6 and 7
That is 100% not what the bridge package does. All it does is allow tools that use babel-core to pass through to #babel/core. The entire package is this single line of code.
If you are using #babel/core, you need to use plugins that work on Babel 7. That means babel-preset-react should be changed to #babel/preset-react and same for #babel/preset-env and your .babelrc should be:
{
"presets": [
"#babel/env",
"#babel/react",
]
}
Similarly, babel-polyfill should be #babel/polyfill.
None of this is well documented yet because Babel 7 is still an unstable beta.
I met the same challenge while configuring jest to work with babel-6.
See complete explanation here
But in summary, this combination of --devDependencies worked for me, and i set-up babel-jest to transform my **.js files:
// package.json
"devDependencies": {
"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"jest": "21.2.1",
"webpack": "3.6.0"
},
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
// .babelrc
{
"presets": [
"env",
"stage-0",
"react"
]
}