Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Cannot read property 'use' of undefined". after upgrade to react-script 4.0.1 #296

Closed
EvyiLdaRkmaN opened this issue May 15, 2021 · 8 comments

Comments

@EvyiLdaRkmaN
Copy link

I had to update to react-script: 4.0.1 due to an error when wanting to migrate part of my project to typeScript.
update customize-cra to 1.0.0
I did what was recommended here
among other things, but nothing works.

Error:

Cannot read property 'use' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start 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\Richard\AppData\Roaming\npm-cache\_logs\2021-05-15T04_27_16_513Z-debug.log

content of 2021-05-15T04_27_16_513Z-debug.log

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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Richard\Documents\proyectos\react\my-proyect\node_modules\.bin;C:\Program Files\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\MongoDB\Tools\100\bin;C:\src\flutter\bin;C:\Program Files\MongoDB\Server\4.4\bin;C:\Users\Richard\AppData\Local\Microsoft\WindowsApps;C:\Users\Richard\AppData\Roaming\npm;C:\Users\Richard\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\heroku\bin
9 verbose lifecycle [email protected]~start: CWD: C:\Users\Richard\Documents\proyectos\react\my-proyect
10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'react-app-rewired start' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] 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:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Richard\Documents\proyectos\react\my-proyect
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v14.16.0
19 verbose npm  v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `react-app-rewired start`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

my config-overrides.js

// Overriding CreateReactApp settings, ref: https://github.com/arackaf/customize-cra
const {
  override,
  // fixBabelImports,
  addLessLoader,
  useEslintRc,
  addDecoratorsLegacy,
  useBabelRc,
} = require('customize-cra')

// eslint config
const eslintConfig = require('./.eslintrc.js');
const useEslintConfig = configRules => config => {
  const updatedRules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
        const baseOptions = ruleUse.options
        const baseConfig = baseOptions.baseConfig || {}
        const newOptions = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules },
        }
        ruleUse.options = newOptions
        return rule

        // Rule not using eslint. Do not modify.
      } else {
        return rule
      }
    }
  )

  config.module.rules = updatedRules;
  return config;
}

module.exports = override(
  addDecoratorsLegacy(),
  useEslintRc(),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
    },
  }),
  useEslintConfig(eslintConfig),
  useBabelRc(),
)

my package.json

{
  "name": "my-proyect",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build-demo": "REACT_APP_AUTHENTICATED=true react-app-rewired build",
    "test": "react-app-rewired test",
    "lint-staged": "lint-staged",
    "prettier": "prettier --write \"src/**/*.{js,jsx,scss,less}\"",
    "eslint": "eslint --ext .js,jsx src",
    "stylelint": "stylelint \"src/**/*.{scss,less}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,scss,less}": [
      "prettier --write",
      "git add"
    ],
    "src/**/*.{js,jsx}": [
      "eslint"
    ],
    "src/**/*.{scss,less}": [
      "stylelint"
    ]
  },
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@types/jest": "^26.0.23",
    "@types/node": "^15.0.1",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "antd": "^4.6.3",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.18.1",
    "bootstrap": "^4.5.2",
    "chart.js": "^2.9.3",
    "chartist": "^0.11.4",
    "chartist-plugin-tooltips-updated": "^0.1.2",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.8.0",
    "customize-cra": "^1.0.0",
    "d3-dsv": "^1.2.0",
    "d3-format": "^1.4.4",
    "d3-time-format": "^2.2.3",
    "draft-js": "^0.11.5",
    "firebase": "^7.19.1",
    "history": "^4.10.1",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.15",
    "moment": "2.27.0",
    "nprogress": "^0.2.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.3",
    "react": "^16.13.1",
    "react-c3js": "^0.1.20",
    "react-chartist": "^0.14.3",
    "react-chartjs-2": "^2.9.0",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.14.5",
    "react-helmet": "^6.0.0",
    "react-highlight-words": "^0.16.0",
    "react-intl": "^5.15.7",
    "react-jvectormap": "^0.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^7.2.0",
    "react-resizable": "^1.10.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.1",
    "react-sortable-tree": "^2.7.1",
    "react-sortablejs": "^2.0.11",
    "react-stickynode": "^2.1.1",
    "react-stockcharts": "^0.7.8",
    "react-transition-group": "^4.3.0",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "sortablejs": "1.10.2",
    "store": "^2.0.12",
    "typescript": "^4.2.4"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "babel-plugin-import": "^1.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^5.0.0",
    "husky": "^4.2.3",
    "less": "^4.1.1",
    "less-loader": "7.3.0",
    "lint-staged": "^10.0.8",
    "node-sass": "^4.13.1",
    "prettier": "^1.19.1",
    "react-app-rewired": "^2.1.6",
    "stylelint": "^13.2.0",
    "stylelint-config-prettier": "^5.2.0",
    "stylelint-config-standard": "^18.3.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
@russiann
Copy link

any solution?

1 similar comment
@Brunoalcau
Copy link

any solution?

@EvyiLdaRkmaN
Copy link
Author

EvyiLdaRkmaN commented May 21, 2021

any solution?

@russiann, @Brunoalcau
yes, delete react-app-rewired and customize-cra, install craco and pass configuration of config-overrides.js to craco.config.js

@MrLeihe
Copy link

MrLeihe commented Aug 25, 2021

any solution?

@russiann, @Brunoalcau
yes, delete react-app-rewired and customize-cra, install craco and pass configuration of config-overrides.js to craco.config.js

oh my god

@MrLeihe
Copy link

MrLeihe commented Aug 25, 2021

any solution?

@russiann, @Brunoalcau
yes, delete react-app-rewired and customize-cra, install craco and pass configuration of config-overrides.js to craco.config.js

thinks~

@olignyf
Copy link

olignyf commented Oct 25, 2022

Craco is not really a nice solution...

@EvyiLdaRkmaN
Copy link
Author

EvyiLdaRkmaN commented Nov 7, 2022

Craco is not really a nice solution...

@olignyf
I would like to know why? or what could be a good solution?

@Narahc-321
Copy link

Narahc-321 commented Mar 10, 2024

any solution?

@russiann, @Brunoalcau yes, delete react-app-rewired and customize-cra, install craco and pass configuration of config-overrides.js to craco.config.js

@EvyiLdaRkmaN

I have the same config-overrides.js in a project which I am trying to upgrade react-scripts. Can you share please the your craco.config.js for reference?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants