[英]rollup-plugin-dynamic-import-variables Identifier 'React' has already been declared Vite + Storybook + React
I'm experimenting with POC component library built with Vite + Storybook + React (JS, not TS).我正在尝试使用 Vite + Storybook + React(JS,而不是 TS)构建的 POC 组件库。 The dev environment works great, but I want to be able to build to a dist folder.
开发环境效果很好,但我希望能够构建到 dist 文件夹。 That is when I encounter this error...
那是我遇到这个错误的时候......
[rollup-plugin-dynamic-import-variables] Identifier 'React' has already been declared
...attributed to the one component in my POC, Button.jsx
. ...归因于我的 POC 中的一个组件
Button.jsx
。 Which only imports React the one time here:这里只导入一次 React:
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
...
If I delete import React from "react";
如果我
import React from "react";
from the above file the application builds.从上面的文件中构建应用程序。 But that just seems wrong to me.
但这对我来说似乎是错误的。 I shouldn't have to remove a valid import, right?
我不应该删除有效的导入,对吗?
There must be something I'm doing wrong on config side which I Frankensteined from various tutorials on the topic... so likely.我必须在配置方面做错了什么,这是我从有关该主题的各种教程中弗兰肯斯坦的……很可能。
vite.config.js: 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: 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"
}
So... in the process of reviewing this post I noticed the vite.config.js
was importing react:所以......在审查这篇文章的过程中,我注意到
vite.config.js
正在导入反应:
esbuild: {
jsxInject: "import React from 'react'",
},
likely making my component level import duplicative.可能使我的组件级导入重复。 It's defiantly code I poached from a tutorial without giving it much thought.
这是我从教程中偷来的挑衅代码,没有多加考虑。 Once these lines were removed my issue was resolved.
删除这些行后,我的问题就解决了。
Maybe this will help someone else.也许这会帮助别人。
Cheers干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.