RC9 Dependency Break - CJS Imports

[MohammadKhalaji]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.9
• Nitro Version: 0.5.0
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: modules
• Runtime Modules: @pinia/nuxt@0.4.1
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-vmafic-tphsbu?file=app.vue,plugins%2Ftoastification.client.js

Describe the bug

after npx nuxi build and npx nuxi start I get this error:

[nuxt] [request error] [unhandled] [500] Named export 'useToast' not found. The requested module 'vue-toastification' 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 'vue-toastification';
const { useToast } = pkg;

Additional context

It did NOT happen with RC8

It also happens with vue-final-modal on my machine

Logs

No response

[MohammadKhalaji]

How can I downgrade to RC8 anyways?

[aesyondu]

How can I downgrade to RC8 anyways?

Try npm install <package>@<version>

EDIT: nvm when I look at it closely it's not the same error

As for the error. I also encountered this error on RC8. I imported cjs files with import Reader from "crocks/Reader/index", but it shows an error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/project/root/node_modules/crocks/Reader/index' imported from /project/root/.nuxt/dist/server/server.mjs
Did you mean to import crocks/Reader/index.js?

So I had to modify with import Reader from "crocks/Reader/index.js"

[MohammadKhalaji]

How can I downgrade to RC8 anyways?

Try npm install <package>@<version>

EDIT: nvm when I look at it closely it's not the same error

Thanks,

yeah it's not the same. Double checked with RC8 and the error is gone. Still there with RC9.

[pi0]

I have checked vue-toastification (2 rc.5 dist). It has valid esm export but not exports field. And main field which is commonJS is problematic with vite output.

As a simple solution, add it to build.transpile:

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['vue-toastification'],
  },
});

https://stackblitz.com/edit/github-vmafic-84jxcs?file=app.vue,nuxt.config.ts,package.json

[MohammadKhalaji]

I have checked vue-toastification (2 rc.5 dist). It has valid esm export but not exports field. And main field which is commonJS is problematic with vite output.

As a simple solution, add it to build.transpile:

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['vue-toastification'],
  },
});

https://stackblitz.com/edit/github-vmafic-84jxcs?file=app.vue,nuxt.config.ts,package.json

Thanks, any idea why it breaks with nuxt3 RC9?

[patriksh]

With RC9 I'm getting the following in console with yarn dev:

 ERROR  Error while formatting vite error: {
  code: 'ERR_MODULE_NOT_FOUND'
}

There's absolutely nothing else in browser or in console, so I'm stuck.
I tried disabling all modules I added in my Nuxt config but it didn't lead to any success.

It's probably related to this but I might be wrong.

[FarhanShares]

I'm getting the same issue with RC9 for @aspida/axios package.

Adding it to build.transpile does work in production build but fails in development (shows no default export found).

So I tried build.transpile = [({ isDev }) => !isDev && '@axios/aspida']

But it didn’t work, aslo isDev type check error is shown on VSCode.

I just upgraded to RC9 2 days ago.

Edit:
As per #14729, nuxt 3 doesn’t yet support function in the build.transpile for the vite builder, this is specific to webpack builder.

[dargmuesli]

@dftd are you sure getting no error message at all is a variant of the bug reported in this thread? The behavior is different in what you describe, so I'd open a separate issue for getting a readable error message.

[RezaErfani67]

rc-11 work correctly but rc-12 shown this error in production

[manniL]

Closing here as main points (using build.transpile) have been mentioned. If there are still problems, please provide a reproduction and create a new issue! ☺️