build failure with strange error

gigamesh commented 5 years ago

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

npm version: 6.5.0

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-4930K CPU @ 3.40GHz
  Binaries:
    Yarn: 1.10.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.3.2 => 16.7.0
    react-dom: ^16.3.2 => 16.7.0
    react-scripts: ^2.1.3 => 2.1.3
  npmGlobalPackages:
    create-react-app: Not Found

^^^ Note: The system info says `create-react-app: Not Found`, but when I check the version, it says I'm on 2.1.3

Steps to Reproduce

run npm run build

Expected Behavior

Create build bundle

Actual Behavior

Fails to compile, and produces strange error (It's maybe worth noting that I searched my codebase for "px" from the error, and didn't find anything). Also, I don't have any problem running the app. Only the production build fails.

Output of log file:

matt-fevold commented 5 years ago

I would start by looking for px and not "px" Just my two cents!

ghost commented 5 years ago

Hello @gigamesh , I just built a React app on Windows 10 with:

 "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  }

Try removing node_modules and package-lock.json and then npm install or start a new create-react-app and try to build it or npm i -g create-react-app

Please post your package.json

gigamesh commented 5 years ago

Try removing node_modules and package-lock.json and then npm install or start a new create-react-app and try to build it or npm i -g create-react-app

Please post your package.json

Thanks - I tried all your suggestions but no luck.

package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.8.1",
    "@material-ui/icons": "^3.0.1",
    "animated": "^0.2.2",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.17.1",
    "classnames": "^2.2.6",
    "formik": "^1.0.0-beta.2",
    "http-proxy-middleware": "^0.19.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-anime": "^2.1.0",
    "react-autosuggest": "^9.4.3",
    "react-color": "^2.14.1",
    "react-css-transition-replace": "^3.0.3",
    "react-dom": "^16.3.2",
    "react-fontawesome": "^1.6.1",
    "react-jss": "^8.6.1",
    "react-measure": "^2.0.0",
    "react-popper": "^1.0.0-beta.6",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^2.1.3",
    "react-simple-sidenav": "^0.1.6",
    "react-sizeme": "^2.5.1",
    "react-swipeable-views": "^0.12.13",
    "react-transition-group": "^2.3.1",
    "redux": "^4.0.1",
    "redux-promise": "^0.6.0",
    "redux-saga": "^0.16.0",
    "styled-components": "^4.1.3",
    "typesafe-actions": "^3.0.0",
    "typescript": "^3.2.2",
    "yup": "^0.26.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^23.3.11",
    "@types/node": "^10.12.18",
    "@types/react": "^16.7.18",
    "@types/react-autosuggest": "^9.3.6",
    "@types/react-dom": "^16.0.11",
    "@types/react-measure": "^2.0.4",
    "@types/react-redux": "^6.0.12",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-swipeable-views": "^0.12.2",
    "@types/styled-components": "^4.1.4",
    "@types/yup": "^0.26.4",
    "jest": "^23.6.0",
    "jest-cli": "^23.6.0"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

ghost commented 5 years ago

When you created a new react application with create-react-app and tried to build it, what was the result? After installing npm i -g create-react-app again, was there anything unusual in the log? As far as I know, errno1 occurs when something is missing, please give a check to all your imports in case of a typo. I see as well several css/cssinjs libraries so the bug may exist in them due to cannot divide by "px", number expected

gigamesh commented 5 years ago

When you created a new react application with create-react-app and tried to build it, what was the result?

Everything installs ok and the app runs, but I get the same error when trying the build script.

After installing npm i -g create-react-app again, was there anything unusual in the log?

Nothing unusual - no errors

As far as I know, errno1 occurs when something is missing, please give a check to all your imports in case of a typo.

The app runs when I do npm start, so wouldn't that mean that all the imports are ok?

I see as well several css/cssinjs libraries so the bug may exist in them due to cannot divide by "px", number expected

Yeah I'm thinking the same thing but I'm not sure how to narrow it down given the app runs fine.

