Error [ERR_MODULE_NOT_FOUND] of "dayjs"

[gezichenshan]

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

[amihhs]

Maybe it can make it work properly.
@nathanchase/nuxt-dayjs-module

[mdi-9]

I have the same problem with ant, the above module does not help.

[wengys]

Similar problem, no idea why the project works in rc6, but rc8 throws

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\wengy\Desktop\3\code\node_modules\lodash-es\isPlainObject' imported from C:\Users\wengy\Desktop\3\code\.nuxt\dist\server\server.mjs
Did you mean to import lodash-es/isPlainObject.js?

The source of this error is code below from server.mjs:

// --------------------
// Request: lodash-es/isPlainObject
// Parents: 
// - /node_modules/ant-design-vue/es/_util/props-util/index.js ($id_58i5w1xCb7)
// - /node_modules/ant-design-vue/es/card/Card.js ($id_1PkeLt0Orb)
// - /node_modules/ant-design-vue/es/input/Search.js ($id_Bmzi2q9P7g)
// Dependencies: 

// --------------------
const $id_fxYb3R0yF6 = (global, module, _, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) =>
import("lodash-es/isPlainObject")
  .then(r => {
    if (r.default && r.default.__esModule)
      r = r.default
    exports.default = r.default
    ssrExportAll(r)
  })
  .catch(e => {
    console.error(e)
    throw new Error("[vite dev] Error loading external \"lodash-es/isPlainObject\".")
  })

however, on rc6:

// --------------------
// Request: /node_modules/lodash-es/isPlainObject.js
// Parents: 
// - /node_modules/ant-design-vue/es/_util/props-util/index.js ($id_58i5w1xCb7)
// - /node_modules/ant-design-vue/es/card/Card.js ($id_1PkeLt0Orb)
// - /node_modules/ant-design-vue/es/input/Search.js ($id_Bmzi2q9P7g)
// Dependencies: 

// --------------------
const $id_UmMxNgf7en = (global, module, _, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) =>
import("file:///C:/workspace/code/node_modules/lodash-es/isPlainObject.js")
  .then(r => {
    if (r.default && r.default.__esModule)
      r = r.default
    exports.default = r.default
    ssrExportAll(r)
  })
  .catch(e => {
    console.error(e)
    throw new Error("[vite dev] Error loading external \"C:/workspace/code/node_modules/lodash-es/isPlainObject.js\".")
  })

[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

[amihhs]

https://v3.nuxtjs.org/guide/going-further/esm#troubleshooting-esm-issues

[mdi-9]

 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'],
    },

[danielroe]

Let's track root cause in #14597.