facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.61k stars 46.43k forks source link

`react-server-dom-webpack/node-register` not finding directives in IIFEs #28961

Open jackyef opened 4 months ago

jackyef commented 4 months ago

Summary

react-server-dom-webpack/node-register doesn't find use client directive in IIFEs.

Consider the following code

code ```js (() => { "use strict"; "use client"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod)); var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var Counter_client_exports = {}; __export(Counter_client_exports, { Counter: () => Counter }); module.exports = __toCommonJS(Counter_client_exports); var import_jsx_dev_runtime = require("react/jsx-dev-runtime"); var React = __toESM(require("react")); console.log("Counter.client.tsx", React.useState); function Counter() { const [count, setCount] = React.useState(0); return (0, import_jsx_dev_runtime.jsxDEV)("div", { children: [(0, import_jsx_dev_runtime.jsxDEV)("h1", { children: "Counter" }, void 0, false, { fileName: "/Users/jackyef/Personal/Projects/beract/src/app/Counter.client.tsx", lineNumber: 17, columnNumber: 7 }, this), (0, import_jsx_dev_runtime.jsxDEV)("p", { children: ["Count: ", count] }, void 0, true, { fileName: "/Users/jackyef/Personal/Projects/beract/src/app/Counter.client.tsx", lineNumber: 18, columnNumber: 7 }, this), (0, import_jsx_dev_runtime.jsxDEV)("button", { onClick: () => setCount(c => c + 1), children: "Increment" }, void 0, false, { fileName: "/Users/jackyef/Personal/Projects/beract/src/app/Counter.client.tsx", lineNumber: 19, columnNumber: 7 }, this)] }, void 0, true, { fileName: "/Users/jackyef/Personal/Projects/beract/src/app/Counter.client.tsx", lineNumber: 16, columnNumber: 5 }, this); } __name(Counter, "Counter"); })(); ```

This loop will not find the use client directive because it isn't searching deep enough.

Is this an expected behavior?

For what it's worth, I am not yet using Webpack to do compilation here, I am using tsx watch for fast setup.

"react": "19.0.0-canary-e3ebcd54b-20240405",
"react-dom": "19.0.0-canary-e3ebcd54b-20240405",
"react-server-dom-webpack": "19.0.0-canary-e3ebcd54b-20240405",
github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

jackyef commented 1 month ago

bump