Skip to content

fix(template-react-ts): work with newer Node#10304

Merged
chenjiahan merged 1 commit intoweb-infra-dev:mainfrom
vegerot:pr10304
May 12, 2025
Merged

fix(template-react-ts): work with newer Node#10304
chenjiahan merged 1 commit intoweb-infra-dev:mainfrom
vegerot:pr10304

Conversation

@vegerot
Copy link
Contributor

@vegerot vegerot commented May 8, 2025

Summary:
On my machine running Node v23.11.0, running this example fails with two errors:

  1. __dirname is undefined
  2. RefreshPlugin is an object instead of a class

This commit fixes both of these errors.

Test Plan:

  1. use Node v23.11.0
  2. run pnpm create rspack@latest
  3. select react-typescript config
  4. run pnpm run dev

Before this commit: it doesn't work
After this commit: it works

@vegerot vegerot requested a review from chenjiahan as a code owner May 8, 2025 18:11
@netlify
Copy link

netlify bot commented May 8, 2025

Deploy Preview for rspack canceled.

Built without sensitive environment variables

Name Link
🔨 Latest commit 49f0140
🔍 Latest deploy log https://app.netlify.com/sites/rspack/deploys/68215e71dc4bc20008d7f309

@github-actions github-actions bot added the release: bug fix release: bug related release(mr only) label May 8, 2025
@codspeed-hq
Copy link

codspeed-hq bot commented May 9, 2025

CodSpeed Performance Report

Merging #10304 will not alter performance

Comparing vegerot:pr10304 (49f0140) with main (90855cf)

Summary

✅ 11 untouched benchmarks

Copy link
Member

@chenjiahan chenjiahan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change breaks Node < 23, we need to find another way to support Node >= 23

  • Node 18

image

  • Node 22

image

@hardfist
Copy link
Contributor

hardfist commented May 9, 2025

related to nodejs/node#57298 (comment) and open-telemetry/opentelemetry-js#5415 it seems there's no ideal way to handle this right now, maybe we can generate different template for Node.js >23

@chenjiahan
Copy link
Member

@hardfist It seems that ts-node will have this problem. Rsbuild uses jiti and it works fine.

@chenjiahan
Copy link
Member

Here is another issue with ts-node: rstackjs/rspack-plugin-react-refresh#33

@vegerot
Copy link
Contributor Author

vegerot commented May 9, 2025

In the meantime I suggest we make two templates that the create script will automatically pick between. Right now people using the latest version of Node will run into problems starting new projects.

@hardfist
Copy link
Contributor

hardfist commented May 12, 2025

@vegerot I fix the template by

  • remove __dirname: which is unnecessary
  • change import RefreshPlugin from '@rspack/plugin-react-refresh' to import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh' which can be compatible with esm&cjs

it's a temporary fix for the esm support and we still need a better way to support esm but it needs big refactor and will be fixed in separate PR

Copy link
Member

@chenjiahan chenjiahan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@chenjiahan chenjiahan enabled auto-merge (squash) May 12, 2025 02:44
@chenjiahan chenjiahan merged commit ff0a23b into web-infra-dev:main May 12, 2025
35 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release: bug fix release: bug related release(mr only)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants