Upgrade esbuild-loader and @craco/craco

.changeset/long-dragons-approve.md

@@ -0,0 +1,5 @@
+---
+'craco-esbuild': minor
+---
+
+Updated esbuild-loader to v4 and craco to v7.

.github/workflows/node.js.yml

@@ -13,14 +13,14 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v2
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 6.24.1
+          version: 8.15.1
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
@@ -33,25 +33,25 @@ jobs:
 
       - name: Compile create-react-app examples using react-scripts
         run: |
-          pnpm run build-react-scripts --filter "with-*"
+          pnpm run --filter "with-*" build-react-scripts
 
       - name: Test create-react-app examples using react-scripts
         run: |
-          pnpm run test-react-scripts --filter "with-*"
+          pnpm run --filter "with-*" test-react-scripts
 
   test:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v2
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 6.24.1
+          version: 8.15.1
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
@@ -64,8 +64,8 @@ jobs:
 
       - name: Compile create-react-app examples using craco
         run: |
-          pnpm run build --filter "with-*"
+          pnpm run --filter "with-*" build
 
       - name: Test create-react-app examples using craco
         run: |
-          pnpm run test --filter "with-*"
+          pnpm run --filter "with-*" test

.github/workflows/release.yml

@@ -17,12 +17,12 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 6.24.1
+          version: 8.15.1
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v2
         with:
-          node-version: 16.x
+          node-version: 20.x
           cache: 'pnpm'
 
       - name: Install dependencies

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpx lint-staged
+pnpm lint-staged

examples/with-javascript/package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.4.3",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@craco/craco": "7.0.0",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "craco-esbuild": "workspace:craco-esbuild",

examples/with-svgr/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.4.3",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@craco/craco": "7.0.0",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "craco-esbuild": "workspace:craco-esbuild",

examples/with-typescript/package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.4.3",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@craco/craco": "7.0.0",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.15",
+    "@types/jest": "^28.0.0",
+    "@types/node": "^18.19.18",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "craco-esbuild": "workspace:craco-esbuild",

examples/with-typescript/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["jest", "@testing-library/jest-dom"]
   },
   "include": ["src"]
 }

package.json

@@ -9,6 +9,9 @@
   "prettier": {
     "singleQuote": true
   },
+  "engines" : {
+    "node": ">=18.0.0"
+  },
   "lint-staged": {
     "*.{js,ts,tsx,css,scss,json,md,mdx,yml}": [
       "prettier --write",

packages/craco-esbuild/package.json

@@ -9,15 +9,15 @@
     "src"
   ],
   "peerDependencies": {
-    "@craco/craco": "^6.0.0 || ^7.0.0 || ^7.0.0-alpha",
+    "@craco/craco": "^^7.0.0",
     "react-scripts": "^5.0.0"
   },
   "dependencies": {
     "esbuild-jest": "0.5.0",
-    "esbuild-loader": "^2.18.0"
+    "esbuild-loader": "^4.0.1"
   },
   "devDependencies": {
-    "@craco/craco": "6.4.3",
+    "@craco/craco": "7.0.0",
     "react-scripts": "5.0.0"
   }
 }

packages/craco-esbuild/src/index.js

@@ -1,6 +1,5 @@
-const fs = require('fs');
 const { loaderByName, removeLoaders, addAfterLoader } = require('@craco/craco');
-const { ESBuildMinifyPlugin } = require('esbuild-loader');
+const { EsbuildPlugin } = require('esbuild-loader');
 
 const removeMinimizer = (webpackConfig, name) => {
   const idx = webpackConfig.optimization.minimizer.findIndex(
@@ -25,7 +24,6 @@ module.exports = {
     pluginOptions,
     context: { paths },
   }) => {
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
     const esbuildLoaderOptions =
       pluginOptions && pluginOptions.esbuildLoaderOptions;
 
@@ -42,7 +40,6 @@ module.exports = {
       options: esbuildLoaderOptions
         ? esbuildLoaderOptions
         : {
-            loader: useTypeScript ? 'tsx' : 'jsx',
             target: 'es2015',
           },
     });
@@ -58,7 +55,7 @@ module.exports = {
     replaceMinimizer(
       webpackConfig,
       'TerserPlugin',
-      new ESBuildMinifyPlugin(minimizerOptions)
+      new EsbuildPlugin(minimizerOptions)
     );
     // remove the css OptimizeCssAssetsWebpackPlugin
     if (minimizerOptions.css) {