chore: finishes css pre-compilation

2024-03-10 13:53:37 -04:00
parent 4e0d90d720
commit ec8c7e5c2c
33 changed files with 332 additions and 367 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -285,3 +285,4 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode

 /build
+.swc
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
  "scripts": {
    "build": "pnpm run build:core",
    "build:all": "turbo build",
-    "build:webpack2": "webpack --config webpack.config.mjs",
    "build:core": "turbo build --filter \"!@payloadcms/plugin-*\"",
    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\" --filter \"!@payloadcms/plugin-search\" --filter \"!@payloadcms/plugin-redirects\" --filter \"!@payloadcms/plugin-nested-docs\"",
    "build:app": "next build",
@@ -72,7 +71,6 @@
    "@octokit/core": "^5.1.0",
    "@payloadcms/eslint-config": "workspace:*",
    "@playwright/test": "1.42.1",
-    "@swc-node/loader": "^1.5.0",
    "@swc/cli": "^0.1.62",
    "@swc/jest": "0.2.36",
    "@testing-library/jest-dom": "6.4.2",
@@ -102,8 +100,6 @@
    "conventional-changelog-writer": "^7.0.1",
    "copyfiles": "2.4.1",
    "cross-env": "7.0.3",
-    "css-loader": "^6.10.0",
-    "css-minimizer-webpack-plugin": "^6.0.0",
    "dotenv": "8.6.0",
    "drizzle-orm": "0.29.4",
    "execa": "5.1.1",
@@ -119,7 +115,6 @@
    "jwt-decode": "3.1.2",
    "lexical": "0.13.1",
    "lint-staged": "^14.0.1",
-    "mini-css-extract-plugin": "1.6.2",
    "minimist": "1.2.8",
    "mongodb-memory-server": "^9",
    "next": "14.1.2",
@@ -130,8 +125,6 @@
    "pino-pretty": "10.2.0",
    "playwright": "file:playwright-1.43.0-next.tgz",
    "playwright-core": "file:playwright-core-1.43.0-next.tgz",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.5.0",
    "prettier": "^3.0.3",
    "prompts": "2.4.2",
    "qs": "6.11.2",
@@ -139,24 +132,18 @@
    "react-dom": "^18.2.0",
    "read-stream": "^2.1.1",
    "rimraf": "3.0.2",
-    "sass-loader": "^14.1.1",
    "semver": "^7.5.4",
    "sharp": "0.32.6",
    "shelljs": "0.8.5",
    "simple-git": "^3.20.0",
    "slash": "3.0.0",
    "slate": "0.91.4",
-    "swc-loader": "^0.2.6",
    "tempfile": "^3.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-loader": "^9.5.1",
    "ts-node": "10.9.1",
    "tsx": "^4.7.1",
    "turbo": "^1.12.5",
    "typescript": "5.2.2",
    "uuid": "^9.0.1",
-    "webpack": "^5.78.0",
-    "webpack-cli": "^5.1.4",
    "yocto-queue": "^1.0.0"
  },
  "peerDependencies": {
--- a/packages/create-payload-app/.swcrc
+++ b/packages/create-payload-app/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/db-mongodb/.swcrc
+++ b/packages/db-mongodb/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/db-postgres/.swcrc
+++ b/packages/db-postgres/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/graphql/.swcrc
+++ b/packages/graphql/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/live-preview-react/.swcrc
+++ b/packages/live-preview-react/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/live-preview/.swcrc
+++ b/packages/live-preview/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/next/.swcrc
+++ b/packages/next/.swcrc
@@ -1,12 +1,22 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
    }
  },
  "module": {
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -8,10 +8,10 @@
    "@payloadcms/next": "./dist/bin/index.js"
  },
  "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
    "build:types": "tsc --emitDeclarationOnly --outDir dist",
-    "build:webpack": "webpack --config webpack.config.cjs",
+    "build:webpack": "webpack --config webpack.config.js",
    "clean": "rimraf {dist,*.tsbuildinfo}",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" \"src/app/api/**\" dist/ && pnpm copyfiles:api",
    "copyfiles:api": "copyfiles -u 1 \"src/app/(payload)/**\" dist/template",
@@ -48,7 +48,6 @@
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.1.0",
    "@payloadcms/eslint-config": "workspace:*",
