Storysource Webpack rule causing build errors in Design Systems for Developers [REACT]
See original GitHub issueDescription
When I followed the instructions for adding webpack.config.js
into .storybook
, which pushes the loader rule for addon-storybook
, it caused the build to error in every .stories
file with the error Import in body of module; reorder to top import/first
.
After researching the issue, I found that this comment seems to solve the problem: https://github.com/storybookjs/storybook/issues/6974#issuecomment-499903328
Proposed Change
Original:
//And update your webpack config in .storybook/webpack.config.js:
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});
return config;
`};
Fixed:
//And update your webpack config in .storybook/webpack.config.js:
module.exports = function({ config }) {
config.module.rules.unshift({
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});
return config;
`};
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
@storybook/react | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >Migrating a Create React App (Webpack) to NX and Vite
I'm currently being hit by a decodeURI malformed problem. I have no idea what it is causing it. C:\Users\asili\Documents\Programming\ ...
Read more >Dependencies | umi_cps | npm - Open Source Insights
arrow_right antd. 3.26.16 Notes Relation Licenses Depende...
Version 3.26.16 Published April 26, 2020 Description
arrow_right father. 2.30.23 Notes Relation Licenses Depende...
Version 2.30.23 Published September 15,...
Read more >INTEGRATING MODERN FRONT-END METHODOLOGIES ...
Design System, Magento, Vue Storefront, PWA, Automated Web Testing ... allowing developers to create platform-agnostic solutions with a ...
Read more >@massds/mayflower-react - npm package | Snyk
React versions of Mayflower design system UI components For more information about how to use this package see README. Latest version published 3...
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
thanks @jpmarra (just invited you to collaborate too)
Seems to work! Thanks so much @jpmarra, this was something that had bugged me a bit.