Building with babel-eslint fails on windows with class-properties
See original GitHub issueIs this a bug report?
Yes
Did you try recovering your dependencies?
Yes
Which terms did you search for in User Guide?
Yes
Environment
Note npx create-react-app --info
is not working on Windows 10
System: Windows 10 NPM: 6.0.0 Node: 10.10.0 React-scripts: 1.1.5
Steps to Reproduce
npx create-react-app my-app-name
npm install -D babel-eslint
- Modify
App.js
to include state as a class-property
class App extends Component {
state = {
message: "Hello React App"
};
render() {
const { message } = this.state;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">{message}</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
- Run
npm run build
Expected Behavior
I would expect the build to complete as expected.
Actual Behavior
The build fails with the error no-undef
for the state that was defined in the component
PS C:\Node\windows-build-failure> npm run build
> windows-build-failure@0.1.0 build C:\Node\windows-build-failure
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Line 6: 'state' is not defined no-undef
Search for the keywords to learn more about each error.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! windows-build-failure@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the windows-build-failure@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jbaumgardt\AppData\Roaming\npm-cache\_logs\2018-10-01T19_01_21_162Z-debug.log
Reproducible Demo
As shown above, I can clone the repo and share if you wish, I only added a state class-property and installed babel-eslint.
In my real-world example I have a .eslintrc
file for additional lint rules for VSCode to enforce more lint rules in development and pre-commit.
If I remove babel-eslint dependency the build will work.
Issue Analytics
- State:
- Created 5 years ago
- Comments:25 (9 by maintainers)
Top Results From Across the Web
Error: Missing class properties transform - Stack Overflow
The fix in my case was defining 'transform-class-properties' plugin in the options attribute of my webpack.config.js, i'm using babel V6
Read more >parsing error: this experimental syntax requires enabling one ...
I added a modal window library that uses typescript. I changed the Language Features for TypeScript and ... @babel/eslint-parser throwing error on vue...
Read more >@babel/plugin-proposal-class-properties - Package Manager
This plugin transforms static class properties as well as properties declared with the property initializer syntax. babel-plugin ...
Read more >babel/eslint-parser - NPM Package Versions - Socket.dev
Start using Socket to analyze @babel/eslint-parser and its 3 dependencies to ... babel-plugin-proposal-class-properties , babel-plugin-proposal-decorators ...
Read more >babel-eslint - npm
Custom parser for ESLint. Latest version: 10.1.0, last published: 3 years ago. Start using babel-eslint in your project by running `npm i ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@gaearon Ok thanks. Hopefully someday we’ll get better IDE support for eslint configs other than “react-app”. I have editor lints and lint tasks for pre-commit and CI scripts that will continually lint my code for more than just the basic react-app errors.
But for now this works
I understand the use case. 😃 Yes, we’d like to support that later.