Create-react-app: Failed at the [email protected] build script 'react-scripts build'.

[interglobalmedia]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes. Used npm 4.2.0
Many errors, especially related to "missing modules", are due to npm bugs.
Not the issue(s)
If you're using Windows, follow these instructions to update npm.

If you're using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Then try to reproduce the issue again.

Can you still reproduce it?
Yes.

Description

What are you reporting?
Build fail

Expected behavior

Create a new build of my react app
Tell us what you think should happen.

Actual behavior

Tell us what actually happens.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):
   [email protected] /Users/mariacam/Development/react-for-beginners/catch-of-the-day
   └── [email protected] invalid
2. node -v: 7.8.0
3. npm -v: 4.2.0

Then, specify:

1. Operating system: OSX 10.11.6
2. Browser and version: Chrome Version 57.0.2987.98 (64-bit)

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here.
https://github.com/interglobalmedia/react-for-beginners
By doing this, you're helping the Create React App contributors a big time!
Demonstrable issues gets fixed faster.

[interglobalmedia]

This is the error I received in my iTerm2 console when I ran npm run build:

npm run build

> [email protected] build /Users/mariacam/Development/react-for-beginners/catch-of-the-day
> react-scripts build

Creating an optimized production build...
Failed to create a production build. Reason:
Module build failed: Error: Unexpected "space" found.
    at new error (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/processor.js:29:23)
    at Parser.error (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/parser.js:234:15)
    at Parser.pseudo (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/parser.js:360:18)
    at Parser.parse (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/parser.js:549:22)
    at Parser.loop (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/parser.js:517:18)
    at new Parser (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/parser.js:104:21)
    at Processor.process (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-selector-parser/dist/processor.js:26:21)
    at getParsed (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-minify-selectors/dist/index.js:30:59)
    at optimise (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-minify-selectors/dist/index.js:40:21)
    at /Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss/lib/container.js:256:28
    at /Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss/lib/container.js:163:26
    at Root.each (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss/lib/container.js:129:22)
    at Root.walk (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss/lib/container.js:162:21)
    at Root.walkRules (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss/lib/container.js:254:25)
    at /Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss-minify-selectors/dist/index.js:109:20
    at LazyResult.run (/Users/mariacam/Development/react-for-beginners/catch-of-the-day/node_modules/react-scripts/node_modules/postcss/lib/lazy-result.js:286:20)

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/mariacam/.nvm/versions/node/v7.8.0/bin/node" "/Users/mariacam/.nvm/versions/node/v7.8.0/bin/npm" "run" "build"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the cotd package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs cotd
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls cotd
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mariacam/.npm/_logs/2017-04-03T00_56_00_506Z-debug.log
Maria-Campbells-Computer-2 ॐ  ~/development/react-for-beginners/catch-of-the-day

[gaearon]

It looks like you are using Stylus for styling, and the CSS that is checked into your GitHub repository is invalid. Specifically, these lines are not valid CSS:

transform: translateX(-120%) {
    max-height: 0;
}
transform: translateX(-120%).order-enter-active {
    max-height: 60px;
    padding: 2rem 0 !important;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

I don’t know if this CSS was produced by Stylus, or if the mistake was added by hand, but if I run npm run stylus (which I learned about from package.json), the compiled CSS is valid, and I can run npm run build after it.

I hope this helps!

[gaearon]

Sent a PR: https://github.com/interglobalmedia/react-for-beginners/pull/1.

[gaearon]

If you’re curious how I diagnosed the issue, from the stack trace it seemed like it has to do with CSS. I removed the CSS import to verify that it fixes the build, and it did. Then I included it again, and it broke. Then I commented out half of CSS, and it was still broken. I commented out half of what’s left, and it was still broken. I kept commenting out half of what’s left until I commented out the broken rules. This fixed the issue. Then I verified that commenting out those broken rules alone was also enough to fix the issue. Finally, I looked at the rules and noticed they are invalid. Hope this helps!

(I wish PostCSS parser gave a better message in this case. I’m not sure whether it’s worth reporting or not, maybe @ai can tell.)

[interglobalmedia]

Hi @gaearon,

Thanks so much for getting back to me. I thought it might be Stylus, but since I am using Atom, there is only partial support there (as opposed to Sublime which I do NOT use), and therefore was impossible (for me anyway) to diagnose. This is also the first time that I use it. I am definitely checking out how YOU did it by comparing my code with yours! Again, thanks so much for your help!

[gaearon]

Feel free to file more issues if you bump into something, we’re happy to help!

[interglobalmedia]

Hi @gaearon,

I ran a build and it works beautifully now. Weird though, I thought I had gotten rid of any invalid CSS. I guess I hadn't. I don't even remember putting it in there. Could be I was trying to beautify code and something from Atom slipped in. Very possible.

Again, thanks so much for your help! You're great!

[interglobalmedia]

Hi @gaearon,

Sorry to bug you, but was wondering where these rules you mentioned reside? I'd like to take a peek. Thanks!

[gaearon]

Those were the first few rules in src/css/style.css before I recompiled it.

[interglobalmedia]

@gaearon, so that's what you mean by rules. I was thinking in terms of config files with rules. Thanks for the clarification. I really don't remember adding the invalid stylus css. Weird. And then when I did see that (and I did), I got rid of it, but somehow kept on getting the same errors over and over even though it no longer existed in my stylus assets in src. Thanks! (Now I get it completely and keeping your info on npm run stylus for future reference)

[gaearon]

Oh, sorry I wasn’t clear. Yea, I meant “rules” as in “CSS rules”—that is, things that look like:

css selector {
  rule;
  another rule;
}

Now that I think of it, it’s probably not the right way to describe the problem because the invalid part wasn’t the rule—it was the selector (specifically, transform: translateX(-120%) which somehow ended up in the selector part despite being written as a rule). It’s quite possible some autoformatting plugin could mess it up.

[interglobalmedia]

@gaearon Thank you! That's what I thought. Something in Atom probably screwed it up.

[ai]

This error is not from PostCSS core parser. But I created issue to improve them.

/cc @ben-eb

[vancityhuddy]

@gaearon I actually used this technique earlier today to diagnose an SCSS issue! It doesn't always have to be pretty; it sometimes just has to get the job done ;)

[gaearon]

@ai Thanks!