Cannot import external CSS files after upgrading to react-scripts 1.0.8

[deepakjois]

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

2. npm -v:

4.6.1

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

0.24.6

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

./~/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”

[talgat-ruby]

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

[czebe]

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]

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

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]

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]

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]

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]

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]

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]

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

[deepakjois]

Ya, reverting #2430 that works 👍 .

[piotr-cz]

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