Skip to content

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

Closed
@DeltaCircuit

Description

@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): [email protected]
  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 [email protected]
  • 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions