create-react-app: Building with babel-eslint fails on windows with class-properties

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.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 25 (9 by maintainers)

Most upvoted 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