Relative URLs to assets no longer work in CSS now that CSS no longer gets inlined #4645

Vinnl · 2018-10-30T14:44:27Z

Describe the bug
I just upgraded to Storybook 4, and I think this issue is caused by that (it required a lot of other moving parts as well).

Basically, in my React component, I import './Widget.css';. Then in Widget.css, I reference a background image located in the same folder as such: background-image: url(orcid_16x16.png);.

With Storybook 3, this just worked even using build-storybook: the image URL was updated to static/media/orcid_16x16.2dddb203.png, and since the CSS was inline, this path was correct.

Now with Storybook 4, however, the URL is still updated to that value, but because it is now located in a CSS file that itself located in static/css, the browser is now trying to find the image at static/css/static/media/, and hence cannot find it.

To Reproduce
Steps to reproduce the behavior:

Visit my built Storybook v3
Notice that there is a green icon to the left-hand side of Alice Doe
Now visit that same page in Storybook 4
Notice that the image is missing

Expected behavior
The image to also be present in Storybook 4 - presumably by making sure that URL imports are rewritten to be relative to the CSS file they are in.

Screenshots

In Storybook 3:

In Storybook 4:

System:

OS: Ubuntu Linux 18.04
Device: Dell XPS 13 9360
Browser: Firefox
Framework: React
Addons: [if relevant]
Version: 4.0.0

The text was updated successfully, but these errors were encountered:

igor-dv · 2018-10-31T10:20:43Z

Do you have any custom webpack.config?

Vinnl · 2018-10-31T10:26:51Z

@igor-dv Ah, yes, sorry - I'm using TypeScript.

The config in the case of the working images:

const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [
      path.resolve(__dirname, "../src"),
      path.resolve(__dirname, "../stories"),
    ],
    loader: require.resolve("ts-loader"),
    options: { configFile: '../tsconfig.json' }
  });
  defaultConfig.resolve.extensions.push(".ts", ".tsx");

  return defaultConfig;
};

and the config in the case where images do not load:

const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [
      path.resolve(__dirname, "../src"),
      path.resolve(__dirname, "../stories"),
    ],
    loader: require.resolve('awesome-typescript-loader'),
    options: { configFileName: path.resolve(__dirname, './tsconfig.json') }
  });
  defaultConfig.resolve.extensions.push(".ts", ".tsx");

  return defaultConfig;
};

The difference between the two is that the loader changed from ts-loader to awesome-typescript-loader.

igor-dv · 2018-10-31T10:30:35Z

So the difference in the awesome-typescript-loader vs ts-loader, right ? 🤔

Vinnl · 2018-10-31T10:37:28Z

Yes, as far as the Webpack config is concerned. Though i don't think they do anything with image imports, especially when done from CSS?

igor-dv · 2018-10-31T11:22:47Z

Did you try to use SB v4 with the ts-loader (to eliminate this problem)? Nothing is changed in png loading in a new release...

Vinnl · 2018-10-31T11:42:57Z

Well, I wanted to, but unfortunately I couldn't get it to work - I ran into this error message:

Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for <..>/stories/widget.tsx.
at makeSourceMapAndFinish (<..>/node_modules/ts-loader/dist/index.js:78:15) 
at successLoader (<..>/node_modules/ts-loader/dist/index.js:68:9)
at Object.loader (<..>/node_modules/ts-loader/dist/index.js:22:12)

Since the official docs also use awesome-typescript-loader, I figured I'd try it with that, and that worked. (I used to use ts-loader because my app used that as well, but that is no longer the case.)

igor-dv · 2018-10-31T14:18:21Z

BTW, how does your tsconfig look like?
(I am asking different questions because idk what is the problem 🤷‍♂️ )

Also, if you could share a public reproduction, that'd be great.

Vinnl · 2018-10-31T14:39:34Z

Haha, I was afraid so :P

The tsconfig.json is not that special:

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src"
  ],
  "exclude": [
    "src/setupProxy.js"
  ]
}

