nuxt: Dynamic glob imports does not work with vite

Is there is any update on this issue because i have the same problem

I would also be interested in a work around !

@danielroe Ok, took some time, but I found the issue.

It seems that the dynamic import is not working inside Nuxt components that aren’t top level components (it works in app.vue and pages). See the following reproduction : https://stackblitz.com/edit/github-l4ercq-4h6epp

Look for the following error in console : TypeError: Failed to resolve module specifier '~/assets/images/home/img.png'

Now, I try to use vite-plugin-dynamic-import to resolve this problem.
But in the end, I hope it can be integrated into vite.

import { defineNuxtConfig } from 'nuxt3';
import dynamicImport from 'vite-plugin-dynamic-import';

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  vite: {
    plugins: [
      dynamicImport(),
    ],
  },
});

2022-07-28

You may got the following error.

ERROR Unexpected token (1:0)

We have a PR that should further help here:

• https://github.com/vitejs/vite/pull/7485

About the warning, I think it is too strict. But these are quite useful in most cases. I wonder if we should have a global option to disable them, or if we should not warn by default and have a new flag that would warn about “possible” issues that users could use to debug these problems.

@danielroe I’m trying to dynamically import images from the assets folder, using your stackblitz example.

<script setup>
const val = 'img';
const img = await import(`~/assets/images/${val}.png`).then((r) => r.default);
</script>

But I get the following error : TypeError: Failed to resolve module specifier '~/assets/images/img.png'

Is it the right way of doing this ? What am I doing wrong ?

antfu

i Vite server using experimental vite-node...

<script setup>
import { defineAsyncComponent } from 'vue'

const themeName = "brand1";
const currentFile = "Product";
const AsyncComp = defineAsyncComponent(() => import(`./themes/${themeName}/products/${currentFile}.vue`));
</script>

<template>
  <div>
    <Component :is="AsyncComp" />
  </div>
</template>

[nuxt] [request error] Only URLs with a scheme in: file, data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
  at new NodeError (node:internal/errors:372:5)  
  at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:1120:11)  
  at defaultResolve (node:internal/modules/esm/resolve:1200:3)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)  
  at link (node:internal/modules/esm/module_job:78:36)

Just checked, it works with vite-node, with:

export default defineNuxtConfig({
  experimental: {
    viteNode: true
  }
})

However, even it works in the runtime, the warning is still thrown by Vite. To bypass the warning, add /* @vite-ignore */ to your import statement:

const pkg = await import(/* @vite-ignore */ '~/' + 'package.json').then((r) => r.default);

/cc @pi0 @patak-dev do you think we should be an option for vite to bypass this warning in this condition, or maybe this is just an anti-pattern we should ask users to be explicit about it?