search

harlan-zw / nuxt-webpack-optimisations

Make your Nuxt.js webpack builds faster ⚡
269 stars 8 forks source link

ESBuildMinifierPlugin failed to import #36

Closed BrandonlinU closed 2 years ago

BrandonlinU commented 2 years ago

Describe the bug When compile in the productive environment it throws an error in Node 16 saying that the ESBuildMinifierPlugin can not be found in the named exports because is a CommonJS Module (i'm not sure if it present in others versions).

To Reproduce Steps to reproduce the behavior:

  1. Start a fresh Nuxt2 app
  2. Install and active the nuxt-webpack-optimisations module
  3. Try to compile with the "build" command in Node 16

Expected behavior It should not thrown error

Error description from Nuxt2 SyntaxError: Named export 'ESBuildMinifyPlugin' not found. The requested module 'esbuild-loader' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'esbuild-loader'; const { ESBuildMinifyPlugin } = pkg;

Possible workaround / solution Import first the esbuild-loader and destructuring the MinifyPlugin, just as the error says.

https://github.com/harlan-zw/nuxt-webpack-optimisations/blob/9efb522a3b802730280955ec963ee9e9ff5b43dd/packages/nuxt-webpack-optimisations/src/augmentation/useEsbuildMinifier.ts#L1

Change to 

import esbuild from 'esbuild-loader';

const { ESBuildMinifyPlugin } = esbuild;

Additional context I think the new native support of ES Modules in Node 16 can affect.

igari commented 2 years ago

Same issue with Node v14.5.0

harlan-zw commented 2 years ago

Hey @BrandonlinU and @igari

Thanks for reporting this issue. It seems like it was a problem in the upstream esbuild-loader package that this module utilises. Looks like it has been fixed now https://github.com/privatenumber/esbuild-loader/issues/232

Can you try with 2.0.6 and let me know if you have any issues :) ?

BrandonlinU commented 2 years ago

Well, I have bad news: The @nuxt/kit method defineNuxtModule is not having access to the Nuxt Context for some reason, so it throws a new error at build time, inclusive with the nuxt dev command. I attached the new stacktrace of the error reported.

FATAL  Cannot read properties of null (reading 'options') 

  at node_modules/.pnpm/nuxt-webpack-optimisations@2.0.6_webpack@4.46.0/node_modules/nuxt-webpack-optimisations/dist/module.mjs:271:16
  at defineNuxtModule (node_modules/.pnpm/@nuxt+kit-edge@3.0.0-27336769.5a7a979/node_modules/@nuxt/kit-edge/dist/index.mjs:457:18)
  at node_modules/.pnpm/nuxt-webpack-optimisations@2.0.6_webpack@4.46.0/node_modules/nuxt-webpack-optimisations/dist/module.mjs:266:16
  at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
  at async ModuleContainer.addModule (node_modules/.pnpm/@nuxt+core@2.15.8/node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/.pnpm/@nuxt+core@2.15.8/node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/.pnpm/@nuxt+core@2.15.8/node_modules/@nuxt/core/dist/core.js:478:5)

I can confirm that the error is present in the Nuxt2 fresh app, so the same reproducing steps can be used to diagnose this error.

harlan-zw commented 2 years ago

Thanks for flagging that, seems like the @nuxt/kit was updated. I've updated the code on that

Let me know if you have any further issues :)