Cannot read properties of undefined (reading 'stubModule')

[jasondonnellya]

Versions

• nuxt: v3
• node: v16.14

Reproduction

I am dynamically trying to import components but for some reason I can only import with a static url. Trying to do so using a variable name causes the error.

Works:

console.log(await import('~/components/Logo'))

Doesn't work:

const url = '~/components/Logo'
console.log(await import(url))

Steps to reproduce

I am calling the above code from the plugins directory in Nuxt3.

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    plugins: [
        '~/plugins/import.js' ,
    ],
})

What is Expected?

Should return the component.

What is actually happening?

Throws this error:

Cannot read properties of undefined (reading 'stubModule')
  at __instantiateModule__ (.../nuxt3-app/.nuxt/dist/server/server.mjs:22623:11)
  at __ssrLoadModule__ (.../nuxt3-app/.nuxt/dist/server/server.mjs:22614:25)
  at ssrImport (.../nuxt3-app/.nuxt/dist/server/server.mjs:22639:13)
  at ssrDynamicImport (.../nuxt3-app/.nuxt/dist/server/server.mjs:22650:12)
  at $id_7142e441 (.../nuxt3-app/.nuxt/dist/server/server.mjs:21407:7)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async __instantiateModule__ (.../nuxt3-app/.nuxt/dist/server/server.mjs:22667:3)  

[jasondonnellya]

I'm unsure if dynamic import actually supports anything other than string literals. I think CommonJS require() supports this however Nuxt3 isn't allowing any files I use in the /plugins directory to use cjs syntax.

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[jasondonnellya]

If anyone runs into this issue I found out a while ago that you can only use dynamic import for file names or after the first folder in import, I believe, so this isn't a Nuxt issue, I thought it was something to do with cjs/es module differences and Nuxt3 not allowing me to import cjs files as plugins etc.

I'm not sure of all the nuances but using:

const componentName = 'Logo'
console.log(await import(`~/components/${componentName}`))

Should hopefully work.

You also have to wrap the component and get it's default:

(await import(`~/components/${componentName}`)).default

[paidge]

I just tried this and that did not work :

<script>
const imgName = "myImg"
const img = await import("~/assets/img/projets/${imgName}.png")
const imgPath = img.default

export default {
  data() {
    return {
      imgPath
    }
  }
}
</script>

But this works :

<script>
const img = await import("~/assets/img/projets/myImg.png")
const imgPath = img.default

export default {
  data() {
    return {
      imgPath
    }
  }
}
</script>

[msdsk]

What is odd is that it work for the client in dev mode, if you guard the code with process.dev it will compile successfully and display what you need, just complaining about the hydration mismatch. Alas, it will not work after building it for ssr.