I don't have a minimal reproduction unfortunately, but the project this occurs on luckily is open source: with Storybook 3, with Storybook 4. (Note that there are several projects in that repo - the one with Storybook is located in /client.)

igor-dv · 2018-10-31T15:08:26Z

You can exclude stories from tsconfig and create another one for storybook (tsconfig.sb.json) that will extend your regular tsconfig. In this new tsconfig you can remove the "noEmit": true, (it could be a root of your initial ts-loader problem). Excluding stories from the tsconfig could boost your apps building time.

Vinnl · 2018-10-31T15:41:22Z

@igor-dv Hehe, that's what I was doing already - I just mashed them together here for easier display :)

Setting noEmit: false did solve ts-loader not working. Unfortunately, images are still not loaded :(

igor-dv · 2018-10-31T15:43:54Z

Looks like I need to clone the project 😴

Vinnl · 2018-10-31T15:58:55Z

Ah don't bother, that's far too much effort! I'll probably be diving into this again tomorrow; who knows, I might get some fresh insights :)

igor-dv · 2018-10-31T15:59:48Z

I see that you've migrated to react-scripts as well. We have a feature that integrates styling from the CRA2.

CC: @chadfawcett , could it be somehow related to this?

chadfawcett · 2018-10-31T17:47:56Z

I believe this is because you're switching to CRA. I believe the file paths need to be relative. So change orcid_16x16.png to ./orcid_16x16.png.

https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files
facebook/create-react-app#4574 (comment)

chadfawcett · 2018-10-31T17:52:13Z

Although, I wasn't actually able to replicate the issue. I cloned the repo, checked out the branch, and ran yarn storybook. This may be because I'm on MacOS, and it does a bit of magic when it comes to resolving file paths.

Vinnl · 2018-10-31T18:27:17Z

@chadfawcett Actually, it used to be like that - I just changed it to see whether that fixes it. I'll try changing it back, but I think orcid_16x16.png is relative as well - especially considering that this URL is changed in the built version, just not to the correct path.

Note that it does work locally (i.e. unbuilt) for me as well, because the CSS is still inline at that point, so the relative import path still works. It just doesn't work in the built version because the CSS file is then in a subfolder, and imports are resolved by the browser relative to that.

Edit: Just tried it with a ./ import - the images still won't load, unnfortunately.

Thanks for your help both, though, you're really going above and beyond :)

chadfawcett · 2018-10-31T19:18:30Z

Sorry @Vinnl, I missed the fact that this was specific to built version.

Looks like it's a bug in the storybook cra webpack preset. I'll try to get a PR in tonight.

Vinnl · 2018-11-01T07:58:04Z

That'd be fantastic @chadfawcett. If you have any pointers I'd be happy to take a shot at it myself, if need be :)

Vinnl · 2018-11-01T10:07:58Z

Some more observations: CRA successfully turns it into an absolute URL, as can be seen here. However, it knows how to do so because the developer configures at what location the app will be deployed. Given that that location is different for the built Storybook application, I'm not sure how to deal with that other than providing a similar configuration option for Storybook itself.

Though perhaps an alternative is to always inline images as data URLs, given that data use is probably (?) less of an issue for Storybooks. Or, alternatively, not to extract the CSS into separate files at all, like in Storybook 3.

Anyway, I'm not sure if that is desirable from a Storybook point of view, so that's probably best for you to judge.

chadfawcett · 2018-11-02T09:43:07Z

@Vinnl Apologies that this took longer than expected. I got caught up with some testing issues.

Take a look at #4695. Would you be able to clone my branch and test it with your repo? I've already done so, but it would be good if you could confirm the fix resolves your issue. Here's how to include the local build in your project https://github.com/storybooks/storybook/blob/master/CONTRIBUTING.md#working-with-your-own-app

Vinnl · 2018-11-02T10:11:05Z

No problem @chadfawcett, I'm already indebted to you for even trying to fix it, let alone actually doing so :)

