url and file loaders failed to resolve when an external css is imported.

[DeltaCircuit]

Description

Redirected from here
When I tried to import a css file that resides in an another local package, I got some module not found error for url and file.

Expected behavior

The url-loader and file-loader should resolve automatically without any errors.

Actual behavior

What I got:

Failed to compile.

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:118615-118666

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154380-154430 6:154453-154503

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154553-154605

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154636-154687

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154717-154767

Error in ../semantic/dist/semantic.css
Module not found: 'file' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154801-154851

Environment

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

1. npm ls react-scripts (if you haven’t ejected): react-scripts@0.9.1
2. node -v: v6.9.1
3. npm -v: 4.2.0

Then, specify:

1. Operating system: Windows 10 Professional
2. Browser and version: Google Chrome Version 58.0.3024.0 (Official Build) canary (64-bit)

Reproducible Demo

I've created a sample repo to reproduce this issue here. I've used LernaJS for managing local module. To repoduce:

• Clone the repo
• Run lerna bootstrap from the root directory. Install lerna globally if you haven't npm i -g lerna@2.0.0-beta.37
• Navigate to cra-test\packages\semantic and run npm run build to build the CSS
• Navigate to cra-test\packages\my-app and run npm start

[roelio]

Dont know if it also applies to your setup but, you can check if PR #1359 will fix this.

I fixed my problem using http://stackoverflow.com/questions/33711512/symlinking-react-modules-with-npm-link-for-local-development-gives-error.
By ejecting and adding the following to the webpackconfigs (as in SO answer)
resolveLoader: { root: path.join(__dirname, "../node_modules") }
Mind the ../ and don't forget the var path = require('path');

[gaearon]

Need to take a look at this. We don't really support development with Lerna right now, so I'm not sure if it's a bug or just missing feature.

[DeltaCircuit]

In the webpack config of react-scripts, the loaders are resolved from paths.ownNodeModules which is the node_modules in the react-scripts directory.
Changing it into something like path.join(process.cwd(), 'node_modules') is an option?

[Timer]

I believe #1359 aims to resolve this.

[Timer]

This was fixed in the 0.10 alpha. I backported it to 0.9.x via #1884.