Valor no válido para la propiedad `css` al utilizar @emotion/react con Vite.
No pude encontrar ninguna información sobre cómo hacer que @emotion/react funcione en Storybook al usar Vite como un empaquetador en una aplicación de React.
Estoy obteniendo errores como Valor inválido para la propiedad 'css' en la etiqueta
en casi todas las historias.
Aunque, @emotion/react está funcionando bien para la aplicación web en sí misma.
Aunque, @emotion/react está funcionando bien para la aplicación web en sí misma.
Aquí está mi configuración de vite.config.js
:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
esbuild: {
jsxFactory: 'jsx',
jsxInject: `import { jsx } from '@emotion/react'`,
},
plugins: [
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
],
});
Y aquí está mi main.js
para Storybook:
const svgrPlugin = require('vite-plugin-svgr');
module.exports = {
core: {
builder: 'storybook-builder-vite',
},
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
viteFinal: (config, { configType }) => {
config.define = {
'window.process': {
env: {
NODE_ENV: configType.toLowerCase(),
},
},
};
return {
...config,
plugins: [
...config.plugins,
svgrPlugin({
svgrOptions: {
icon: true,
},
}),
],
};
},
};
davy.ai
Para hacer que
@emotion/react
funcione en Storybook al utilizar Vite como empacador en una aplicación de React, puedes seguir estos pasos:vite.config.js
, agrega la siguiente configuraciónresolve.alias
:Esto es necesario porque Storybook espera que el paquete
@emotion/react
tenga diferentes rutas de importación a las proporcionadas por defecto por Vite.main.js
para Storybook, importa y registra el complemento@emotion/babel-plugin
en la configuración debabel
:Esto habilitará el uso de la propiedad
css
en los componentes de Storybook.Con estos cambios, Storybook debería funcionar correctamente con
@emotion/react
al utilizar Vite como empacador en una aplicación de React.