Anyway, I saw the PR and was already trying it out - I've just confirmed that it does, indeed, fix the issue :)

Vinnl · 2018-11-06T09:36:17Z

Just upgraded to 4.0.4, and it works flawlessly. Thanks!

tulsidaskhatri · 2020-01-30T14:11:44Z

I am getting exactly same issue with
"@storybook/react": "^5.3.7",

css is trying to look for a font file in
static/css/static/media/myfont.woff2

but the font is at following url:
static/media/myfont.woff2

ppiyush13 · 2020-02-02T11:20:41Z

I am also facing same issue

VinceVachon · 2020-02-13T22:18:18Z

Same "5.3.9",

shilman · 2020-02-14T02:27:54Z

@mrmckeb did something change in the CRA preset that might affect this?

mrmckeb · 2020-02-19T08:49:39Z

This looks like a conflict between Storybook and CRA's configurations, which is odd. I can take a look at this.

Has anyone got a reproduction they can share with me? Thanks!

YDundie · 2020-03-05T12:23:33Z

Same for the version 5.3.13

YDundie · 2020-03-05T15:50:27Z

Hello.
Successfully solved it by adding this to my .storybook/main.js

const path = require('path');

const publicPath = process.env.DEV ? "http://localhost:9009/" :"https://your-web-address.com/"

module.exports = {
	stories: ['../src/**/*.stories.js'],
	addons: [
		'@storybook/preset-create-react-app',
		'@storybook/addon-actions',
		'@storybook/addon-links',
		'@storybook/addon-knobs'],

	webpackFinal: async (config, { configType }) => {
	
		config.output.publicPath=publicPath

		return config;
	},
};

Hopefully it could help you.

cherouvim · 2020-03-23T09:34:01Z

Has anyone got a reproduction they can share with me? Thanks!

Hello. This is the most minimal repro I could come up with. Steps:

Confirm that the woff font file is loading via the network tab:

npm install
npm run storybook

Confirm that font file is not loading (404s due to static/css/static/media):

npm run build-storybook
# view generated index.html

storybook-repro-4645.zip

maniax89 · 2020-03-23T15:40:30Z

in my project - i was able to remedy this by adding the "homepage": "." to my package json -> https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths

not sure if this helps anyone^

seems like the relevant lines in CRA look something like this (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js):

  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },

and public path is set below:

      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: paths.publicUrlOrPath,

shilman · 2020-03-23T16:05:25Z

@mrmckeb any chance you can look at @cherouvim 's repro?

mrmckeb · 2020-03-24T09:18:13Z

@cherouvim, I downloaded your project and ran it - and I see "Rumba" loading as expected.

You also have a webpack.config.js file which is not needed, as CRA inserts the necessary config.

I then migrated the project to use the new preset for CRA, and everything was still working correctly.

Can you please provide some more info? Thanks!

mrmckeb · 2020-03-24T09:19:24Z

@YDundie, I'd like to find the root cause of this and fix it in the preset. Are you able to share an example of what isn't working for you?

Even just code snippets here.

cherouvim · 2020-03-24T09:20:12Z

@mrmckeb it does work on npm run storybook, but does it work on npm run build-storybook?

mrmckeb · 2020-03-24T09:56:31Z

Thanks @cherouvim, I didn't understand that it was build only. Found and hopefully fixed. Thanks for the solution @maniax89!

ZeeshanTamboli · 2020-06-09T13:29:46Z

@maniax89's solution to add "homepage": "." in package.json worked for me. Thanks!

rodoabad · 2021-01-28T18:54:03Z

This is still happening on non-CRA apps.

In CSS.

// foo.module.scss
background: url('./logo.svg') 30px center no-repeat $white;

After Storybook.

static/media/logo.f6b1d730.svg

kneupper · 2022-03-16T20:35:09Z

For anybody still having this issue down the road on a non-CRA app, please reference this SO thread

The key of this is in specifying { url: false } in the CSS Module rule of your webpack config. Here is the specific configuration I used for my CSS Module rule:

