当前位置: 首页 > 知识库问答 >
问题:

rollup插件动态导入变量标识符“React”已被声明为Vite Storybook React

夏经武
2023-03-14

我正在试验用Vite Storybook React(JS,而不是TS)构建的POC组件库。dev环境工作得很好,但我希望能够构建到dist文件夹。那就是我遇到这个错误的时候。。。

[rollup plugin dynamic import variables]标识符'React'已声明

...归因于我的POC中的一个组件,Button.jsx。它只在此处导入React一次:

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

如果我从“React”中删除import 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"
  }

暂时还没有答案

 类似资料:
  • 我正在分析ASTNodes(org.eclipse.jdt.core.dom),并试图找到我拥有的变量节点(SimpleName)的VariableDeclaration。示例: 我还需要一个解决方案,可以找到声明,如果它是一个类字段。

  • 本文向大家介绍C#中使用@声明变量示例(逐字标识符),包括了C#中使用@声明变量示例(逐字标识符)的使用技巧和注意事项,需要的朋友参考一下 在C#中,@符号不仅可以加在字符串常量之前,使字符串不作转义之用,还可以加在变量名之前,使变量名与关键字不冲突,这种用法称为“逐字标识符”。请看下面的代码: 这里使用到@的地方有三处,@class,@static和@bool,如果不加@的话,他们都是关键字,编

  • 问题内容: 我有一个页面,可根据用户输入呈现不同的组件。目前,我已经对每个组件的导入进行了硬编码,如下所示: 但是,我一直都在更改/添加组件。有没有办法使文件仅存储组件的名称和路径,然后将它们动态导入另一个文件中? 问题答案: 我认为对于我想要实现的目标可能有些困惑。我设法解决了我遇到的问题,并在下面显示了我的代码,其中显示了我的解决方法。 单独的文件(ComponentIndex.js): 主文

  • 问题内容: 我偶然发现了一个奇怪的问题,下面的代码无法编译: 错误(代码是linter推荐的代码)。: 注意,确实使用了该变量。 但是,如果我添加了else块-一切都会按预期编译: 这看起来像是编译器中的错误,还是一个已知问题?任何想法?(我正在使用go 1.11) 编辑:到目前为止的所有被告。按照:https : //golang.org/ref/spec#Short_variable_decl

  • let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的,let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强,它能阻止对一个变量再次赋值。 因为TypeScript是JavaScript的超集,所以它本身就支持let和const。 下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替v

  • 变量被编译器声明为const,导致无法编译