Estoy experimentando con la biblioteca de componentes POC creada con Vite + Storybook + React (JS, no TS). El entorno de desarrollo funciona muy bien, pero quiero poder compilar en una carpeta dist. Ahí es cuando me encuentro con este error...

[rollup-plugin-dynamic-import-variables] Identifier 'React' has already been declared

... atribuido al único componente en mi POC, Button.jsx . Que solo importa Reaccionar una vez aquí:

 import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; ...

Si elimino import React from "react"; a partir del archivo anterior se construye la aplicación. Pero eso me parece mal. No debería tener que eliminar una importación válida, ¿verdad?

Debe haber algo que estoy haciendo mal en el lado de la configuración que Frankensteined de varios tutoriales sobre el tema ... muy probablemente.

vite.config.js:

 import path from "path"; import react from '@vitejs/plugin-react' import { defineConfig } from "vite"; const isExternal = (id) => !id.startsWith(".") && !path.isAbsolute(id); export default defineConfig(() => ({ esbuild: { jsxInject: "import React from 'react'", }, build: { lib: { entry: path.resolve(__dirname, "src/index.js"), name: "Bae Jay UI", fileName: (format) => `bae-jay-ui.${format}.js`, formats: ["es", "cjs"], }, rollupOptions: { external: isExternal, }, plugins: [ react(), ], }, }));

paquete.json:

 ... "scripts": { ... "build": "vite build", ... }, ...

 ... "devDependencies": { "@babel/core": "^7.16.12", "@storybook/addon-actions": "^6.5.0-alpha.23", "@storybook/addon-essentials": "^6.5.0-alpha.23", "@storybook/addon-links": "^6.5.0-alpha.23", "@storybook/react": "^6.5.0-alpha.23", "babel-loader": "^8.2.3", "react": "^17.0.2", "react-dom": "^17.0.2", "storybook-builder-vite": "^0.1.13", "vite": "^2.7.13" }