I am trying to create a react app without using create-react-app using the following website:
https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/
however, I keep getting this error that says
WARNING in ./src/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load config "react" to extend from.
I have tried installing all the dependencies and have spent hours googling an answer, but I can't seem to figure out the problem.
This is my package.json:
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
"format": "prettier --write \"src/**/*.js\"",
"eslint-fix": "eslint --fix \"src/**/*.js\"",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.10.4",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"eslint": "^7.9.0",
"eslint-config-react": "^1.1.7",
"eslint-loader": "^4.0.2",
"eslint-plugin-react": "^7.20.6",
"html-webpack-plugin": "^4.4.1",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"prettier": "2.1.1",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
this is my webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
// path: __dirname + '/dist',
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './build'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html'),
})],
};
this is my .eslintrc:
{
"parser": "babel-eslint",
"extends": "react",
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
and this is my .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Does anyone have any suggestions? I am wracking my brain trying to figure this out and I am having a lot of trouble. It loads the webpage, however, react isn't utilized at all.
Thank you in advance!! I really appreciate all your help.
I had a similar problem with create-react-app and I did
yarn add eslint-config-react-app -D
I think you should try:
yarn add eslint-config-react -D
When I removed
"extends": [
"react-app"
]
},
from package.json it worked.
This is because the eslint-config-react-app package is outdated.
I had this error after a big upgrade of dependencies (react-scripts, react ... ) and the solution was to remove yarn.lock files
I fix it installing eslint-config-react-app package manually:
yarn add eslint-config-react-app -D
# or
npm install -D eslint-config-react-app
If you have eslint in your dependencies, remove that.
The eslint from react-scripts will be used
"eslint": "^7.32.0"
I was going through the same tutorial and came across the same problem. I figured out a few things:
The package eslint-config-react is outdated. It hasn't been updated in 4 years, so I uninstalled that and instead installed (as a devDependency) eslint-config-airbnb. There are other eslint config packages, but Airbnb's style guide I heard is very popular. Then in my eslintrc file I replaced "extends": "react" to "extends": "airbnb" :
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
The problem is the eslint-config-react package.
Leaving this here for future reference:
In my case this was happening because I was using Lerna and it was hoisting up some of the necessary dependencies. Adding nohoist option to the lerna.json file resolved the issue for me:
"nohoist": [
"*react*",
"*react*/**",
"*react-native*",
"*react-native*/**"
],
I was having the same issue. I did these steps and it worked.
Install it as a dependency
npm i eslint-config-react-app
then in your root folder, create a file name .eslintrc.json and add this code in that file
"extends": "react-app"
If you use yarn:
1- Delete: node_modules and yarn.lock
2- Run: yarn install
Note: For npm should be the same approach.
If you are using Yarn 2(berry)
Add nodeLinker: node-modules in your .yarnrc.yml file
As specified in https://yarnpkg.com/getting-started/install
If you cloned the repo from GitHub or any other version control system, try adding this file .eslintrc.json to your root folder. Don't forget the . at the beginning.
The first answer works like a charm as well. Just thought I would add mine as well.
Had this issue as well.
If anyone finds themselves in this predicament and you are forking a project, delete the package-lock resolved the issue for me.
For fixing this issue you need to run this command in your project folder.
First step:
yarn set version berry
After run that, one file and folder will be generated in your local folder (Project folder) :
.yarnrc.yml(file)
.yarn(folder)
Second step: Add nodeLinker: node-modules in your .yarnrc.yml file
Third step: run this command yarn install
Finally run yarn start
Tip : This approach is useful when you want to migrate from yarn 1.x to 2.x or 3x or higher.
even I had this issue, listing down steps to solve this issue.
First remove node modules and install node modules again.
Then I had a issue while I run npm run build, I was getting react-scripts not found. So I installed react-scripts using npm
Then I had this issue failed to load config react-app to extend form. I fixed it using
npm add eslint-config-react-app
I've faced the same error when I was trying to deploy my create-react-app template to Vercel.
Deleting yarn.lock file
(On Vercel Dashboard) Overriding build command from auto to "npm run build"
(On Vercel Dashboard) Overriding install command from auto to "npm install"
helped me to deploy successfully.
I have got the same issue.
I deleted package-lock.json and node_modules
ran 'npm install'
It worked fine.
After getting the message "Failed to load config “react-app” to extend from...
I removed the following lines from package.json:
"eslintConfig": {
"extends": [
"react-app"
]
},
And it worked
Related
I have a project that already was deployed on Vercel. Since last week Im working on improve the layout with the goal of finish a MVP of this project. So, I changed my usage of auth0, using the package to nextjs #auth0/nextjs-auth0. I ran
npm install #auth0/nextjs-auth0
and I have on my package.json
{
"name": "MAmanager",
"version": "1.0.0",
"engines": {
"node": "14.x",
"npm": "6.x"
},
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",
"dayjs": "^1.9.5",
"formik": "^2.1.5",
"next": "^10.2.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"swr": "^0.5.6",
"yup": "^0.29.3"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
}
The usages on my pages are
import { UserProvider } from '#auth0/nextjs-auth0'
import { useUser } from '#auth0/nextjs-auth0'
import { withPageAuthRequired } from '#auth0/nextjs-auth0'
And when I deploy my branch on Vercel I get this error
08:57:49.989 Failed to compile.
08:57:49.990 ModuleNotFoundError: Module not found: Error: Can't resolve '#auth0/nextjs-auth0' in '/vercel/path0/pages'
08:57:49.990 > Build error occurred
08:57:49.991 Error: > Build failed because of webpack errors
08:57:49.991 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
08:57:49.991 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
08:57:50.020 error Command failed with exit code 1.
I have seen errors like that caused by casing discrepancies but I don't understanding what is happening here. I appreciate any help.
After see other examples I just edited manually the package.json.
After run npm install #auth0/nextjs-auth0 the package was automatically added "#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",.
I just edit to
"#auth0/nextjs-auth0": "^1.3.1"
and worked on deployment.
Note: The way the package was installed worked on dev in localhost but broke only on the deployment.
try making a custom build script for your deployment as a temporary workaround:
npm install && npm i #auth0/nextjs-auth0#1.3.1 && npm run build
This can be added under the deployment settings tab using a custom build command for production. Running the specific targeted package version install after npm i should override the problematic version being installed in prod
I have been following instructions from https://github.com/babel/babelify and I ran into an error along the way. I run the following line of code:
browserify script.js -o bundle.js -t [ babelify --presets [ #babel/preset-env #babel/preset-react ] --plugins [ #babel/plugin-transform-class-properties ] ]
The terminal produces the following error message:
Error: Cannot find module '#babel/plugin-transform-class-properties' from '/path/to/file' while parsing file: /path/to/file/circle-graph-2.js
My package.json file is
{
"name": "robert",
"version": "1.0.0",
"description": "This is the third step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of [occupations](http://nbremer.github.io/occupations/). The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"es2015",
"react",
"transform-class-properties"
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.6",
"babel-core": "^6.26.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babelify": "^10.0.0"
}
}
When I try the following line in the terminal then it says the package isn't found:
npm install --save-dev #babel/plugin-transform-class-properties
How do I overcome this error message?
Since you are on Babel 7 (based on your "#babel/core": "^7.1.6" entry), I think you are looking for npm install --save-dev #babel/plugin-proposal-class-properties which is the new version of the plugin for Babel 7. Notice the name change from "plugin-transform-class-properties" -> "babel-plugin-proposal-class-properties".
This was intentionally done by Babel to make people more aware of where features are in the TC39 process.
If you are actually still on Babel 6 (hard to tell since you have a Babel 7 and Babel 6 entry in your package.json, the comment by #Morty is what you need.
Had the same error for my project, but the npm install --save-dev #babel/plugin-proposal-class-properties install was not enough for me.
Searched for node-sass for babel 7.11.4 Found the fix here
I was basically in the wrong version so I added "#babel/core": "^7.13.14" to my package.json file and ran npm install again.
if you're using that latest version.
Just run npx babel-upgrade and it will display changes you need to update in your babel.rc file
Currently exploring webpack different tools associated with it. Now I am using Babel for transpiling ES6 code into ES5 code. I came accross the need for a .babelrc file which holds the configurations for Babel. However, on the website of Babel I also saw that you could also place these configurations into the package.json file. Like this:
Package.json File:
{
"name": "webpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0"
},
"babel": {
"presets": [
"env"
]
}
}
Now when I run npm run dev Babel also works and the code gets transpiled succesfully.
How does Babel know to access the package.json file? Does it first look for an .babelrc file and then if this is not present does it automatically look for its configurations in the package.json? How does Webpack interact with both Babel and the package.json file to produce this result?
For anyone who is interested it was on the official website:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
I have setup jest and jest-junit as the reporter and followed the simple instructions given by jest-junit.
This includes npm install jest --save-dev and npm install jest-junit --save-dev
My package.json looks like this (excerpt):
"devDependencies": {
"jest": "^22.4.4",
"jest-junit": "^4.0.0",
},
"scripts": {
"test": "jest --ci --testResultsProcessor='jest-junit'"
},
"jest": {
"verbose": true,
"testResultsProcessor": "jest-junit"
},
"jest-junit": {
"suiteName": "Test Suite",
"output": "./junit.xml"
}
When running npm run test on my machine (OSX), it works well. When running it as part of the CI build process or on another Windows machine, I am getting the following error:
Module 'jest-junit' in the testResultsProcessor option was not found.
Maybe you just need to install the missing module to the other machine:
npm install jest-junit
Found the solution and it was the removal of inverted commas.
"test": "jest --ci --testResultsProcessor='jest-junit'"
should become
"test": "jest --ci --testResultsProcessor=jest-junit"
I have this in my package.json:
"devDependencies": {
...
"babel-cli": "^6.8.0",
"babel-core": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
...
}
And this in my .babelrc:
{
"presets": [
"react",
"es2015",
"stage-2"
]
}
When running babel --source-maps=true --out-dir=lib src I get this:
$ ./node_modules/.bin/babel --source-maps=true --out-dir=lib src
ReferenceError: [BABEL] src/main.js: Unknown option: /dev/my-project/.babelrc.presets
I have babel-cli 6, so why doesn't it recognize .babelrc.presets?
Answering my own question because I was trying to solve this for a while and I thought it might be helpful for others:
The problem was a known npm v3 bug. Unlike npm v2, npm v3 will flatten the dependency tree, so there was a deep dependency in my project that was including babel v5 and npm was linking the binary to my ./node_modules/.bin directory, overwriting the binary coming from my devDependency ("babel-cli": "^6.8.0").
The fix is to rebuild this package once npm install has finished. You should add this to your package.json:
"scripts": {
...
"postinstall": "npm rebuild babel-cli",
...
}