storybook: dist version addon-info should not require user's webpack css loader

Describe the bug When upgrading to @storybook/addon-info 5.1.9 I receive the following error:

ERROR in ./node_modules/@storybook/addon-info/dist/components/PropTable/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .info-table {
|   width: 100%;
| }
 @ ./node_modules/@storybook/addon-info/dist/components/PropTable/components/Table.js 14:0-23

To Reproduce This is most likely caused because I have the following rule defined in my webpack.config.js:

      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },

Note that node_modules is excluded. This is a very common config but unfortunately it means webpack won’t be processing anything inside of shipped npm modules.

Expected behavior There is an expectation that anything shipped as dist within an npm module should already be compiled and not rely on the user’s version of webpack in order to run. There are serious performance and bundle size issues that require node_modules to be excluded. This is the expected contract that all npm modules normally follow.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 9
Comments: 20 (6 by maintainers)

Most upvoted comments

I worked around the issue by excluding just @storybook/addon-info from the exclude.

      {
        test: /\.css$/,
        exclude: /node_modules(?!\/@storybook\/addon-info)/,
        use: ['style-loader', 'css-loader'],
      }

brennancheung on Jul 2, 2019

I was able to resolve this by modifying our webpack.config.js to be the following:

const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports = async ({ config }) => {
  config.module.rules = config.module.rules.map(f => {
    // Needed to add this to ignore our ../src/ for the default rule, instead of purging it.
    if (f.test.toString() === '/\\.css$/') {
      f.exclude = path.resolve(__dirname, '../src/');
    }

    return f;
  });

  config.module.rules.push({
    test: /\.css$/,
    include: path.resolve(__dirname, '../src/'), // Needed to be changed from ../
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
  });

  return config;
};
```****

ellisio on Aug 10, 2019

Hi all, I solved this by reading suggestion from @jerriclynsjohn. thanks @jerriclynsjohn

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        include: path.resolve(__dirname, '../'),
      },

j18s on Nov 6, 2019

@jerriclynsjohn does it process @apply in Style blocks in a Svelte component?

mledu on Sep 2, 2019

@jerriclynsjohn Awesome, I think this can help a lot of people. If you tweet about it and mention @storybookjs I’d be happy to retweet!

shilman on Sep 1, 2019

This section helped me a lot: https://storybook.js.org/docs/configurations/custom-webpack-config/#using-your-existing-config

lucasjs on Oct 5, 2019

@mledu I’ve made changes to the code in story and in main source. Do take a look at it, somehow the @apply remains as it is when compiled for stories. Let me know if you have a workaround and please do send a PR if you find a solution. This is working perfectly fine in the main source build, but breaks in story.

The configs in .storybook looks good enough for me, ideally it shows the postcss config file and storybook folder and postcss config has all the essentials. I’m not sure what I’m missing that’s causing this not to work. Utilities work perfectly fine and if abstractions as purely handled in components then we could stay away from using @apply.

That being said we should find a way to fix this.

jerriclynsjohn on Sep 16, 2019

@shilman I’ve tweeted about it, do let me know if there needs to be any changes in the repo specific to Storybook

jerriclynsjohn on Sep 1, 2019

Figured out how to do it and have made a dedicated repo, if anyone needs help in this integration. https://github.com/jerriclynsjohn/svelte-storybook-tailwind

jerriclynsjohn on Aug 31, 2019

@ellisio @shilman I’m really stuck in bringing in TailwindCSS for Svelte into Storybook, can you let me know what you did besides the above mentioned webpack.config.js. Is there any way that you could share a Svelte + Tailwind + Storybook implementation.

jerriclynsjohn on Aug 30, 2019

FYI addon-info is being superceded by addon-docs, which fixes a bunch of bugs and is easier to maintain. It’s reached release candidate (RC) status and will be properly released soon. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

shilman on Aug 26, 2019

is there any update here? i have same problem

seraj on Jul 9, 2019