breaking: remove webpack (#10867)

This PR is a first attempt at removing webpack from the framework. I started with just removing the bundler config option and kept pulling the threads until it got to this stage. This will have touched a **lot** of files and could in theory be broken down into smaller PRs if we find the need to. This will be a breaking change. The follow are the breaking changes I have identified: 1. `prebuildWebFile` is function no longer exported from `@redwoodjs/babel-config` package 2. `@redwoodjs/cli-storybook` has been removed 3. `yarn rw build` no longer accepts the `--stats` flag 4. `yarn rw dev` no longer accepts the `--watchNodeModules` flag 5. `yarn rw setup custom-web-index` command has been removed 6. `yarn rw setup webpack` has been removed 7. `@redwoodjs/core` no longer provides `@redwoodjs/core/config/*` files 8. The `web.bundler` TOML config option has been removed 9. `@redwoodjs/testing` no longer provides storybook config files 10. `@redwoodjs/testing` no longer provides a `StorybookProvider` 11. The `webpack` bin has been removed from `@redwoodjs/web` **WIP** - [x] Fix `rw test web` command - [x] Fix storybook smoke test (move over to storybook-vite) - [x] Update docs - [x] Create changeset entry - [x] Go through the TODO(jgmw) and address them: - [x] `packages/babel-config/src/api.ts` - [x] `packages/babel-config/src/plugins/babel-plugin-redwood-routes-auto-loader.ts` - [x] `packages/cli/src/commands/dev.js` - [x] `packages/prerender/src/babelPlugins/babel-plugin-redwood-prerender-media-imports.ts` - [x] `packages/project-config/src/paths.ts` - [x] `packages/testing/src/web/fileMock.ts` - [x] `packages/vite/src/build/__tests__/nestedPages.test.ts` - [x] `packages/vite/src/lib/envVarDefinitions.ts` - [x] `packages/vite/src/lib/registerFwGlobalsAndShims.ts` - [x] `packages/web/src/assetImports.ts` - [x] `packages/web/src/config.ts` - [x] Edit required checks on the repo settings **Follow up items** 1. Update storybook documentation --------- Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>
redwoodjs · Jul 19, 2024 · 111c6ef · 111c6ef
1 parent 4e13f10
commit 111c6ef
Show file tree

Hide file tree

Showing 116 changed files with 615 additions and 6,953 deletions.
diff --git a/.changesets/10867.md b/.changesets/10867.md
@@ -0,0 +1,17 @@
+- breaking: remove webpack (#10867) by @Josh-Walker-GM
+
+This PR removes support for webpack. 
+
+---
+To the person releasing, the follow are the breaking changes I have identified:
+1. `prebuildWebFile` is function no longer exported from `@redwoodjs/babel-config` package
+2. `@redwoodjs/cli-storybook` has been removed
+3. `yarn rw build` no longer accepts the `--stats` flag
+4. `yarn rw dev` no longer accepts the `--watchNodeModules` flag
+5. `yarn rw setup custom-web-index` command has been removed
+6. `yarn rw setup webpack` has been removed
+7. `@redwoodjs/core` no longer provides `@redwoodjs/core/config/*` files
+8. The `web.bundler` TOML config option has been removed
+9. `@redwoodjs/testing` no longer provides storybook config files
+10. `@redwoodjs/testing` no longer provides a `StorybookProvider`
+11. The `webpack` bin has been removed from `@redwoodjs/web`
diff --git a/.github/actions/set-up-test-project/action.yaml b/.github/actions/set-up-test-project/action.yaml
@@ -6,9 +6,6 @@ runs:
   main: 'setUpTestProject.mjs'
 
 inputs:
-  bundler:
-    description: The bundler to use (vite or webpack)
-    default: vite
   canary:
     description: Upgrade the project to canary?
     default: "false"

diff --git a/.github/actions/set-up-test-project/setUpTestProject.mjs b/.github/actions/set-up-test-project/setUpTestProject.mjs
@@ -20,13 +20,8 @@ const TEST_PROJECT_PATH = path.join(
 
 core.setOutput('test-project-path', TEST_PROJECT_PATH)
 
-const bundler = core.getInput('bundler')
-
 const canary = core.getInput('canary') === 'true'
-
-
 console.log({
-  bundler,
   canary
 })
 
@@ -73,22 +68,6 @@ const execInProject = createExecWithEnvInCwd(TEST_PROJECT_PATH)
  * @returns {Promise<void>}
  */
 async function sharedTasks() {
-  console.log({ bundler })
-  console.log()
-
-  if (bundler === 'webpack') {
-    console.log(`Setting the bundler to ${bundler}`)
-    console.log()
-
-    const redwoodTOMLPath = path.join(TEST_PROJECT_PATH, 'redwood.toml')
-    const redwoodTOML = fs.readFileSync(redwoodTOMLPath, 'utf-8')
-    const redwoodTOMLWithWebpack = redwoodTOML.replace('[web]\n', '[web]\n  bundler = "webpack"\n')
-    fs.writeFileSync(redwoodTOMLPath, redwoodTOMLWithWebpack)
-
-    // There's an empty line at the end of the redwood.toml file, so no need to console.log after.
-    console.log(fs.readFileSync(redwoodTOMLPath, 'utf-8'))
-  }
-
   console.log('Generating dbAuth secret')
   const { stdout } = await execInProject(
     'yarn rw g secret --raw',

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -121,11 +121,7 @@ jobs:
   tutorial-e2e:
     needs: check
 
-    strategy:
-      matrix:
-        bundler: [vite, webpack]
-
-    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 20 latest
+    name: 🌲 Tutorial E2E / node 20 latest
     runs-on: ubuntu-latest
 
     steps:
@@ -148,7 +144,6 @@ jobs:
           git config --global user.name "Your Name"
 
           ./tasks/run-e2e "$project_path" \
-            --bundler ${{ matrix.bundler }} \
             --no-build-framework \
             --no-start
 
@@ -173,7 +168,7 @@ jobs:
       - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: ${{ matrix.bundler }}-logs
+          name: logs
           path: |
             ${{ steps.crwa.outputs.project-path }}/dev_server.log
             ${{ steps.crwa.outputs.project-path }}/e2e.log
@@ -182,11 +177,7 @@ jobs:
     needs: detect-changes
     if: needs.detect-changes.outputs.code == 'false'
 
-    strategy:
-      matrix:
-        bundler: [vite, webpack]
-
-    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 20 latest
+    name: 🌲 Tutorial E2E / node 20 latest
     runs-on: ubuntu-latest
 
     steps:
@@ -198,9 +189,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
+    name: 🔄 Smoke tests / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     env:
@@ -217,8 +207,6 @@ jobs:
       - name: 🌲 Set up test project
         id: set-up-test-project
         uses: ./.github/actions/set-up-test-project
-        with:
-          bundler: ${{ matrix.bundler }}
         env:
           REDWOOD_DISABLE_TELEMETRY: 1
           YARN_ENABLE_IMMUTABLE_INSTALLS: false
@@ -278,9 +266,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
+    name: 🔄 Smoke tests / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -292,9 +279,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests React 18 / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
+    name: 🔄 Smoke tests React 18 / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     env:
@@ -330,8 +316,6 @@ jobs:
       - name: 🌲 Set up test project for React 18
         id: set-up-test-project-react-18
         uses: ./.github/actions/set-up-test-project
-        with:
-          bundler: ${{ matrix.bundler }}
         env:
           REDWOOD_DISABLE_TELEMETRY: 1
           YARN_ENABLE_IMMUTABLE_INSTALLS: false
@@ -391,9 +375,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests React 18 / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
+    name: 🔄 Smoke tests React 18 / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -446,7 +429,7 @@ jobs:
         working-directory: ${{ steps.set-up-test-project.outputs.test-project-path }}
 
       - name: Run "rw storybook"
-        run: yarn rw sb --smoke-test
+        run: yarn rw sbv --smoke-test
         working-directory: ${{ steps.set-up-test-project.outputs.test-project-path }}
 
       - name: Run "rw exec"
@@ -667,7 +650,6 @@ jobs:
         id: set-up-test-project
         uses: ./.github/actions/set-up-test-project
         with:
-          bundler: vite
           canary: true
         env:
           REDWOOD_DISABLE_TELEMETRY: 1
@@ -739,7 +721,6 @@ jobs:
         id: set-up-test-project
         uses: ./.github/actions/set-up-test-project
         with:
-          bundler: vite
           canary: true
         env:
           REDWOOD_DISABLE_TELEMETRY: 1

diff --git a/docs/docs/builds.md b/docs/docs/builds.md
@@ -34,4 +34,4 @@ Each lambda function in `./api/dist/functions` is parsed by zip-it-and-ship-it r
 
 ## Web
 
-The web side of Redwood is packaged by Webpack into the `./web/dist` folder.
+The web side of Redwood is built by Vite into the `./web/dist` folder.
diff --git a/docs/docs/cli-commands.md b/docs/docs/cli-commands.md
@@ -69,7 +69,7 @@ Build for production.
 yarn redwood build [side..]
 ```
 
-We use Babel to transpile the api side into `./api/dist` and Webpack to package the web side into `./web/dist`.
+We use Babel to transpile the api side into `./api/dist` and Vite to package the web side into `./web/dist`.
 
 | Arguments & Options | Description                                                                                                                                                                 |
 | :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -190,7 +190,7 @@ Start development servers for api and web.
 yarn redwood dev [side..]
 ```
 
-`yarn redwood dev api` starts the Redwood dev server and `yarn redwood dev web` starts the Webpack dev server with Redwood's config.
+`yarn redwood dev api` starts the Redwood dev server and `yarn redwood dev web` starts the Vite dev server with Redwood's config.
 
 | Argument           | Description                                                                                                                                                                                 |
 | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -214,7 +214,7 @@ $ /redwood-app/node_modules/.bin/dev-server
 15:04:51 api | ► http://localhost:8911/graphql/
 ```
 
-Using `--forward` (alias `--fwd`), you can pass one or more Webpack Dev Server [config options](https://webpack.js.org/configuration/dev-server/). The following will run the dev server, set the port to `1234`, and disable automatic browser opening.
+Using `--forward` (alias `--fwd`), you can pass one or more Vite Dev Server [config options](https://vitejs.dev/guide/cli#vite). The following will run the dev server, set the port to `1234`, and disable automatic browser opening.
 
 ```bash
 ~/redwood-app$ yarn redwood dev --fwd="--port=1234 --open=false"
@@ -226,7 +226,7 @@ You may need to access your dev application from a different host, like your mob
 ~/redwood-app$ yarn redwood dev --fwd="--allowed-hosts all"
 ```
 
-For the full list of Webpack Dev Server settings, see [this documentation](https://webpack.js.org/configuration/dev-server/).
+For the full list of Vite Dev Server settings, see [this documentation](https://vitejs.dev/guide/cli#vite).
 
 For the full list of Server Configuration settings, see [this documentation](app-configuration-redwood-toml.md#api).
 
@@ -1756,7 +1756,6 @@ yarn redwood setup <category>
 | `package`          | Peform setup actions by running a third-party npm package                                  |
 | `tsconfig`         | Add relevant tsconfig so you can start using TypeScript                                    |
 | `ui`               | Set up a UI design or style library                                                        |
-| `webpack`          | Set up a webpack config file in your project so you can add custom config                  |
 
 ### setup auth
 
@@ -1788,25 +1787,6 @@ yarn redwood setup cache <client>
 | `client`            | Name of the client to configure, `memcached` or `redis` |
 | `--force, -f`       | Overwrite existing files                                |
 
-### setup custom-web-index
-
-:::warning This command only applies to projects using Webpack
-
-As of v6, all Redwood projects use Vite by default.
-When switching projects to Vite, we made the decision to add the the entry file, `web/src/entry.client.{jsx,tsx}`, back to projects.
-
-:::
-
-Redwood automatically mounts your `<App />` to the DOM, but if you want to customize how that happens, you can use this setup command to generate an `index.js` file in `web/src`.
-
-```
-yarn redwood setup custom-web-index
-```
-
-| Arguments & Options | Description              |
-| :------------------ | :----------------------- |
-| `--force, -f`       | Overwrite existing files |
-
 ### setup generator
 
 Copies a given generator's template files to your local app for customization. The next time you generate that type again, it will use your custom template instead of Redwood's default.

diff --git a/docs/docs/custom-web-index.md b/docs/docs/custom-web-index.md
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -105,7 +105,6 @@ module.exports = {
         'contributing-walkthrough',
         'cors',
         'create-redwood-app',
-        'custom-web-index',
         'data-migrations',
         {
           type: 'category',

diff --git a/packages/auth-providers/supabase/web/ambient.d.ts b/packages/auth-providers/supabase/web/ambient.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-var */
 
 declare global {
-  // Provided by Vite.config, or Webpack in the user's project
+  // Provided by Vite.config
   var RWJS_ENV: {
     RWJS_API_GRAPHQL_URL: string
     /** URL or absolute path to serverless functions */

diff --git a/packages/babel-config/dist.test.ts b/packages/babel-config/dist.test.ts
@@ -31,7 +31,6 @@ describe('dist', () => {
         "getWebSideDefaultBabelConfig": [Function],
         "getWebSideOverrides": [Function],
         "parseTypeScriptConfigFiles": [Function],
-        "prebuildWebFile": [Function],
         "registerApiSideBabelHook": [Function],
         "registerBabel": [Function],
         "registerWebSideBabelHook": [Function],

diff --git a/packages/babel-config/src/common.ts b/packages/babel-config/src/common.ts
@@ -7,6 +7,7 @@ import { parseConfigFileTextToJson } from 'typescript'
 import { getPaths } from '@redwoodjs/project-config'
 
 import { getWebSideBabelPlugins } from './web'
+import type { Flags as WebFlags } from './web'
 
 const pkgJson = require('../package.json')
 
@@ -17,6 +18,7 @@ export interface RegisterHookOptions {
    */
   plugins?: PluginItem[]
   overrides?: TransformOptions['overrides']
+  options?: WebFlags
 }
 
 interface BabelRegisterOptions extends TransformOptions {
@@ -76,9 +78,7 @@ export const getCommonPlugins = (): Array<[string, PluginOptions]> => {
 // It's related to yarn workspaces to be or not to be
 export const getRouteHookBabelPlugins = () => {
   return [
-    ...getWebSideBabelPlugins({
-      forVite: true,
-    }),
+    ...getWebSideBabelPlugins(),
     [
       'babel-plugin-module-resolver',
       {

diff --git a/packages/babel-config/src/index.ts b/packages/babel-config/src/index.ts
@@ -19,7 +19,6 @@ export {
   getWebSideBabelPresets,
   getWebSideDefaultBabelConfig,
   getWebSideOverrides,
-  prebuildWebFile,
   registerWebSideBabelHook,
 } from './web'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,4 +34,4 @@ Each lambda function in `./api/dist/functions` is parsed by zip-it-and-ship-it r

		## Web

		The web side of Redwood is packaged by Webpack into the `./web/dist` folder.
		The web side of Redwood is built by Vite into the `./web/dist` folder.