[Bug] React peerDependencies crash. Normal dependencies works

[DatStorm]

What version of vite are you using?

3.2.0

System info and storybook versions

Environment Info:

System: OS: Windows 10 10.0.19042 CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics Binaries: Node: 16.12.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.35) npmPackages: @storybook/addon-actions: ^6.5.13 => 6.5.13 @storybook/addon-essentials: ^6.5.13 => 6.5.13 @storybook/addon-interactions: ^6.5.13 => 6.5.13 @storybook/addon-links: ^6.5.13 => 6.5.13 @storybook/builder-vite: ^0.2.5 => 0.2.5 @storybook/react: ^6.5.13 => 6.5.13 @storybook/testing-library: ^0.0.13 => 0.0.13

Describe the Bug

When I follow the steps described here https://storybook.js.org/blog/storybook-for-vite/ to create a new project with storybook everything works fine (React & react dom) as dependencies in package.json.

But when I try to make React & react dom a peerDependency in package.json compilation fails and no components are shown in the story.

Working:

{
    "name": "testing-storybook",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.19.6",
        "@storybook/addon-actions": "^6.5.13",
        "@storybook/addon-essentials": "^6.5.13",
        "@storybook/addon-interactions": "^6.5.13",
        "@storybook/addon-links": "^6.5.13",
        "@storybook/builder-vite": "^0.2.5",
        "@storybook/react": "^6.5.13",
        "@storybook/testing-library": "^0.0.13",
        "@types/react": "^18.0.22",
        "@types/react-dom": "^18.0.7",
        "@vitejs/plugin-react": "^2.2.0",
        "babel-loader": "^8.3.0",
        "typescript": "^4.6.4",
        "vite": "^3.2.0"
    }
}

Failing:

{
    "name": "testing-storybook",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    },
    "peerDependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.19.6",
        "@storybook/addon-actions": "^6.5.13",
        "@storybook/addon-essentials": "^6.5.13",
        "@storybook/addon-interactions": "^6.5.13",
        "@storybook/addon-links": "^6.5.13",
        "@storybook/builder-vite": "^0.2.5",
        "@storybook/react": "^6.5.13",
        "@storybook/testing-library": "^0.0.13",
        "@types/react": "^18.0.22",
        "@types/react-dom": "^18.0.7",
        "@vitejs/plugin-react": "^2.2.0",
        "babel-loader": "^8.3.0",
        "typescript": "^4.6.4",
        "vite": "^3.2.0"
    }
}

Thanks in advance.

Why you ask? Wanna build a component library and the import of the lib will already have React & react dom installed.

Link to Minimal Reproducible Example

No response

Participation

• [ ] I am willing to submit a pull request for this issue.

[IanVS]

You should add react and react-dom as devDependencies as well, so that they're present while you're working on the project.

[DatStorm]

Works when adding as devDependencies. Thanks a lot