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 import external CSS files after upgrading to react-scripts 1.0.8 #2677

Closed
deepakjois opened this issue Jun 29, 2017 · 14 comments
Closed
Milestone

Comments

@deepakjois
Copy link

deepakjois commented Jun 29, 2017

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

postcss

Environment

  1. node -v:

v8.1.2

  1. npm -v:

4.6.1

  1. yarn --version (if you use Yarn):

0.24.6

  1. npm ls react-scripts (if you haven’t ejected):
postcssbug@0.1.0 /Users/deepak/code/personal/postcssbug
└── react-scripts@1.0.8

Then, specify:

  1. Operating system: OS X Sierra

  2. Browser and version (if relevant): Not Relevant

Steps to Reproduce

create-react-app postcssbug

cd postcssbug

yarn add normalize.css

echo "@import '~normalize.css/normalize.css';" >> src/index.css

yarn start

Expected Behavior

yarn start should complete and launch a page in browser.

Actual Behavior

screenshot 2017-06-29 12 18 36

./~/normalize.css/normalize.css
Module build failed: Error: No PostCSS Config found in: /Users/deepak/code/personal/postcssbug/node_modules/normalize.css
    at <anonymous>

Reproducible Demo

Problem occured here: deepakjois/deepakjois.com@f02c486

I was able to make it go away after downgrading react-scripts to 1.0.7. So far I am able to reproduce this reliably in three independent projects, including the one I created using steps above under “Steps to Reproduce”

deepakjois added a commit to deepakjois/deepakjois.com that referenced this issue Jun 29, 2017
@talgat-ruby
Copy link

Try to import into js, it solved my problem. Also check if that react-scripts in dependencies not devDependecies.

@czebe
Copy link

czebe commented Jun 29, 2017

Same issue here. Works with the previous version of react scripts.
I'd hate to import normalize into JS. SCSS does a perfect job with importing other stylesheets.

@deepakjois
Copy link
Author

@talgat-ruby Importing into js might be a workaround, but it isn’t really a fix, especially when this was working in the previous version.

I don’t think it matters if react-scripts is in dependencies or devDependencies. Seems to have the same problem.

@gaearon gaearon added this to the 1.0.9 milestone Jun 29, 2017
@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

This might be related to update of postcss-loader. Can you check if installing a version that 1.0.7 used fixes this? We might need to downgrade it and file a bug against them in this case.

@deepakjois
Copy link
Author

This might be related to update of postcss-loader. Can you check if installing a version that 1.0.7 used fixes this? We might need to downgrade it and file a bug against them in this case.

What is the easiest way to do this inside of the test project I created above (in "Steps to Reproduce")? yarn remove postcss-loader doesn’t seem to work. How do I override the Yarn restrictions.

@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

I would look at package.json of react-scripts@1.0.7 on http://unpkg.com/react-scripts@1.0.7/package.json, note PostCSS loader version, and then temporarily install it locally with npm: npm i postcss-loader@x.y.z. I would then delete node_modules/react-scripts/node_modules/postcss-loader in case npm hides the "right" version there because we want to force the wrong one. This is not a solution of course but should be enough to test it.

@piotr-cz
Copy link
Contributor

piotr-cz commented Jun 29, 2017

Error went away when I created file postcss.config.js in project root (module.exports = {};), but when another error started to pop up: Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'postcss' of null

@deepakjois
Copy link
Author

Looks like postcss-loader went from 2.0.5 to 2.0.6

So, I did

npm i postcss-loader@2.0.5
rm -rf node_modules/react-scripts/node_modules/postcss-loader
yarn build

and got

Failed to compile.

./~/normalize.css/normalize.css
Module build failed: Error: No PostCSS Config found in: /Users/deepak/code/personal/postcssbug/node_modules/normalize.css
    at <anonymous>

So I guess that didn’t fix it.

@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

Hmm I'm struggling to see why this is happening. To debug I would probably look at where the message is thrown and try to figure out why it didn't get thrown before.

@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

Random guess. Can you try reverting change from #2430 locally? I think this might have been it.

@deepakjois
Copy link
Author

Ya, reverting #2430 that works 👍 .

@piotr-cz
Copy link
Contributor

Confirming that reverting #2430 fixes problem.
Downgrading postcss-loader back to 2.0.5 doesn't.

@gaearon
Copy link
Contributor

gaearon commented Jun 29, 2017

Should be fixed in 1.0.9.
Also added a regression test so this doesn't happen again.
Please verify.

@piotr-cz
Copy link
Contributor

piotr-cz commented Jun 29, 2017

Confirming it's fixed in v1.0.9, thanks!

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

No branches or pull requests

5 participants