Comments (10)
Thanks for looking into this, @mrmckeb. Here's the repo: https://github.com/ignas-sedunovas/storybook-preset-create-react-app-issue.
Some details that might be helpful:
- I added CRA + TS and Storybook. Then I wrote a story. At this point fonts are rendering correctly both in local server and static file (repo at this commit) β
- Then I converted the story to TSX and added
@storybook/preset-create-react-app
addon. At this point Storybook complained about missing Webpack loaders. Therefore, I moved the story under/src
folder. Now the Storybook successfully loads the story. Unfortunately, when I use the static build, the font is not loaded because of incorrect path (see image below) β
from presets.
this issue seems to be a dublication of storybookjs/storybook#9564
I found a workaround by adjusting the config for the file-loader in main.js
const getFileLoader = (config) => {
const { oneOf } = config.module.rules.find(({oneOf}) => oneOf);
return oneOf.find(({loader}) => /file-loader/.test(loader));
};
module.exports = {
stories: ['../src/stories/*.stories.js'],
addons: [
'@storybook/preset-create-react-app',
],
webpackFinal: async (config) => {
const getFileLoader = (config) => {
const { oneOf = [] } = config.module.rules.find(({ oneOf }) => oneOf);
return oneOf.find(({loader}) => /file-loader/.test(loader));
};
const mutateLoaderToMakePathAbsolute = (loader) => {
if(loader && loader.options && loader.options.name) {
loader.options.name = '/' + loader.options.name;
}
};
const fileLoader = getFileLoader(config);
mutateLoaderToMakePathAbsolute(fileLoader);
return config;
},
};
from presets.
Hi @ignas-sedunovas, I think I understand the problem here. We're now fully using the CRA webpack config, instead of relying on a mix of CRA and Storybook - as this caused a lot of issues.
Are you able to provide a minimal repro repo? I can then take a look and resolve this one.
from presets.
The same happens to me for images linked from CSS files
from presets.
Hi @ignas-sedunovas and @VojGin - I'm very sorry for the long time between replies. I was away on business.
I think this is likely caused by the CRA preset's implementation of file-loader, but I need to investigate more to understand why. The repo provided above will be very helpful @ignas-sedunovas.
It may be as simple as redefining the static path...
I'll be able to look later this week - but if anyone can take a look beforehand, that would be greatly appreciated.
from presets.
I'm also having this problem. In my case Storybook is not served on the root path, instead on /components
behind Nginx. How might I fix this in a relative-url manner?
I tried loader.options.name = '../../' + loader.options.name;
, which fixes the import path, but doesn't actually include the files in the output.
from presets.
This should now be solved in the latest release. Can someone please test?
If using the preset, we strongly recommend you don't have any custom Webpack config.
from presets.
@mrmckeb Thanks, confirmed that it's now working with 2.1.1.
from presets.
Thank you! WIll close this off.
from presets.
Hello. Issue is reproduced with the new versions:
"@storybook/react": "6.0.22",
"@storybook/preset-create-react-app": "3.1.4",
"react-scripts": "3.4.3"
Adjusting the config for the file-loader in main.js still fixes the issue.
from presets.
Related Issues (20)
- [Bug] CRA does not print eslint errors to terminal anylonger
- [Bug] CRA preset does not support ES2020 dependencies HOT 2
- Where are the tests for your presets?
- V3.2.0 works but V4.0.0 does not HOT 4
- [Bug] preset-create-react-app: Storybook config dir webpack override breaks default CRA config
- [Bug] Install @storybook/preset-scss with default storybook's bundler 'webpack4' doesn't works HOT 5
- [Bug] CRA5, [email protected] HOT 6
- [Bug] Fails in case of using custom folder structure inside /src
- [Help] Cannot find module '@babel/plugin-proposal-private-property-in-object'
- @storybook/preset-create-react-app 4.0.1 breaks Storybook HOT 4
- [Bug]: macos - Error: Cannot find module '.../node_modules/config/webpack.config' HOT 5
- [Bug] URL from readme does not exist on the website
- [Bug] ENAMETOOLONG on "preset-create-react-app@4" package installation HOT 1
- [Bug] start-storybook breaks when tsconfig.json has comments (preset-create-react-app)
- [Bug] Package dependency HOT 4
- [Bug] Confusing error message when stories folder is outside of src.
- [Bug] cannot run storybook with CRA preset version 4.1.0. HOT 1
- @storybook/react-docgen-typescript-plugin canary dependency
- [Bug] Storybook preset function `getReactScriptsPath` has bug HOT 2
- Missing license file
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from presets.