I want to check the staged files with linter on commit. And that's how I configured package.json
"scripts": {
...
"lint": "eslint .",
"lint:ts": "eslint . --ext .ts --ext .tsx",
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{ts,tsx}": [
"yarn run lint:ts"
]
},
But it seems like husky doesn't run the pre-commit hook. Nothing happens on commit. But if I run the yarn run lint:ts manually then it works as expected.
I searched the Internet for solutions. And the one with installing husky v4 first and then updating it didn't work. How do I do?
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
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
I wanted to setup webpack and babel with npm, but I got this error
npm ERR! Unexpected end of JSON input while parsing near '...pdragon":"^0.7.0","to' npm ERR! A complete log of this run can be found in:
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\luchan.vladyslav\AppData\Roaming\npm-cache\_logs\2017-12-10T10_48_56_298Z-debug.log
here is my package.json
{
"name": "ddd",
"version": "1.0.0",
"description": "components",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1"
}
}
At the begining I have tried to install webpack webpack-dev-server babel-core babel-loader and babel-preset-env in one line. But I got this error, after a while I figured out that problem is related to webpack and wepback-dev-server
screenshot
Looks like the corrupt local node_modules is to be blamed. Can you remove the local node_modules folder and then freshly install by `npm install' ? That should fix the issue.
To solve this problem you should clean your cache with
npm cache clean --force
That will solve the problem
I'm having a lot of trouble deploying to heroku/production with babel(using babel-cli) + es6 javascript. My app is a simple express and node server written in es6 style javascript.
I'm using "babel-cli" (installed via package.json) and a postinstall script inside package.json to precompile my es6 javascript into a "build" folder before starting the server.
The weird thing is that everything compiles smoothly with babel-cli for development, but not for production.
When deploying to production/heroku, the build process gets stuck on the babel command in Makefile and throws an error.
Package.json
{
"name": "messenger-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm -rf build && mkdir build",
"build-server": "babel src --out-dir build",
"build": "npm run clean && npm run build-server",
"postinstall": "make build",
"start": "node ./build/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.9.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"request": "^2.72.0"
},
"engines": {
"node": "4.4.5"
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-preset-stage-2": "^6.11.0"
}
}
Makefile:
build: clean server_build
clean:
rm -rf build
mkdir -p build
server_build:
babel src --out-dir build
rsync -av --include \*/ --include \*.json --exclude \* ./src/ ./build/
rsync -av --include \*/ --include \*.ejs --exclude \* ./src/ ./build/
.PHONY: build clean
The error:
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.
Any help would be much appreciated! Setting up server stuff is my worst nemesis! :(
I usually run babel through weback, so I could be wrong here (I don't typically use makefiles), BUT, I would assume you would need to install babel-core in order for it to run correctly? It seems like the error is related to the fact that you just have "babel" installed, which will not work with v6. You need to install its components, which at minimum would require "babel-core."