config.module.rules.push({
    test: /\.module\.css$/,
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                modules: {...}, // project-specific module naming conventions, config, etc.
                url: false,
                importLoaders: 1,
            },
        },
    ],
})

Hope this can save some time for anybody else!

igor-dv added question / support react labels Oct 31, 2018

igor-dv added the typescript label Oct 31, 2018

chadfawcett mentioned this issue Nov 2, 2018

Fix css relative asset urls #4695

Merged

vpicone mentioned this issue Nov 2, 2018

chore: Upgrade Storybook to v4 carbon-design-system/carbon-components-react#1498

Merged

igor-dv mentioned this issue Nov 3, 2018

Styles are not loading in prod with sass loader and storybook 4 #4690

Closed

Hypnosphi closed this as completed in #4695 Nov 5, 2018

shilman added the cra Prioritize create-react-app compatibility label Nov 22, 2018

shilman added the needs reproduction label Feb 19, 2020

shilman reopened this Mar 23, 2020

shilman removed the needs reproduction label Mar 23, 2020

mrmckeb mentioned this issue Mar 24, 2020

fix(cra): set PUBLIC_URL for static builds storybookjs/presets#119

Merged

mrmckeb closed this as completed in storybookjs/presets#119 Mar 24, 2020

Relative URLs to assets no longer work in CSS now that CSS no longer gets inlined #4645

Relative URLs to assets no longer work in CSS now that CSS no longer gets inlined #4645

Comments

Vinnl commented Oct 30, 2018

igor-dv commented Oct 31, 2018

Vinnl commented Oct 31, 2018

igor-dv commented Oct 31, 2018

Vinnl commented Oct 31, 2018 • edited Loading

igor-dv commented Oct 31, 2018

Vinnl commented Oct 31, 2018

igor-dv commented Oct 31, 2018 • edited Loading

Vinnl commented Oct 31, 2018 • edited Loading

igor-dv commented Oct 31, 2018

Vinnl commented Oct 31, 2018

igor-dv commented Oct 31, 2018

Vinnl commented Oct 31, 2018

igor-dv commented Oct 31, 2018

chadfawcett commented Oct 31, 2018

chadfawcett commented Oct 31, 2018

Vinnl commented Oct 31, 2018 • edited Loading

chadfawcett commented Oct 31, 2018

Vinnl commented Nov 1, 2018

Vinnl commented Nov 1, 2018

chadfawcett commented Nov 2, 2018

Vinnl commented Nov 2, 2018

Vinnl commented Nov 6, 2018

tulsidaskhatri commented Jan 30, 2020

ppiyush13 commented Feb 2, 2020

VinceVachon commented Feb 13, 2020

shilman commented Feb 14, 2020

mrmckeb commented Feb 19, 2020

YDundie commented Mar 5, 2020

YDundie commented Mar 5, 2020 • edited Loading

cherouvim commented Mar 23, 2020 • edited Loading

maniax89 commented Mar 23, 2020

shilman commented Mar 23, 2020

mrmckeb commented Mar 24, 2020

mrmckeb commented Mar 24, 2020

cherouvim commented Mar 24, 2020

mrmckeb commented Mar 24, 2020 • edited Loading

ZeeshanTamboli commented Jun 9, 2020

rodoabad commented Jan 28, 2021 • edited Loading

kneupper commented Mar 16, 2022 • edited Loading

Vinnl commented Oct 31, 2018 •

edited

Loading

igor-dv commented Oct 31, 2018 •

edited

Loading

Vinnl commented Oct 31, 2018 •

edited

Loading

Vinnl commented Oct 31, 2018 •

edited

Loading

YDundie commented Mar 5, 2020 •

edited

Loading

cherouvim commented Mar 23, 2020 •

edited

Loading

mrmckeb commented Mar 24, 2020 •

edited

Loading

rodoabad commented Jan 28, 2021 •

edited

Loading

kneupper commented Mar 16, 2022 •

edited

Loading