question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:9
  • Comments:20 (6 by maintainers)

github_iconTop GitHub Comments

6reactions
brennancheungcommented, Jul 2, 2019

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'],
      }
4reactions
ellisiocommented, Aug 10, 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;
};
```****
Read more comments on GitHub >

github_iconTop Results From Across the Web

css-loader | webpack - JS.ORG
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
Error when loading CSS with webpack css-loader
I try to import and reuse a CSS file to be injected in a shadow-root in Typescript but I cannot get it working...
Read more >
wait until bundle finished, stopped at 99% [webpack 5] #14405
I use npm to install packages. OS: window 10 node: V10.22.0 npm : V6.14.6. storybook config: const custom = require('../../webpack.config.js') ...
Read more >
@storybook/addon-a11y: Versions | Openbase
Vite: Do not add Webpack loaders when using Vite builder #19263; Source-loader: Fix invalid call to CSF sanitize #18930; Svelte: generate preview file...
Read more >
This is how angular-cli/webpack delivers your CSS styles to ...
We will be working only with CSS in the project so we don't need any ... we need. Webpack already have a suitable...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found