Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RC9 Dependency Break - CJS Imports #14790

Closed
MohammadKhalaji opened this issue Sep 3, 2022 · 10 comments
Closed

RC9 Dependency Break - CJS Imports #14790

MohammadKhalaji opened this issue Sep 3, 2022 · 10 comments

Comments

@MohammadKhalaji
Copy link

MohammadKhalaji commented Sep 3, 2022

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
Copy link
Author

How can I downgrade to RC8 anyways?

@aesyondu
Copy link

aesyondu commented Sep 3, 2022

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
Copy link
Author

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
Copy link
Member

pi0 commented Sep 3, 2022

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
Copy link
Author

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
Copy link

patriksh commented Sep 9, 2022

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
Copy link

FarhanShares commented Sep 11, 2022

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
Copy link
Member

@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
Copy link

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

image

@danielroe danielroe added the 3.x label Jan 19, 2023
@danielroe danielroe transferred this issue from nuxt/framework Jan 19, 2023
@manniL
Copy link
Member

manniL commented Jan 24, 2023

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! ☺️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants