react-app-rewired start returned code 1

[anton-matsyshyn]

When I'm trying to start my application I'm getting this error:

> react-app-rewired start

Cannot read property 'use' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! intranet@0.1.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the intranet@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

There are the logs:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.6
3 info using node@v12.18.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle intranet@0.1.0~prestart: intranet@0.1.0
6 info lifecycle intranet@0.1.0~start: intranet@0.1.0
7 verbose lifecycle intranet@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle intranet@0.1.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\Binary\bs-intranet\frontend\node_modules\.bin;D:\oracle\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python34\;C:\Python34\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\nodejs\;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Python37\Scripts;C:\ProgramData\chocolatey\bin;C:\Gradle\gradle-6.0.1\bin;C:\Windows\System32;C:\Users\Anton\AppData\Local\Microsoft\WindowsApps;C:\Users\Anton\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Anton\.dotnet\tools;C:\Users\Anton\AppData\Roaming\npm;C:\Users\Anton\.dotnet\tools;C:\Python37\Scripts;C:\Program Files (x86)\Rico Suter\NSwagStudio\;C:\Gradle\gradle-6.0.1\bin;C:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\bin;;C:\Windows\System32;
9 verbose lifecycle intranet@0.1.0~start: CWD: D:\Binary\bs-intranet\frontend
10 silly lifecycle intranet@0.1.0~start: Args: [ '/d /s /c', 'react-app-rewired start' ]
11 silly lifecycle intranet@0.1.0~start: Returned: code: 1  signal: null
12 info lifecycle intranet@0.1.0~start: Failed to exec start script
13 verbose stack Error: intranet@0.1.0 start: `react-app-rewired start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid intranet@0.1.0
15 verbose cwd D:\Binary\bs-intranet\frontend
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.18.4
19 verbose npm  v6.14.6
20 error code ELIFECYCLE
21 error errno 1
22 error intranet@0.1.0 start: `react-app-rewired start`
22 error Exit status 1
23 error Failed at the intranet@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

This command began to fail after I'd updated react-sripts to 4.0.1 and set up next compilerOptions in tsconfig.json:

...
"jsx": "react",
"noFallthroughCasesInSwitch": true
...

I'll be very glad if you give me any advices how to fix this problem, because I don't understand what exactly I did wrong

[anton-matsyshyn]

I figured out, that this problem happen only when I start my app with react-app-rewired start. When I use react-scripts start everything works good

[dawnmist]

Usually these problems occur because of the additional build steps that you are injecting using react-app-rewired (e.g. by adding features such as webworkers, using a mix of different versions of babel and jest, additional changes made to the webpack configuration causing issues with plugins, etc).

Without more information on how exactly you used react-app-rewired to make changes to your build process, we can't help identify where the problem lies.

Most of the time (95+%) the problem is in code that belongs to a different project/library/webpack plugin/babel plugin/etc, rather than in react-app-rewired itself. The only way react-app-rewired was involved was that it was permitting you to add that other library to your build, while react-scripts itself didn't give you the freedom to include that library and therefore didn't have the build problem due to the inclusion of that library occur.

[anton-matsyshyn]

@dawnmist thank you for your answer. I rolled back to react-scripts 3.3.0 and my project starts as well. But now I can't override eslint settings. Maybe I'm doing something wrong? Here is my .eslintrc:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "airbnb",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "rules": {
     ...
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interaction": "off",
     ...
  },
  "ignorePatterns": [
    "setupProxy.js",
    "config-overrides.js",
    "node_modules/"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

config-overrides.js:

const { override, useEslintRc } = require('customize-cra');
const path = require('path');

module.exports = override(
  useEslintRc(path.resolve(__dirname, '.eslintrc'))
);

As you can see, I turned off jsx-a11y/click-events-have-key-events rule, but I still getting it in the console:

Line 24:7:  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events 

[dawnmist]

Are you starting it with react-app-rewired, or with react-scripts still? Config-overrides.js will only be used with react-app-rewired (it's how react-app-rewired modifies react-scripts).

[anton-matsyshyn]

I'm starting my project with react-app-rewired now

[dawnmist]

Can you create an example repository that has the same issue, or give me access to your repo, so I can investigate further? At this point, I need to be able to see what is happening and step through the actual process in order to be able to help any further.