-    "@swc-node/loader": "^1.5.0",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "@types/ws": "^8.5.10",
@@ -60,9 +59,8 @@
    "postcss-preset-env": "^9.5.0",
    "sass-loader": "^14.1.1",
    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
    "terser-webpack-plugin": "^5.3.10",
-    "ts-loader": "^9.5.1",
-    "url-loader": "^4.1.1",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.1.4"
  },
--- a/packages/next/src/layouts/Root/index.tsx
+++ b/packages/next/src/layouts/Root/index.tsx
@@ -1,6 +1,5 @@
 import type { SanitizedConfig } from 'payload/types'

-import { auth } from '@payloadcms/next/utilities/auth'
 import { translations } from '@payloadcms/translations/client'
 import { RootProvider, buildComponentMap } from '@payloadcms/ui'
 import '@payloadcms/ui/scss/app.scss'
@@ -11,6 +10,7 @@ import React from 'react'
 import 'react-toastify/dist/ReactToastify.css'

 import { ClearRouteCache } from '../../elements/ClearRouteCache/index.js'
+import { auth } from '../../utilities/auth.js'
 import { getPayload } from '../../utilities/getPayload.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
 import { DefaultEditView } from '../../views/Edit/Default/index.js'
--- a/packages/next/src/scss/app.scss
+++ b/packages/next/src/scss/app.scss
@@ -1,8 +1,12 @@
-@import 'fonts';
-@import 'styles';
+@import './fonts.scss';
+@import './styles.scss';
@import './toastify.scss';
@import './colors.scss';

+.body {
+  color: palegoldenrod;
+}
+
 :root {
  --base-px: 25;
  --base-body-size: 13;
--- a/packages/next/src/withPayload.js
+++ b/packages/next/src/withPayload.js
@@ -12,6 +12,10 @@ const withPayload = (nextConfig = {}) => {
          'libsql',
        ],
      },
