Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RC9 Dependency Break - CJS Imports

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Comments:9 (2 by maintainers)

Top GitHub Comments

8reactions

patrikshcommented, 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.

2reactions

RezaErfani67commented, Oct 24, 2022

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

Top Results From Across the Web

Node Modules at War: Why CommonJS and ES ... - Code Red

ESM scripts can import CJS scripts, but only by using the “default import” syntax import _ from 'lodash' , not the “named import”...

Can TypeScript import both ESM and CJS dependencies?

Yes it can! For example, this is a fresh ES Module project with an ESM dependency (chalk) and a common.js dependency (aes-js):.

@storybook/docs-tools | Yarn - Package Manager

Fast, reliable, and secure dependency management. ... This library is used by most framework packages so it and its dependencies should be minimized ......

yarn.lock · master · GitLab.org / GitLab · GitLab

dependencies : 192. "@babel/helper-compilation-targets" "^7.13.0". 193. "@babel/helper-module-imports" "^7.12.13". 194. "@babel/helper-plugin-utils" "^7.13.0 ...

@storybook/csf-tools - NPM Package Versions - Socket - Socket.dev

7.0.0-alpha.48 (November 7, 2022) · Breaking Changes · Features · Bug Fixes · Maintenance · Build · Dependency Upgrades.