Create-react-app: Trying to develop with react-hooks ([email protected]) - Uncaught Error: Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):

[therayess]

Is this a bug report?

Yes

Did you try recovering your dependencies?

1.10.1

Which terms did you search for in User Guide?

Uncaught Error: Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):

Environment

npx: installed 63 in 11.394s

Environment Info:
(node:1363) UnhandledPromiseRejectionWarning: TypeError: Cannot read property '1' of null
at a.run.then.e (/root/.npm/_npx/1363/lib/node_modules/create-react-app/node_modules/envinfo/dist/envinfo.js:1:97255)
(node:1363) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:1363) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to Reproduce

(Write your steps here:)

1. run yarn
2. browse app
3. check console

Expected Behavior

App was running perfectly before with the same package.json setup and the same exact code, nothing has been changed, only ran a fresh modules installation and then everything broke, re-installing the node_modules was the only change that has been made, before that app was working, after that, app is not working.

Actual Behavior

I get the following error:

Uncaught Error: Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
Uncaught Error: Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/src/node_modules/debug/src/debug.js'
    at Object../node_modules/debug/src/debug.js (browser.js:157)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.<anonymous> (browser.js:6)
    at Object../node_modules/debug/src/browser.js (browser.js:157)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object../node_modules/sockjs-client/lib/utils/url.js (url.js:8)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)

this is my package.json file:

{
  "name": "wms-pickit",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/icons": "^3.0.1",
    "classnames": "^2.2.6",
    "husky": "^1.2.0",
    "lint-staged": "^8.1.0",
    "lodash": "^4.17.11",
    "node-sass": "^4.10.0",
    "prettier": "^1.15.2",
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "typeface-roboto": "0.0.54",
    "uuid": "^3.3.2",
    "serve": "^10.1.1"
  },
  "scripts": {
    "start": "PORT=8080 react-scripts start",
    "build": "react-scripts build",
    "serve": "serve -s -p 8080 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@material-ui/core": "^3.5.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
     "prettier --single-quote --write",
     "git add"
   ]
 }
}

I created a test app to help with debugging, here's the repo:
https://github.com/therayess/CRA_DEBUG

[bugzpodder]

are you using yarn lockfile or package-lock.json?

[therayess]

Yarn lockfile

On Thu, Dec 20, 2018, 8:28 PM Jack Zhao <[email protected] wrote:

are you using yarn lockfile or package-lock.json?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/6072#issuecomment-449055794,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMGDYk6QgWYLnOLfVuooglRegUabU-C2ks5u67rEgaJpZM4ZcO1_
.

[therayess]

any idea guys? any input would be appreciated please.

[mrmckeb]

Hi @therayess, sorry this is happening for you. Are you able to share a test repo? We can then take a look.

To be clear, you definitely rm -rf node_modules and yarn?

[therayess]

@mrmckeb yessir, removed node_modules, re-initiated the whole repo even, thing is, i haven't updated any packages since the last time the app was working, only change is a fresh installation of node_modules (which i found about while deploying the app on a test server).

[mrmckeb]

OK, would you be able to create a test repo for us @therayess? Obviously omitting anything confidential.

[therayess]

@mrmckeb i'm on it, meanwhile i just wanted to post more of the errors that i keep getting while trying to fix this, basically i remove node_modules, try to reinstall packages, try with yarn or with npm, etc..it just seems like the dependencies are not getting installed properly, here's one more set of errors that i get while trying to compile:

./node_modules/jss/lib/plugins/rules.js
Error: ENOENT: no such file or directory, open '/src/node_modules/jss/lib/plugins/rules.js'
Failed to compile.

./node_modules/history/es/DOMUtils.js
Error: ENOENT: no such file or directory, open '/src/node_modules/history/es/DOMUtils.js'
Failed to compile.

./node_modules/@material-ui/core/Input/Input.js
Error: ENOENT: no such file or directory, open '/src/node_modules/@material-ui/core/Input/Input.js'
Failed to compile.

./node_modules/@material-ui/core/Input/Input.js
Error: ENOENT: no such file or directory, open '/src/node_modules/@material-ui/core/Input/Input.js'
Compiling...
Failed to compile.

./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray.js
Module build failed: Error: ENOENT: no such file or directory, open '/src/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray.js'

[therayess]

@mrmckeb I created a test repo here:
https://github.com/therayess/CRA_DEBUG

I'm simulating how my app breaks by using any react function, in the example you will see i'm using a useState just to demonstrate, and that breaks the app. I hope that helps.

[bugzpodder]

react 16.7 was released, you need to pin your package.json to 16.7-beta. That's why I asked if you've used a yarn-lock or package-lock.json. In your test repo, your package-lock.json had an invalid version of react that doesn't use hooks.

"react-dom": {
      "version": "16.7.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
        "scheduler": "^0.12.0"
      }
    },

[therayess]

@bugzpodder I installed latest react, 16.7, which doesn't have hooks according to this:
https://reactjs.org/blog/2018/12/19/react-v-16-7.html
And i updated my App.js code to be written in classic react, still getting the same errors. Always errors related to babel react presets.
I also tried with the exact version for react hooks, which is 16.7.0-alpha, that didn't work too.
I'd like to note that the posted package.json is what i've been using to develop this app for the past 1 month, and it was working completely fine until around 3-4 days ago. same setup same everything.

[therayess]

Also wanted to note that i'm running this app inside a docker container, i included the Dockerfile that i'm using in the sample app.

[gusthliv]

I'm having the same problem, I updated react and react-dom versions to ^16.7.0-alpha.2, then removed node_modules and yarn.lock files and installed again with yarn.

But hooks still doesn't work, if I log the react runtime version with console.log(React.version);, I still get 16.7.0. How to update the react version? I'd prefer to not eject from create-react-app, or is it necessary?

[Timer]

@gusthliv you need to add 16.7.0-alpha.2, not ^16.7.0-alpha.2. The behavior you are experiencing has nothing to do with Create React App.

[therayess]

I tried that.. I got the correct version as I can see in the lock file..
Still got the same errors.

On Mon, Dec 24, 2018, 4:21 AM Joe Haddad <[email protected] wrote:

@gusthliv https://github.com/gusthliv you need to add 16.7.0-alpha.2,
not ^16.7.0-alpha.2.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/6072#issuecomment-449671807,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMGDYkiwnMEbpWUXiUfJBSRW6j8zDb-iks5u8B4jgaJpZM4ZcO1_
.

[gusthliv]

@Timer it works. Thanks!

[therayess]

@Timer my bad, it did work, had to re-install container and clear cache then all worked. Thanks!
gonna close this.