You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import type { StorybookConfig } from '@storybook/nextjs'
import { RuleSetRule } from 'webpack';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/nextjs',
options: {},
},
staticDirs: ['../public'],
webpackFinal: async (config) => {
// TSConfig Paths
if (config.resolve) {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
]
}
config.module = config.module || {};
config.module.rules = config.module.rules || [];
// This modifies the existing image rule to exclude .svg files
// since you want to handle those files with @svgr/webpack
const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
if (imageRule) {
imageRule['exclude'] = /\.svg$/;
}
// Add rule for SVG files
config.module.rules.push({
test: /\.svg$/,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
});
return config
},
}
export default config
as soon as I add:
// This modifies the existing image rule to exclude .svg files
// since you want to handle those files with @svgr/webpack
const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
if (imageRule) {
imageRule['exclude'] = /\.svg$/;
}
the imports are working, as in, react tries to render the plain <svg tag, so at least it loaded the file (but it cant render that)
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
Storybook
main.ts
config:as soon as I add:
the imports are working, as in, react tries to render the plain
<svg
tag, so at least it loaded the file (but it cant render that)so now, we want to transform them to JSX with:
as soon as this is added, the import is now
undefined
i have tried like 10 different solutions from multiple different issues
they are often old solutions, or non-TS, or still just imports as
undefined
Additional information
The tiny svgr config addition works fine on the NextJS side, renders the icon perfectly, but not in storybook.
Beta Was this translation helpful? Give feedback.
All reactions