create-react-app: Failed at the cotd@0.0.1 build script 'react-scripts build'.

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:

npm ls react-scripts (if you haven’t ejected): cotd@0.0.1 /Users/mariacam/Development/react-for-beginners/catch-of-the-day └── react-scripts@0.6.1 invalid
node -v: 7.8.0
npm -v: 4.2.0

Then, specify:

Operating system: OSX 10.11.6
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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

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.)

+20

gaearon on Apr 3, 2017

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

gaearon on Apr 3, 2017

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 on Apr 3, 2017

@ai Thanks!

gaearon on Apr 4, 2017

@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 😉

speedy250 on Apr 4, 2017

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

/cc @ben-eb

ai on Apr 4, 2017