npm run generate breaks when import contains re-export `export { default as xxx } from 'ooo'`

[mmis1000]

Environment

Nuxt project info:

---

• Operating System: Darwin
• Node Version: v14.18.2
• Nuxt Version: 3.0.0-rc.3
• Package Manager: [email protected]
• Builder: vite
• User Config: typescript, publicRuntimeConfig, buildModules, alias, vite
• Runtime Modules: -
• Build Modules: @pinia/[email protected]

---

Reproduction

https://codesandbox.io/s/angry-johnson-3h59db?file=/app.vue

Run npm run generate from the terminal.

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>
<script>
// the swiper js package has re-export in entry point
import { Pagination } from "swiper";
console.log(Pagination);

export default {};
</script>

Describe the bug

If package you used contains re-export syntex, then npm run generate didn't work.

Additional context

The import was incorrectly resolved to import Pagination from './modules/pagination/pagination.js'; in the /sandbox/.nuxt/prerender/chunks/app/server.mjs . and thus break the build

Logs

ERROR  [nuxt] [request error] Cannot find module '/sandbox/.nuxt/prerender/chunks/app/modules/pagination/pagination.js' imported from /sandbox/.nuxt/prerender/chunks/app/server.mjs
  at new NodeError (internal/errors.js:322:7)
  at finalizeResolution (internal/modules/esm/resolve.js:308:11)
  at moduleResolve (internal/modules/esm/resolve.js:731:10)
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
  at Loader.resolve (internal/modules/esm/loader.js:89:40)
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
  at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
  at link (internal/modules/esm/module_job.js:75:36)

[hassanshebbani]

Found the solution: add swiper to your build transpile inside nuxt.config.ts

nuxt package version: 3.0.0-rc.4 my swiper package version: ^8.2.5;

import { defineNuxtConfig } from "nuxt";

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

[EmmyMay]

Found the solution: add swiper to your build transpile inside nuxt.config.ts

nuxt package version: 3.0.0-rc.4 my swiper package version: ^8.2.5;

import { defineNuxtConfig } from "nuxt";

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

Love you man. This worked.

[EmmyMay]

Can anyone please explain why this works? I'm using vite in a project which supports native esm, why do O need to transpile

[issue-up[bot]]

Upstream issue created:

• https://github.com/unjs/nitro/issues/386