Error [ERR_MODULE_NOT_FOUND] of "dayjs"

Environment

Nuxt CLI v3.0.0-rc.8 20:19:14 RootDir: /Users/user/nuxt-app 20:19:20 Nuxt project info: 20:19:20

---

• Operating System: Darwin
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.8
• Package Manager: pnpm@7.9.5
• Builder: vite
• User Config: build, meta, alias, plugins, modules, css, routes, vite, ssr
• Runtime Modules: @nuxtjs/tailwindcss@5.3.2
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/framework/issues/new 20:19:20

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

Reproduction

https://codesandbox.io/s/admiring-night-3gyvfc?file=/nuxt.config.ts

Describe the bug

Aiming to fix the “Hydration completed but contains mismatches” issue, I follow the link upgrade nuxt3 from rc.6 to rc.8.

My repo uses a 3rd party lib “ant-design-vue”: “^3.2.11”

In the reproduction link you will find in the Terminal that an error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/sandbox/node_modules/dayjs/plugin/weekday' imported from /sandbox/.nuxt/dist/server/server.mjs
Did you mean to import dayjs/plugin/weekday.js?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:318:11)
    at moduleResolve (internal/modules/esm/resolve.js:776:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:887:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at Loader.import (internal/modules/esm/loader.js:177:28)
    at importModuleDynamically (internal/modules/esm/translators.js:114:35)
    at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:30:14)
    at $id_y5OsMUnGHx (file:///sandbox/.nuxt/dist/server/server.mjs:35032:9) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I tried to add “dayjs” in build.transpile but then I got:

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'extend')
  at $id_YrvcHuiS93 (./.nuxt/dist/server/server.mjs:39591:31)  
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:112637:3)

Any solutions? It there no possibility to handle ESM and common js or mjs imports properly? I saw many these kind of issues.

Additional context

The issue “Hydration completed but contains mismatches” mess up my website when I do refresh the page.

So I change from rc.6 to rc.8 aiming to fix the hydration issue but now I encounter in this error.

Logs

No response

[arek125]

 alias: {
    'dayjs': 'dayjs/esm/'
  },
  build: {
    transpile: [
      "lodash-es",
      "@babel/runtime", // building time: Could not resolve import "@babel/runtime/helpers/esm/objectSpread2.js"
    ]
  },

https://github.com/amihhs/nuxt-ant-vue message component should need to receive incoming style

Thanks, also important line is:

    ssr: {
      noExternal: ['moment', 'compute-scroll-into-view', 'ant-design-vue','dayjs'],
    },

[amihhs]

 alias: {
    'dayjs': 'dayjs/esm/'
  },
  build: {
    transpile: [
      "lodash-es",
      "@babel/runtime", // building time: Could not resolve import "@babel/runtime/helpers/esm/objectSpread2.js"
    ]
  },

https://github.com/amihhs/nuxt-ant-vue message component should need to receive incoming style