I just tried running the commands in a different shell (Git Bash instead of VSCode's built-in CLI) but no luck. I tried searching the code base for px as @matt-fevold suggested, but not finding anything unusual. I also tried an older release of material-ui, and tried downgrading Node back a couple versions (I recently upgraded so thought that might be the issue). Same result. :(

ghost commented 5 years ago

Give this a check and hopefully it will help.

gigamesh commented 5 years ago

What does this do? npm config set prefix /usr/local

...because I think it just added to my problems. I tried it and now reinstalling CRA results in an error (I tried both Node 10.15.0 and 8.15.0):

$ npm i -g create-react-app
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\Git\usr\local'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:182:13)
    at process._fatalException (internal/bootstrap/node.js:494:27)
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\Git\usr\local'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:182:13)
    at process._fatalException (internal/bootstrap/node.js:494:27)

gigamesh commented 5 years ago

create-react-app --version still tells me 2.1.3 is installed, but npm i -g create-react-app produces an error no matter what I try. :(

ghost commented 5 years ago

Hey @gigamesh, that's the link

This will fix it

Run git bash as Admin
Check if your npm folder is here C:\Users\<your_user_name>\AppData\Roaming\
then run npm config set prefix C:/Users/<your_user_name>/AppData/Roaming/npm

gigamesh commented 5 years ago

Great thank you - now npm i -g create-react-app produces no errors...

+ create-react-app@2.1.3
added 63 packages from 20 contributors in 4.283s

However, I'm still getting this:

npmGlobalPackages:
    create-react-app: Not Found

ghost commented 5 years ago

Hmm, tell me what's the output of npm list -g --depth 0

gigamesh commented 5 years ago

+-- browser-sync@2.26.3
+-- browserify@16.2.3
+-- create-react-app@2.1.3
+-- eslint-plugin-prettier@2.6.2
+-- expo-cli@2.2.0
+-- firebase-tools@6.1.1
+-- gulp-cli@2.0.1
+-- node-gyp@3.8.0
+-- npm@6.5.0
+-- parcel-bundler@1.10.3
+-- UNMET PEER DEPENDENCY prettier@>= 0.11.0
+-- react-native-cli@2.0.1
+-- rnpm@1.9.0
+-- ts-node@7.0.1
+-- tslint@5.11.0
`-- typescript@3.1.1

ghost commented 5 years ago

npm list -g lists all the global modules and as you can see it is there. No way it's a react problem. I am also not familiar with the issue, just throwing some ideas. 1) $ npm cache verify 2) $ npm i -g create-react-app

gigamesh commented 5 years ago

bummer - yeah I tried running the build script in another app and it worked, so it's something related to my dependencies. I wish the error output had more information.

ghost commented 5 years ago

When you created a new react application with create-react-app and tried to build it, what was the result?

Everything installs ok and the app runs, but I get the same error when trying the build script.

So when you tried it this time, wasn't working (which means problem was global) and now worked? (which means its only topical) Then you will have to close this topic. Last advice would be install a linter or make sure it works and

Check if you have any styles in javascript that instead of styles={height: 300} is styles={height: "300px"}
Try removing each dependency to isolate the problem or
if you upload your application in a repo and you sent it to me, ill help you and you will have it ready in seconds :)

Have a great day

gigamesh commented 5 years ago

So when you tried it this time, wasn't working (which means problem was global) and now worked? (which means its only topical)

The app works in development mode, but the react-scripts build process is what is failing.

Last advice would be install a linter or make sure it works and

Check if you have any styles in javascript that instead of styles={height: 300} is styles={height: "300px"}

Try removing each dependency to isolate the problem

Thanks I'll those suggestions.

if you upload your application in a repo and you sent it to me, ill help you and you will have it ready in seconds :)

Here it is if you want to try it out: https://github.com/gigamesh/aud.io

thanks!

ghost commented 5 years ago

aud

I literally downloaded it before 5 min :) 90% your problem is styled components and in the folder components. You have a lot of conditionals in combination with calc() and so on. It's a dangerous game. I gotta have to leave now but you can now see that it has nothing to do with React. Please close the issue so we don't alert people for no reason.

Have a nice day!

gigamesh commented 5 years ago

90% your problem is styled components and in the folder components. You have a lot of conditionals in combination with calc() and so on. It's a dangerous game.

I don't know what is problematic about the stuff you're referring to but I'll do some research. Big thanks for narrowing it down!

facebook / create-react-app