WIP

.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

emptyModule.js

@@ -0,0 +1 @@
+export default {}

package.json

@@ -9,6 +9,7 @@
   "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",
@@ -71,6 +72,7 @@
     "@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",
@@ -100,6 +102,8 @@
     "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",
@@ -115,15 +119,19 @@
     "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",
     "node-mocks-http": "^1.14.1",
     "nodemon": "3.0.3",
+    "path-browserify": "^1.0.1",
     "pino": "8.15.0",
     "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",
@@ -131,18 +139,24 @@
     "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": {

packages/next/webpack.config.cjs

@@ -1,97 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const OptimizeCSSAssetsPlugin = require('css-minimizer-webpack-plugin')
-const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
-const path = require('path')
-const TerserJSPlugin = require('terser-webpack-plugin')
-
-const componentWebpackConfig = {
-  entry: path.resolve(__dirname, './src/index.ts'),
-  externals: ['react', 'react-dom', /^payload.*/, /^next.*/, 'react-image-crop'],
-  // externalsType: 'commonjs',
-  mode: 'production',
-  module: {
-    rules: [
-      {
-        // exclude: /node_modules/,
-        test: /\.(t|j)sx?$/,
-        use: [
-          // {
-          //   loader: 'swc-loader',
-          //   options: {
-          //     jsc: {
-          //       parser: {
-          //         dts: true,
-          //         syntax: 'typescript',
-          //         tsx: true,
-          //       },
-          //     },
-          //     module: {
-          //       type: 'es6',
-          //     },
-          //   },
-          // },
-          {
-            loader: '@swc-node/loader',
-            options: {
-              // compilerOptions: {
-              //   esModuleInterop: true,
-              //   jsx: true,
-              //   module: 'esnext',
-              //   moduleResolution: 'NodeNext',
-              //   target: 'ES5',
-              //   sourceMap: false,
-              // },
-              include: ['../**/*.ts', '../**/*.tsx'],
-              // absolute path for tsconfig.json
-              configFile: path.join(__dirname, '../../tsconfig.json'),
-            },
-          },
-        ],
-      },
-      {
-        sideEffects: true,
-        test: /\.(scss|css)$/,
-        use: [
-          MiniCSSExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: ['postcss-preset-env'],
-              },
-            },
-          },
-          'sass-loader',
-        ],
-      },
-    ],
-  },
-  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,
-    }),
-  ],
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js', '.jsx'],
-    modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
-  },
-  stats: 'errors-only',
-}
-
-module.exports = componentWebpackConfig

packages/ui/src/exports/scss/app.scss

@@ -0,0 +1 @@
+@import '../../scss/app.scss';

packages/ui/src/exports/scss/colors.scss

@@ -0,0 +1 @@
+@import '../../scss/colors.scss';

packages/ui/src/exports/scss/custom.css

@@ -0,0 +1 @@
+/* Used as a placeholder for when the Payload app does not have custom CSS */

packages/ui/src/exports/scss/fonts.scss

@@ -0,0 +1 @@
+@import '../../scss/fonts.scss';

packages/ui/src/exports/scss/queries.scss

@@ -0,0 +1 @@
+@import '../../scss/queries.scss';

packages/ui/src/exports/scss/resets.scss

@@ -0,0 +1 @@
+@import '../../scss/resets.scss';

packages/ui/src/exports/scss/styles.scss

@@ -0,0 +1 @@
+@import '../../scss/styles.scss';

packages/ui/src/exports/scss/svg.scss

@@ -0,0 +1 @@
+@import '../../scss/svg.scss';

packages/ui/src/exports/scss/toastify.scss

@@ -0,0 +1 @@
+@import '../../scss/toastify.scss';

packages/ui/src/exports/scss/type.scss

@@ -0,0 +1 @@
+@import '../../scss/type.scss';

packages/ui/src/exports/scss/vars.scss

@@ -0,0 +1 @@
+@import '../../scss/vars.scss';

packages/ui/src/exports/scss/z-index.scss

@@ -0,0 +1 @@
+@import '../../scss/z-index.scss';

pnpm-lock.yaml

@@ -45,6 +45,9 @@ 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)
@@ -132,6 +135,12 @@ 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
@@ -177,6 +186,9 @@ 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
@@ -192,6 +204,9 @@ importers:
       nodemon:
         specifier: 3.0.3
         version: 3.0.3
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
       pino:
         specifier: 8.15.0
         version: 8.15.0
@@ -199,11 +214,17 @@ importers:
         specifier: 10.2.0
         version: 10.2.0
       playwright:
-        specifier: file:/Users/jmikrut/payload/core/playwright-1.43.0-next.tgz
+        specifier: file:/Users/alessio/Documents/GitHub/payload/playwright-1.43.0-next.tgz
         version: file:playwright-1.43.0-next.tgz
       playwright-core:
-        specifier: file:/Users/jmikrut/payload/core/playwright-core-1.43.0-next.tgz
+        specifier: file:/Users/alessio/Documents/GitHub/payload/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
@@ -225,6 +246,9 @@ 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
@@ -243,9 +267,18 @@ 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)
@@ -261,6 +294,12 @@ 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
@@ -1340,7 +1379,7 @@ importers:
         version: 2.3.0
       next:
         specifier: 14.2.0-canary.7
-        version: 14.2.0-canary.7(@babel/core@7.24.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 14.2.0-canary.7(@babel/core@7.24.0)(react-dom@18.2.0)(react@18.2.0)(sass@1.71.1)
       object-to-formdata:
         specifier: 4.5.1
         version: 4.5.1
@@ -13612,45 +13651,6 @@ packages:
       - babel-plugin-macros
     dev: true
 
-  /next@14.2.0-canary.7(@babel/core@7.24.0)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-X9wrHOzj25uzuECqpaO7SJ34gxZziaJZXdfRQJmEJC5tQ1FmxUm0eZ/SXIw3fPkjX2/04JmavkLJPtD3BA6UyA==}
-    engines: {node: '>=18.17.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-    dependencies:
-      '@next/env': 14.2.0-canary.7
-      '@swc/helpers': 0.5.5
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001591
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.24.0)(react@18.2.0)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.0-canary.7
-      '@next/swc-darwin-x64': 14.2.0-canary.7
-      '@next/swc-linux-arm64-gnu': 14.2.0-canary.7
-      '@next/swc-linux-arm64-musl': 14.2.0-canary.7
-      '@next/swc-linux-x64-gnu': 14.2.0-canary.7
-      '@next/swc-linux-x64-musl': 14.2.0-canary.7
-      '@next/swc-win32-arm64-msvc': 14.2.0-canary.7
-      '@next/swc-win32-ia32-msvc': 14.2.0-canary.7
-      '@next/swc-win32-x64-msvc': 14.2.0-canary.7
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
   /next@14.2.0-canary.7(@babel/core@7.24.0)(react-dom@18.2.0)(react@18.2.0)(sass@1.71.1):
     resolution: {integrity: sha512-X9wrHOzj25uzuECqpaO7SJ34gxZziaJZXdfRQJmEJC5tQ1FmxUm0eZ/SXIw3fPkjX2/04JmavkLJPtD3BA6UyA==}
     engines: {node: '>=18.17.0'}
@@ -14209,6 +14209,10 @@ packages:
     resolution: {integrity: sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==}
     engines: {node: '>= 0.4.0'}
 
+  /path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
   /path-exists@3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}

webpack.config.mjs

@@ -0,0 +1,209 @@
+/* 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