dist version addon-info should not require user's webpack css loader
See original GitHub issueDescribe 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:
- Created 4 years ago
- Reactions:9
- Comments:20 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I worked around the issue by excluding just
@storybook/addon-info
from theexclude
.I was able to resolve this by modifying our
webpack.config.js
to be the following: