Repository navigation
Cannot import external CSS files after upgrading to react-scripts 1.0.8 #2677
Description
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
node -v:
v8.1.2
npm -v:
4.6.1
yarn --version(if you use Yarn):
0.24.6
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:
-
Operating system: OS X Sierra
-
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
./~/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”
Activity
Downgrade react-scripts.
talgat-ruby commentedon Jun 29, 2017
Try to import into js, it solved my problem. Also check if that react-scripts in dependencies not devDependecies.
czebe commentedon 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 commentedon Jun 29, 2017
@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
dependenciesordevDependencies. Seems to have the same problem.gaearon commentedon 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 commentedon Jun 29, 2017
What is the easiest way to do this inside of the test project I created above (in "Steps to Reproduce")?
yarn remove postcss-loaderdoesn’t seem to work. How do I override the Yarn restrictions.gaearon commentedon 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 deletenode_modules/react-scripts/node_modules/postcss-loaderin 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 commentedon Jun 29, 2017
Error went away when I created file
postcss.config.jsin 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 nulldeepakjois commentedon Jun 29, 2017
Looks like postcss-loader went from 2.0.5 to 2.0.6
So, I did
and got
So I guess that didn’t fix it.
gaearon commentedon 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 commentedon Jun 29, 2017
Random guess. Can you try reverting change from #2430 locally? I think this might have been it.
deepakjois commentedon Jun 29, 2017
Ya, reverting #2430 that works 👍 .
piotr-cz commentedon Jun 29, 2017
Confirming that reverting #2430 fixes problem.
Downgrading postcss-loader back to 2.0.5 doesn't.
gaearon commentedon 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 commentedon Jun 29, 2017
Confirming it's fixed in v1.0.9, thanks!