Inconsistent CommonJS import in development and production

[andresespinosapc]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: vite
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-c5nszx?file=package.json

First run npm run dev and you'll not get the error, then run npm run build && npm start and you'll get it.

Describe the bug

When importing from a CommonJS module with this syntax: import { method } from 'module';, it works fine in development but it breaks on production.

Additional context

No response

Logs

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

  at async eval (./.output/server/chunks/handlers/renderer.mjs:11115:24)  
  at async eval (./.output/server/chunks/handlers/renderer.mjs:11169:64)  
  at async eval (./.output/server/chunks/handlers/renderer.mjs:33:22)  
  at async eval (./.output/server/node_modules/h3/dist/index.mjs:571:19)

[huang-julien]

HI ! did you try to transpile it ?

import { defineNuxtConfig } from 'nuxt';

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

[andresespinosapc]

@huang-julien I just tried and it doesn't throw the error if I transpile it. Anyway, I think it shouldn't work differently in development and production, or the transpile should be automatic.

[vaban-ru]

Same thing, i have error in dev mode, but it is work fine in production mode with transpile config option

[danielroe]

let's track in #14790.