CODEWITHSUNDEEP
javascriptstorybookrollupvite
Ecksley
Ecksley

Reputation: 344

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). The dev environment works great, but I want to be able to build to a dist folder. 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. Which only imports React the one time here:

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

If I delete 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:

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

Upvotes: 0

Views: 2235

Answers (1)

Ecksley
Ecksley

Reputation: 344

So... in the process of reviewing this post I noticed the vite.config.js was importing react:

    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 🍻

Upvotes: 2

Related Questions