Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Unable to display emails as stories using react-email #26615

Closed
nbrdx opened this issue Mar 22, 2024 · 3 comments
Closed

[Bug]: Unable to display emails as stories using react-email #26615

nbrdx opened this issue Mar 22, 2024 · 3 comments

Comments

@nbrdx
Copy link

nbrdx commented Mar 22, 2024

Describe the bug

An error is thrown when trying to display an email using the react-email 2.1.0 library and Storybook 8.0.3 in a Vite standalone project.

TypeError: Cannot read properties of undefined (reading 'prototype')
    at _inheritsLoose (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ESNLZ3U4.js?v=995809a4:5361:57)
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ESNLZ3U4.js?v=995809a4:5366:11
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ESNLZ3U4.js?v=995809a4:5385:10
    at node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ESNLZ3U4.js?v=995809a4:5419:9)
    at __require2 (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ZSRNYESD.js?v=995809a4:19:50)
    at node_modules/react-dom/server.node.js (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ESNLZ3U4.js?v=995809a4:12074:11)
    at __require2 (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ZSRNYESD.js?v=995809a4:19:50)
    at node_modules/react-dom/server.js (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ESNLZ3U4.js?v=995809a4:12089:22)
    at __require2 (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-ZSRNYESD.js?v=995809a4:19:50)
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@react-email_components.js?v=995809a4:27056:30

image

It works using SB7 but seems like breaking on SB8

To Reproduce

Simple vite 5 + react 18 + typescript 5 project
Storybook 8
react-email 2.1.0

System

Storybook Environment Info:

  System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 3.5.0 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm <----- active
    pnpm: 8.11.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.3 => 8.0.3 
    @storybook/addon-interactions: ^8.0.3 => 8.0.3 
    @storybook/addon-links: ^8.0.3 => 8.0.3 
    @storybook/addon-onboarding: ^8.0.3 => 8.0.3 
    @storybook/blocks: ^8.0.3 => 8.0.3 
    @storybook/react: ^8.0.3 => 8.0.3 
    @storybook/react-vite: ^8.0.3 => 8.0.3 
    @storybook/test: ^8.0.3 => 8.0.3 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.3 => 8.0.3

Additional context

No response

@stas-demydiuk
Copy link

stas-demydiuk commented Mar 25, 2024

Seems like the issue happens on react-dom/server import, the following snippet in the story file will cause the same issue

import ReactDom from 'react-dom/server';

console.log(ReactDom.renderToString(<div>Test</div>));

works fine in SB7 and breaks after upgrading to SB8

in SB7 the 'react-dom/server' import resolves to node_modules/react-dom/server.browser.js while in SB8 the same import resolves to node_modules/react-dom/server.js which is a version for nodejs

Vite config:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    sourcemap: true
  },
  plugins: [react()],
});

@stas-demydiuk
Copy link

The issue has been addressed in storybook 8.0.5 (#26557)

@nbrdx
Copy link
Author

nbrdx commented Apr 2, 2024

Nice, I can confirm the issue has been fixed in 8.0.5 !
Closing the issue

@nbrdx nbrdx closed this as completed Apr 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants