Skip to content

[next branch] requiring css that imports another assets causes runtime error #3852

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

Closed
viankakrisna opened this issue Jan 18, 2018 · 6 comments
Milestone

Comments

@viankakrisna
Copy link
Contributor

Is this a bug report?

Yes

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

haven't tried it yet, but it works on the same env, same code, but v1 react-scripts

Which terms did you search for in User Guide?

N/A

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.9.4
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found

Packages: (wanted => installed)
react: ^16.2.0 => 16.2.0
react-dom: ^16.2.0 => 16.2.0
react-scripts: 2.0.0-next.096703ab => 2.0.0-next.096703ab

Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Steps to Reproduce

  1. create new app
  2. yarn add react-slick
  3. import 'slick-carousel/slick/slick-theme.css' or require('slick-carousel/slick/slick-theme.css'); in index.css

Expected Behavior

No runtime error

Actual Behavior

A runtime error
screen shot 2018-01-18 at 11 00 58

Reproducible Demo

https://github.com/viankakrisna/create-react-app-example/blob/master/src/index.js

@Timer
Copy link
Contributor

Timer commented Jan 18, 2018

Thanks for the report!
And thank you for figuring out the issue was with css-loader. 😄

@Timer Timer added this to the 2.0.0 milestone Jan 18, 2018
@Timer
Copy link
Contributor

Timer commented Jan 18, 2018

Resolved in 9754a23

@Timer Timer closed this as completed Jan 18, 2018
@Timer
Copy link
Contributor

Timer commented Jan 18, 2018

Fixed in [email protected]

@viankakrisna
Copy link
Contributor Author

9754a23 only silent the error, we need to figure out the issue with css-loader so it can work nicely with svgr

right now svg assets imported from css would become url([object Object]#slick) format('svg');

@jihchi
Copy link
Contributor

jihchi commented Jan 29, 2018

Hi,

I've same issue with [email protected].
Both regular css and css module have same result.

regular css

body {
  background-image: url('./logo.svg');
  ...
}

screenshot_2018-01-29_18-03-14_bo9qv 1

css module

.bg-svg {
  background-image: url('./logo.svg');
}

screenshot_2018-01-29_18-03-42_7raii 1

Here is the reproducible code: https://github.com/jihchi/create-react-app-3852

@gaearon
Copy link
Contributor

gaearon commented Jan 29, 2018

We are aware of that issue, see #3856

@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
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

4 participants