question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Building with babel-eslint fails on windows with class-properties

See original GitHub issue

Is 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

  1. npx create-react-app my-app-name
  2. npm install -D babel-eslint
  3. 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>
    );
  }
}
  1. 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:closed
  • Created 5 years ago
  • Comments:25 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
JeffBaumgardtcommented, Oct 1, 2018

@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

0reactions
gaearoncommented, Oct 1, 2018

I understand the use case. 😃 Yes, we’d like to support that later.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found