rollup-plugin-dynamic-import-variables Identifier 'React' 已經被聲明為 Vite + Storybook + React

Question

我正在嘗試使用 Vite + Storybook + React（JS，而不是 TS）構建的 POC 組件庫。 開發環境效果很好，但我希望能夠構建到 dist 文件夾。 那是我遇到這個錯誤的時候......

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

...歸因於我的 POC 中的一個組件Button.jsx 。 這里只導入一次 React：

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

如果我import React from "react"; 從上面的文件中構建應用程序。 但這對我來說似乎是錯誤的。 我不應該刪除有效的導入，對嗎？

我必須在配置方面做錯了什么，這是我從有關該主題的各種教程中弗蘭肯斯坦的……很可能。

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

package.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"
  }

Answer 1

所以......在審查這篇文章的過程中，我注意到vite.config.js正在導入反應：

    esbuild: {
        jsxInject: "import React from 'react'",
    },

可能使我的組件級導入重復。 這是我從教程中偷來的挑釁代碼，沒有多加考慮。 刪除這些行后，我的問題就解決了。

也許這會幫助別人。

干杯