chore(esm/cjs): Build rwjs/web to cjs with new build system (#10826)

.eslintrc.js

@@ -69,7 +69,6 @@ module.exports = {
         browser: true,
       },
       globals: {
-        React: 'readonly', // We auto-import React via Babel.
         window: 'off', // Developers should use `global` instead of window. Since window is undefined in NodeJS.
       },
     },

packages/cli/src/commands/setup/custom-web-index/custom-web-index-handler.js

@@ -35,7 +35,7 @@ export const handler = async ({ force }) => {
                 path.join(
                   getPaths().base,
                   // NOTE we're copying over the index.js before babel transform
-                  'node_modules/@redwoodjs/web/src/entry/index.js',
+                  'node_modules/@redwoodjs/web/src/entry/index.jsx',
                 ),
               )
               .toString()

packages/forms/src/FormError.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import type { GraphQLError } from 'graphql'
 
 export interface ServerParseError extends Error {

packages/framework-tools/src/buildDefaults.ts

@@ -21,7 +21,7 @@ export const defaultBuildOptions: ESBuildOptions = {
   metafile: true,
 }
 
-export const defaultPatterns = ['./src/**/*.{ts,js,tsx,jsx}']
+export const defaultPatterns = ['./src/**/*.{ts,js,tsx,jsx,mts}']
 export const defaultIgnorePatterns = [
   '**/__tests__',
   '**/*.test.{ts,js}',

packages/router/src/rsc-link.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 export interface LinkProps {
   to: string

packages/vite/src/plugins/vite-plugin-remove-from-bundle.ts

@@ -29,9 +29,8 @@ export default function removeFromBundle(
   }
 }
 
-// Currently configured for CJS only.
 const EMPTY_MODULE = {
-  code: `module.exports = {}`,
+  code: `export default {};`,
 }
 
 export function excludeOnMatch(modulesToExclude: ModulesToExclude, id: string) {

packages/web/build.mts

@@ -0,0 +1,48 @@
+// import { writeFileSync } from 'node:fs'
+
+import {
+  build,
+  defaultBuildOptions,
+  defaultIgnorePatterns,
+} from '@redwoodjs/framework-tools'
+
+// CJS build
+await build({
+  entryPointOptions: {
+    ignore: [...defaultIgnorePatterns],
+  },
+  buildOptions: {
+    ...defaultBuildOptions,
+    // ⭐ No special tsconfig here
+    // outdir: 'dist/cjs', DONT DO THIS JUST YET
+    outdir: 'dist',
+    packages: 'external',
+  },
+})
+
+/**  THIS IS IN PART 2 ~ making this a dual module
+Will enable in follow up PR
+
+ESM build
+await build({
+  entryPointOptions: {
+    ignore: [...defaultIgnorePatterns, 'src/entry/**'],
+  },
+  buildOptions: {
+    ...defaultBuildOptions,
+    // ⭐ No special tsconfig here
+    // tsconfig: 'tsconfig.build.json',
+    format: 'esm',
+    packages: 'external',
+  },
+})
+
+// Place a package.json file with `type: commonjs` in the dist folder so that
+// all .js files are treated as CommonJS files.
+writeFileSync('dist/cjs/package.json', JSON.stringify({ type: 'commonjs' }))
+
+// Place a package.json file with `type: module` in the dist/esm folder so that
+// all .js files are treated as ES Module files.
+writeFileSync('dist/package.json', JSON.stringify({ type: 'module' }))
+
+*/

packages/web/package.json

@@ -26,10 +26,9 @@
     "src/entry"
   ],
   "scripts": {
-    "build": "yarn build:js && yarn build:types",
-    "build:js": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\"",
+    "build": "tsx ./build.mts && yarn build:types",
     "build:pack": "yarn pack -o redwoodjs-web.tgz",
-    "build:types": "tsc --build --verbose",
+    "build:types": "tsc --build --verbose tsconfig.json",
     "build:watch": "nodemon --watch src --ext \"js,jsx,ts,tsx\" --ignore dist --exec \"yarn build\"",
     "prepublishOnly": "NODE_ENV=production yarn build",
     "test": "vitest run",
@@ -55,6 +54,7 @@
     "@babel/core": "^7.22.20",
     "@babel/plugin-transform-runtime": "7.24.3",
     "@babel/runtime": "7.24.5",
+    "@redwoodjs/framework-tools": "workspace:*",
     "@rollup/plugin-babel": "6.0.4",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "14.3.1",
@@ -64,6 +64,7 @@
     "react": "19.0.0-beta-04b058868c-20240508",
     "react-dom": "19.0.0-beta-04b058868c-20240508",
     "tstyche": "2.0.0",
+    "tsx": "4.15.6",
     "typescript": "5.4.5",
     "vitest": "1.6.0"
   },

packages/web/src/apollo/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import type {
   ApolloClientOptions,
   setLogVerbosity,

packages/web/src/apollo/suspense.tsx

@@ -7,7 +7,7 @@
  * Eventually we will have one ApolloProvider, not multiple.
  */
 
-import { useContext } from 'react'
+import React, { useContext } from 'react'
 
 import type {
   ApolloCache,

packages/web/src/components/DevFatalErrorPage.tsx

@@ -7,7 +7,7 @@ if (typeof window !== 'undefined') {
   window.Buffer = window.Buffer || require('buffer').Buffer
 }
 
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 import type { GraphQLError } from 'graphql'
 import StackTracey from 'stacktracey'

packages/web/src/components/FatalErrorBoundary.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 type PropsInfallibleErrorBoundary = Partial<{
   children: React.ReactNode
 }>

packages/web/src/components/GraphQLHooksProvider.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import type {
   OperationVariables,
   useBackgroundQuery as apolloUseBackgroundQuery,

packages/web/src/components/MetaTags.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { Helmet as HelmetHead } from 'react-helmet-async'
 
 // Ideally we wouldn't include this for non experiment builds

packages/web/src/components/RedwoodProvider.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 
 interface RedwoodProviderProps {

packages/web/src/components/cell/createCell.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { fragmentRegistry } from '../../apollo/fragmentRegistry.js'
 import { getOperationName } from '../../graphql.js'
 /**

packages/web/src/components/cell/createServerCell.tsx

@@ -1,6 +1,6 @@
 /// <reference types="react/experimental" />
 
-import { Suspense } from 'react'
+import React, { Suspense } from 'react'
 
 // Class components are not supported on the server
 // https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components

packages/web/src/components/cell/createSuspendingCell.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react'
+import React, { Suspense } from 'react'
 
 import type { OperationVariables, QueryReference } from '@apollo/client'
 import { useApolloClient } from '@apollo/client'

packages/web/src/components/htmlTags.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { Fragment } from 'react'
 
 declare const window: {

packages/web/src/entry/index.js → packages/web/src/entry/index.jsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from '~redwood-app-root'

yarn.lock

@@ -8911,6 +8911,7 @@ __metadata:
     "@babel/runtime": "npm:7.24.5"
     "@babel/runtime-corejs3": "npm:7.24.5"
     "@redwoodjs/auth": "workspace:*"
+    "@redwoodjs/framework-tools": "workspace:*"
     "@rollup/plugin-babel": "npm:6.0.4"
     "@testing-library/jest-dom": "npm:6.4.6"
     "@testing-library/react": "npm:14.3.1"
@@ -8928,6 +8929,7 @@ __metadata:
     stacktracey: "npm:2.1.8"
     ts-toolbelt: "npm:9.6.0"
     tstyche: "npm:2.0.0"
+    tsx: "npm:4.15.6"
     typescript: "npm:5.4.5"
     vitest: "npm:1.6.0"
   peerDependencies: