SyntaxError while importing react-dom / react

[p-sw]

Describe the bug
It throws SyntaxError everytime I load localhost:5314.

  <-- GET /
file:///home/shinwoo-park/WebstormProjects/ui-docs/dist/rsc/App.js:5
import ReactDOM, { createPortal } from 'react-dom';
                   ^^^^^^^^^^^^
SyntaxError: Named export 'createPortal' not found. The requested module 'react-dom' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-dom';
const { createPortal } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async file:///home/shinwoo-park/WebstormProjects/ui-docs/node_modules/.pnpm/seia.js@file+..+seia+packages+seia+seia.js-0.1.2.tgz_@[email protected][email protected]_3adzscgslwpexx6cukdynv7xtu/node_modules/seia.js/dist/worker.js:11:20
  --> GET / 500 142ms

To Reproduce
Here is a repository I'm working on.

1. Install dependencies
2. Build (success without any error or warning)
3. Start
4. Open localhost:5314 -> Error

Expected behavior
Success with no error, or throws any error caused by react-router-dom

Desktop (please complete the following information):

• OS: Linux, Ubuntu 22
• Browser: Firefox

[p-sw]

Minimal way to reproduce error

1. mkdir minitest
2. cd minitest
3. pnpm init
4. pnpm install [email protected] [email protected] seia.js
5. pnpm add -D @types/node @types/react @types/react-dom vite typescript
6. mkdir src
7. touch src/App.tsx
8. vim src/App.tsx
9. add content to src/App.tsx:

import { createPortal } from "react-dom";

export default function App() {
  return createPortal(<div>Hello</div>, document.body);
}

10. vim package.json
11. add "type": "module"
12. pnpm seia build
13. pnpm seia start
14. Get error

  <-- GET /
file:///home/shinwoo-park/Documents/projects/minitest/dist/rsc/App.js:1
import { createPortal } from 'react-dom';
         ^^^^^^^^^^^^
SyntaxError: Named export 'createPortal' not found. The requested module 'react-dom' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-dom';
const { createPortal } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async file:///home/shinwoo-park/Documents/projects/minitest/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]_imdrh2fqohes5aqxcu753repva/node_modules/seia.js/dist/worker.js:11:20
  --> GET / 500 75ms

[abiriadev]

@p-sw Thank you for reporting! I reproduced the same issue, and I will immediately work on it.

[abiriadev]

@p-sw It looks like you are trying to use createPortal in server components.

Will you try this instead?

'use client'

import { createPortal } from "react-dom";

export default function App() {
  return typeof document !== "undefined" ? createPortal(<div>Hello</div>, document.body) : null
}

[abiriadev]

Ah, one more. You need to add tsconfig.json at the root containing this line:

{
	"compilerOptions": {
		"jsx": "react-jsx"
	}
}

This is required since you manually setup your project with mkdir, and Vite's default JSX transform rule is react. I will make seia to use react-jsx by default later!