Mi error en primer lugar es exactamente el mismo que se describe aquí . Estoy usando el paquete @svgr/webpack para importar mis archivos .svg como un componente React así:
import Shop from './icons/shop.svg' return <Shop />Funciona bien en mi aplicación, pero cuando traté de hacer lo mismo en Storybook , aparece este error:
Error al ejecutar 'createElement' en 'Documento': el nombre de etiqueta proporcionado ('static/media/shop.61b51e05.svg') no es un nombre válido.
Así que agregué el cargador a mi archivo .storybook/main.js para extender la configuración predeterminada del paquete web de Storybook:
// ... webpackFinal: async config => { config.module.rules.push({ test: /\.svg$/, enforce: 'pre', loader: require.resolve('@svgr/webpack'), }); El error aún ocurrió, así que traté de anular la prueba predeterminada de Storybook para archivos .svg como se sugiere en la respuesta de la pregunta anterior :
const fileLoaderRule = config.module.rules.find(rule => { rule.test !== undefined ? rule.test.test('.svg') : '' }); fileLoaderRule.exclude = /\.svg$/;Pero luego me sale este error:
TypeError: no se puede establecer la propiedad 'excluir' de indefinido
Así que decidí hacer un archivo console.log de rule.test y, curiosamente, las únicas pruebas predeterminadas que provienen de la configuración de Storybook son las tesis:
{ test: /\.md$/, ... } { test: /\.(js|mjs|jsx|ts|tsx)$/, ... } { test: /\.js$/, ... } { test: /\.(stories|story).mdx$/, ... } { test: /\.mdx$/, ... } { test: /\.(stories|story)\.[tj]sx?$/, ... } { test: /\.(ts|tsx)$/, ... } Como puede ver, no hay ninguna prueba que afecte a un archivo .svg . Entonces, ¿alguien tiene una idea de por qué mi configuración no funciona usando:
{ test: /\.svg$/, enforce: 'pre', loader: require.resolve('@svgr/webpack'), } La versión de mi libro de cuentos es 6.0.0-beta.3 .
Su devolución de llamada de find siempre devuelve undefined . Cámbielo para devolver el bool correcto:
const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg')); De todos modos, la configuración predeterminada del libro de cuentos debería tener una regla para las imágenes con esta prueba: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/ . Entonces su código (pero con la devolución de llamada de búsqueda correcta) funciona bien para mí.
main.js final:
module.exports = { stories: ['../src/**/*.stories.[tj]s'], webpackFinal: config => { // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/ const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg')); fileLoaderRule.exclude = /\.svg$/; config.module.rules.push({ test: /\.svg$/, enforce: 'pre', loader: require.resolve('@svgr/webpack'), }); return config; } };Solo impórtalo así:
import { ReactComponent as Shop } from './icons/shop.svg'Lo está transformando como un componente React para que pueda pasarle propiedades:
<Shop fill="tomato" {...args} />Como estoy usando webpack@4 y, por lo tanto, @svgr/webpack@5 , tuve que usar url-loader .
module.exports = { stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'], webpackFinal: config => { // remove svg from existing rule const fileLoaderRule = config.module.rules.find( (rule) => rule.test && rule.test.test('.svg') ) fileLoaderRule.exclude = /\.svg$/ config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack', 'url-loader'], }) return config } };