es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Valor no válido para la propiedad `css` al utilizar @emotion/react con Vite.

29 Jul, 2023 Programación

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.

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,
          },
        }),
      ],
    };
  },
};
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. En tu archivo vite.config.js, agrega la siguiente configuración resolve.alias:
    resolve: {
  alias: {
    '@emotion/core': '@emotion/react',
    '@emotion/styled': '@emotion/react',
    'emotion-theming': '@emotion/react'
  }
}

    Esto es necesario porque Storybook espera que el paquete @emotion/react tenga diferentes rutas de importación a las proporcionadas por defecto por Vite.

    1. En tu archivo main.js para Storybook, importa y registra el complemento @emotion/babel-plugin en la configuración de babel:
    babel: async options => ({
  ...options,
  presets: [...options.presets],
  plugins: [...options.plugins, '@emotion/babel-plugin']
})

    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.

Comments are closed.