+      outputFileTracingIncludes: {
+        pino: ['./node_modules/pino'],
+        'pino-pretty': ['./node_modules/pino-pretty'],
+      },
      serverComponentsExternalPackages: [
        ...(nextConfig?.experimental?.serverComponentsExternalPackages || []),
        'drizzle-kit',
--- a/packages/next/webpack.config.js
+++ b/packages/next/webpack.config.js
@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig
--- a/packages/payload/.swcrc
+++ b/packages/payload/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-cloud-storage/.swcrc
+++ b/packages/plugin-cloud-storage/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-cloud/.swcrc
+++ b/packages/plugin-cloud/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "exclude": ["/**/*.spec.ts", "/**/mocks"],
  "jsc": {
    "target": "esnext",
--- a/packages/plugin-form-builder/.swcrc
+++ b/packages/plugin-form-builder/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "exclude": ["/**/mocks"],
  "jsc": {
    "target": "esnext",
--- a/packages/plugin-nested-docs/.swcrc
+++ b/packages/plugin-nested-docs/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-redirects/.swcrc
+++ b/packages/plugin-redirects/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-search/.swcrc
+++ b/packages/plugin-search/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-sentry/.swcrc
+++ b/packages/plugin-sentry/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "exclude": ["/**/*.spec.ts"],
  "jsc": {
    "target": "esnext",
--- a/packages/plugin-seo/.swcrc
+++ b/packages/plugin-seo/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-stripe/.swcrc
+++ b/packages/plugin-stripe/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/richtext-lexical/.swcrc
+++ b/packages/richtext-lexical/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/richtext-slate/.swcrc
+++ b/packages/richtext-slate/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/translations/.swcrc
+++ b/packages/translations/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/ui/.swcrc
+++ b/packages/ui/.swcrc
@@ -1,12 +1,22 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
    }
  },
  "module": {
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -5,9 +5,10 @@
  "types": "./dist/index.d.ts",
  "type": "module",
  "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
    "clean": "rimraf {dist,*.tsbuildinfo}",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
    "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -53,7 +54,18 @@
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "@types/uuid": "8.3.4",
-    "payload": "workspace:*"
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@dnd-kit/core": "6.0.8",
--- a/packages/ui/src/scss/app.scss
+++ b/packages/ui/src/scss/app.scss
@@ -3,6 +3,10 @@
@import './toastify.scss';
@import './colors.scss';

+.gordon-freeman {
+  color: red;
+}
+
 :root {
  --base-px: 25;
  --base-body-size: 13;
--- a/packages/ui/webpack.config.js
+++ b/packages/ui/webpack.config.js
@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,9 +45,6 @@ importers:
      '@playwright/test':
        specifier: 1.42.1
        version: 1.42.1
-      '@swc-node/loader':
-        specifier: ^1.5.0
-        version: 1.5.0(@swc/core@1.4.2)(@swc/types@0.1.5)(typescript@5.2.2)(webpack@5.90.3)
      '@swc/cli':
        specifier: ^0.1.62
        version: 0.1.65(@swc/core@1.4.2)
@@ -135,12 +132,6 @@ importers:
      cross-env:
        specifier: 7.0.3
        version: 7.0.3
-      css-loader:
-        specifier: ^6.10.0
-        version: 6.10.0(webpack@5.90.3)
-      css-minimizer-webpack-plugin:
-        specifier: ^6.0.0
-        version: 6.0.0(webpack@5.90.3)
      dotenv:
        specifier: 8.6.0
        version: 8.6.0
@@ -186,9 +177,6 @@ importers:
      lint-staged:
        specifier: ^14.0.1
        version: 14.0.1
-      mini-css-extract-plugin:
-        specifier: 1.6.2
-        version: 1.6.2(webpack@5.90.3)
      minimist:
        specifier: 1.2.8
        version: 1.2.8
@@ -214,17 +202,11 @@ importers:
        specifier: 10.2.0
        version: 10.2.0
      playwright:
-        specifier: file:/Users/alessio/Documents/GitHub/payload/playwright-1.43.0-next.tgz
+        specifier: file:/Users/jmikrut/payload/core/playwright-1.43.0-next.tgz
        version: file:playwright-1.43.0-next.tgz
      playwright-core:
-        specifier: file:/Users/alessio/Documents/GitHub/payload/playwright-core-1.43.0-next.tgz
+        specifier: file:/Users/jmikrut/payload/core/playwright-core-1.43.0-next.tgz
        version: file:playwright-core-1.43.0-next.tgz
-      postcss-loader:
-        specifier: ^8.1.1
-        version: 8.1.1(postcss@8.4.35)(typescript@5.2.2)(webpack@5.90.3)
-      postcss-preset-env:
-        specifier: ^9.5.0
-        version: 9.5.0(postcss@8.4.35)
      prettier:
        specifier: ^3.0.3
        version: 3.2.5
@@ -246,9 +228,6 @@ importers:
      rimraf:
        specifier: 3.0.2
        version: 3.0.2
-      sass-loader:
-        specifier: ^14.1.1
-        version: 14.1.1(sass@1.71.1)(webpack@5.90.3)
      semver:
        specifier: ^7.5.4
        version: 7.6.0
@@ -267,18 +246,9 @@ importers:
      slate:
        specifier: 0.91.4
        version: 0.91.4
-      swc-loader:
-        specifier: ^0.2.6
-        version: 0.2.6(@swc/core@1.4.2)(webpack@5.90.3)
      tempfile:
        specifier: ^3.0.0
        version: 3.0.0
-      terser-webpack-plugin:
-        specifier: ^5.3.10
-        version: 5.3.10(@swc/core@1.4.2)(webpack@5.90.3)
-      ts-loader:
-        specifier: ^9.5.1
-        version: 9.5.1(typescript@5.2.2)(webpack@5.90.3)
      ts-node:
        specifier: 10.9.1
        version: 10.9.1(@swc/core@1.4.2)(@types/node@20.5.7)(typescript@5.2.2)
@@ -294,12 +264,6 @@ importers:
      uuid:
        specifier: ^9.0.1
        version: 9.0.1
-      webpack:
-        specifier: ^5.78.0
-        version: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
-      webpack-cli:
-        specifier: ^5.1.4
-        version: 5.1.4(webpack@5.90.3)
      yocto-queue:
        specifier: ^1.0.0
        version: 1.0.0
@@ -633,9 +597,6 @@ importers:
      '@payloadcms/eslint-config':
        specifier: workspace:*
        version: link:../eslint-config-payload
-      '@swc-node/loader':
-        specifier: ^1.5.0
-        version: 1.5.0(@swc/core@1.4.2)(@swc/types@0.1.5)(typescript@5.2.2)(webpack@5.90.3)
      '@types/react':
        specifier: 18.2.15
        version: 18.2.15
@@ -669,15 +630,12 @@ importers:
      swc-loader:
        specifier: ^0.2.6
        version: 0.2.6(@swc/core@1.4.2)(webpack@5.90.3)
+      swc-plugin-transform-remove-imports:
+        specifier: ^1.12.1
+        version: 1.12.1
      terser-webpack-plugin:
        specifier: ^5.3.10
        version: 5.3.10(@swc/core@1.4.2)(webpack@5.90.3)
-      ts-loader:
-        specifier: ^9.5.1
-        version: 9.5.1(typescript@5.2.2)(webpack@5.90.3)
-      url-loader:
-        specifier: ^4.1.1
-        version: 4.1.1(webpack@5.90.3)
      webpack:
        specifier: ^5.78.0
        version: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
@@ -1429,9 +1387,42 @@ importers:
      '@types/uuid':
        specifier: 8.3.4
        version: 8.3.4
+      css-loader:
+        specifier: ^6.10.0
+        version: 6.10.0(webpack@5.90.3)
+      css-minimizer-webpack-plugin:
+        specifier: ^6.0.0
+        version: 6.0.0(webpack@5.90.3)
+      mini-css-extract-plugin:
+        specifier: 1.6.2
+        version: 1.6.2(webpack@5.90.3)
      payload:
        specifier: workspace:*
        version: link:../payload
+      postcss-loader:
+        specifier: ^8.1.1
+        version: 8.1.1(postcss@8.4.35)(typescript@5.2.2)(webpack@5.90.3)
+      postcss-preset-env:
+        specifier: ^9.5.0
+        version: 9.5.0(postcss@8.4.35)
+      sass-loader:
+        specifier: ^14.1.1
+        version: 14.1.1(sass@1.71.1)(webpack@5.90.3)
+      swc-loader:
+        specifier: ^0.2.6
+        version: 0.2.6(@swc/core@1.4.2)(webpack@5.90.3)
+      swc-plugin-transform-remove-imports:
+        specifier: ^1.12.1
+        version: 1.12.1
+      terser-webpack-plugin:
+        specifier: ^5.3.10
+        version: 5.3.10(@swc/core@1.4.2)(webpack@5.90.3)
+      webpack:
+        specifier: ^5.78.0
+        version: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ^5.1.4
+        version: 5.1.4(webpack@5.90.3)

 packages:

@@ -5832,47 +5823,14 @@ packages:
    dependencies:
      '@swc/core': 1.4.2
      '@swc/types': 0.1.5
-
-  /@swc-node/loader@1.5.0(@swc/core@1.4.2)(@swc/types@0.1.5)(typescript@5.2.2)(webpack@5.90.3):
-    resolution: {integrity: sha512-g6qIHoya08S5QVOOj85/l9cc9SeIQuO4pcNufRPgVhLQllUntfR5k+g48laVMiDuZ5N8H4VKLqJ78KkscORuSQ==}
-    peerDependencies:
-      typescript: 5.2.2
-      webpack: '>= 5.0.0'
-    dependencies:
-      '@swc-node/core': 1.13.0(@swc/core@1.4.2)(@swc/types@0.1.5)
-      '@swc-node/register': 1.9.0(@swc/core@1.4.2)(@swc/types@0.1.5)(typescript@5.2.2)
-      typescript: 5.2.2
-      webpack: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/types'
-      - supports-color
-    dev: true
-
-  /@swc-node/register@1.9.0(@swc/core@1.4.2)(@swc/types@0.1.5)(typescript@5.2.2):
-    resolution: {integrity: sha512-i0iYInD4q5v3xQC6bKvs0QtfUxu197CU5qKALmpxEqTYs7sIhQ7KFLe3kP+eAR4gRkJTvAgjQgrokXLN2jZrOw==}
-    peerDependencies:
-      '@swc/core': '>= 1.3'
-      typescript: 5.2.2
-    dependencies:
-      '@swc-node/core': 1.13.0(@swc/core@1.4.2)(@swc/types@0.1.5)
-      '@swc-node/sourcemap-support': 0.5.0
-      '@swc/core': 1.4.2
-      colorette: 2.0.20
-      debug: 4.3.4(supports-color@5.5.0)
-      pirates: 4.0.6
-      tslib: 2.6.2
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - '@swc/types'
-      - supports-color
-    dev: true
+    dev: false

  /@swc-node/sourcemap-support@0.5.0:
    resolution: {integrity: sha512-fbhjL5G0YvFoWwNhWleuBUfotiX+USiA9oJqu9STFw+Hb0Cgnddn+HVS/K5fI45mn92e8V+cHD2jgFjk4w2T9Q==}
    dependencies:
      source-map-support: 0.5.21
      tslib: 2.6.2
+    dev: false

  /@swc/cli@0.1.65(@swc/core@1.4.2):
    resolution: {integrity: sha512-4NcgsvJVHhA7trDnMmkGLLvWMHu2kSy+qHx6QwRhhJhdiYdNUrhdp+ERxen73sYtaeEOYeLJcWrQ60nzKi6rpg==}
@@ -16881,6 +16839,10 @@ packages:
      webpack: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
    dev: true

+  /swc-plugin-transform-remove-imports@1.12.1:
+    resolution: {integrity: sha512-Ckz0ebo7VZGlt7tB8EG4drB52fOSrG9adrGESZ26Qu9s+OD2hVsZ91JeiZk1LqgCH3CHA1+Vboa+VPQ2dYq8HA==}
+    dev: true
+
  /symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
    dev: true
@@ -17221,22 +17183,6 @@ packages:
      yargs-parser: 21.1.1
    dev: true

-  /ts-loader@9.5.1(typescript@5.2.2)(webpack@5.90.3):
-    resolution: {integrity: sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      typescript: 5.2.2
-      webpack: ^5.0.0
-    dependencies:
-      chalk: 4.1.2
-      enhanced-resolve: 5.15.1
-      micromatch: 4.0.5
-      semver: 7.6.0
-      source-map: 0.7.4
-      typescript: 5.2.2
-      webpack: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
-    dev: true
-
  /ts-node@10.9.1(@swc/core@1.4.2)(@types/node@16.18.85)(typescript@5.2.2):
    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
    hasBin: true
@@ -17623,22 +17569,6 @@ packages:
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
    dev: true

-  /url-loader@4.1.1(webpack@5.90.3):
-    resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      file-loader: '*'
-      webpack: ^4.0.0 || ^5.0.0
-    peerDependenciesMeta:
-      file-loader:
-        optional: true
-    dependencies:
-      loader-utils: 2.0.4
-      mime-types: 2.1.35
-      schema-utils: 3.3.0
-      webpack: 5.90.3(@swc/core@1.4.2)(webpack-cli@5.1.4)
-    dev: true
-
  /url-parse@1.5.10:
    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
    dependencies:
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -1,209 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
-import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
-import path, { join, parse, resolve } from 'path'
-import TerserJSPlugin from 'terser-webpack-plugin'
-import { fileURLToPath } from 'url'
-import webpack from 'webpack'
-
-const filename = fileURLToPath(import.meta.url)
-const dirname = path.dirname(filename)
-import { createRequire } from 'node:module'
-const require = createRequire(import.meta.url)
-import { existsSync } from 'fs'
-
-const exportsFolderPath = path.resolve(dirname, './packages/ui/src/exports')
-const exportsFolderPath2 = path.resolve(dirname, './packages/ui/src/assets')
-
-const mockModulePath = path.resolve(dirname, './emptyModule.js')
-
-
-/** @type {import('webpack').Configuration}*/
-const componentWebpackConfig = {
-  entry: path.resolve(dirname, './packages/next/src/index.ts'),
-  externals: ['react', 'react-dom', /^payload.*/, /^next.*/, 'react-image-crop'],
-  //externalsType: 'commonjs',
-  mode: 'production',
-  module: {
-    rules: [
-      {
-        exclude: function(modulePath) {
-          // Check if the modulePath is within node_modules and does not end with .tsx or .ts
-          const isNodeModuleButNotTS = /node_modules/.test(modulePath)
-
-          // Check if the modulePath starts with ./packages/payload
-          const isPayloadPackage = /packages\/payload/.test(modulePath.replace(/\\/g, '/')); // Normalizing backslashes to forward slashes to handle Windows paths
-
-          // Exclude if either condition is true
-          return isNodeModuleButNotTS || isPayloadPackage
-        },
-        resolve: {
-          fullySpecified: false,
-        },
-        // exclude: /node_modules/,
-        test: /\.(t|j)sx?$/,
-        use: [
-          {
-            loader: '@swc-node/loader',
-            options: {
-              jsc: {
-                parser: {
-                  syntax: 'typescript',
-                  tsx: true,
-                },
-                target: 'esnext',
-              },
-              module: {
-                type: 'es6',
-              },
-              // absolute path for tsconfig.json
-              configFile: path.join(dirname, 'tsconfig.json'),
-            },
-          },
-        ],
-      },
-
-      {
-
-        sideEffects: true,
-        test: /\.(scss|css)$/,
-        use: [
-          {
-            loader: MiniCSSExtractPlugin.loader,
-            options: {
-              esModule: true,
-            }
-          } ,
-          {
-            loader: require.resolve('css-loader'),
-            options: {
-              esModule: true,
-              //url: false
-              /* // TODO: Enable url resolving again
-              url: {
-                filter: (url, resourcePath) => !url.startsWith('/'),
-              },
-               */
-            },
-          },
-          {
-            loader: require.resolve('postcss-loader'),
-            options: {
-              postcssOptions: {
-                plugins: [require.resolve('postcss-preset-env')],
-              },
-            },
-          },
-          {
-            loader: require.resolve('sass-loader'),
-            options: {
-              sassOptions: {
-                includePaths: [exportsFolderPath, exportsFolderPath2],
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(ttf|woff|woff2)$/,
-        type: 'asset/resource',
-        exclude: '/node_modules/',
-        generator: {
-          filename: 'fonts/[name].[ext]',
-        }
-      },
-      {
-        test: /\.(?:ico|gif|png|jpg|jpeg|eot|otf|svg)$/i,
-        type: 'asset/resource',
-        exclude: '/node_modules/',
-      },
-
-      {
-        exclude: function(modulePath) {
-          // Check if the modulePath starts with ./packages/payload
-          const isPayloadPackage = /packages\/payload/.test(modulePath.replace(/\\/g, '/')); // Normalizing backslashes to forward slashes to handle Windows paths
-
-          // Exclude if either condition is true
-          return !isPayloadPackage
-        },
-        test: /\.(t|j)sx?$/,
-        type: 'asset/resource',
-      },
-    ],
-  },
-  optimization: {
-    minimizer: [
-      new TerserJSPlugin({
-        extractComments: false,
-      }),
-      new OptimizeCSSAssetsPlugin({}),
-    ],
-  },
-  output: {
-    filename: 'index.js',
-    //libraryTarget: 'commonjs2',
-    path: path.resolve(dirname, './dist'),
-    publicPath: '/',
-  },
-  plugins: [
-    new MiniCSSExtractPlugin({
-      filename: 'styles.css',
-      ignoreOrder: true,
-    }),
-    // This fixes esm: https://github.com/vercel/next.js/issues/41961#issuecomment-1311091390
-    new webpack.NormalModuleReplacementPlugin(
-      /\.js$/,
-      (
-        /** @type {{ context: string, request: string }} */
-        resource,
-      ) => {
-        // Skip a non relative import (e.g. a bare import specifier).
-        if (resource.request.startsWith('.')) {
-          const path = resolve(resource.context, resource.request)
-
-          if (
-            // Skip the relative import if it reaches into `node_modules`.
-            !path.includes('node_modules') &&
-            !existsSync(path)
-          ) {
-            const { dir, name } = parse(path)
-            const extensionlessPath = join(dir, name)
-
-            for (const fallbackExtension of ['.tsx', '.ts', '.js']) {
-              if (existsSync(extensionlessPath + fallbackExtension)) {
-                resource.request = resource.request.replace(/\.js$/, fallbackExtension)
-                break
-              }
-            }
-          }
-        }
-      },
-    ),
-  ],
-  resolve: {
-    fullySpecified: false,
-    extensionAlias: {
-      '.cjs': ['.cjs', '.cts'],
-      '.js': ['.js', '.ts'], // TODO: instead of my webpack.NormalModuleReplacementPlugin I could also add .tsx and .jsx here
-      '.mjs': ['.mjs', '.mts'],
-    },
-    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-    alias: {
-      payload$: mockModulePath,
-    },
-    fallback: {
-      crypto: false,
-      http: false,
-      https: false,
-      path: require.resolve('path-browserify'),
-    },
-    modules: ['node_modules', path.join(dirname, './node_modules')],
-  },
-  resolveLoader: {
-    modules: ['node_modules',  path.join(dirname, './node_modules')],
-  },
-  stats: 'errors-only',
-}
-
-export default componentWebpackConfig