Dynamic glob imports does not work with vite #12806

pi0 · 2021-11-04T12:47:04Z

Environment

Operating System: Linux
Node Version: v14.16.0
Nuxt Version: 3.0.0-27265876.3cd4494
Package Manager: npm@7.17.0
Bundler: Vite
User Config: -
Runtime Modules: -
Build Modules: -

Describe the bug

Unpredictable dynamic imports like import(~/data/${name}json)` does not work with vite (dev-bundler)

Reproduction

https://stackblitz.com/edit/github-obezmd?file=app.vue

Additional context

As a workaround, one can use webpack using vite: false in nuxt.config.

Missing implementation is here but we probably need more to fix this.

Logs

Cannot read properties of undefined (reading 'stubModule')
at __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:1771:11)
at __ssrLoadModule__ (file://./.nuxt/dist/server/server.mjs:1762:25)
at ssrImport (file://./.nuxt/dist/server/server.mjs:1787:13)
at ssrDynamicImport (file://./.nuxt/dist/server/server.mjs:1798:12)
at eval (file://./.nuxt/dist/server/server.mjs:1678:70)
at Module.withAsyncContext (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7295:21)
at setup (file://./.nuxt/dist/server/server.mjs:1678:47)
at _sfc_main.setup (file://./.nuxt/dist/server/server.mjs:1708:23)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6615:22)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6241:29)

The text was updated successfully, but these errors were encountered:

AbrahemAlhofe · 2021-12-06T21:21:23Z

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

pi0 · 2021-12-10T11:32:15Z

@AbrahemAlhofe Unfortunately not yet. We would probably need a better vite dev SSR implementation (with on-demand bundling server) to make this possible.

Blakeinstein · 2022-01-27T08:02:12Z

Do we have an existing workaround? Or is putting images in public the only way to go?

lacorde · 2022-01-28T08:49:15Z

I would also be interested in a work around !

Blakeinstein · 2022-01-28T14:44:19Z

I would also be interested in a work around !

Current workaround is to use webpack as the bundler instead of vite.

in your nuxt.config.ts set

export default defineNuxtConfig({
  ...
  vite: false,
  ...
})

jerrywu001 · 2022-02-17T08:41:06Z

can not use unocss with vite: false

vite: false,
build: {
  // node_modules/@nuxt/schema/dist/index.d.ts 2239
  plugins: [
    UnoCSS({
      presets: [
        presetTypography(),
        presetAttributify(),
        presetIcons(),
      ],
    }),
  ],
},

b-avb · 2022-03-28T16:35:31Z

Any other solution using vite and ssr?

pi0 · 2022-03-28T16:40:31Z

/cc @antfu Can you please confirm if upgrading to vite-node resolves this issue?

antfu · 2022-03-29T07:55:55Z

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?

patak-dev · 2022-03-29T10:04:04Z

We have a PR that should further help here:

feat: support use alias in dynamic import vitejs/vite#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.

caoxiemeihao · 2022-03-31T10:10:56Z

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)

ghost · 2022-05-06T10:51:07Z

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)

silencerspirit · 2022-06-21T19:52:31Z

Resolve problem by creating functional component

zhouzilong2020 · 2022-06-25T03:02:50Z

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(),
    ],
  },
});

Cloud you please provide some demo on how to use this?
I try this plugin but got Cannot read properties of undefined (reading 'stubModule') everytime.

caoxiemeihao · 2022-06-25T06:08:50Z

@zhouzilong2020
vite-plugin-dynamic-import is easy to use, It may not be the cause of your BUG.
Can you provide a minimized demo? I may need to Debug it.

mlsjla · 2022-06-29T05:10:07Z

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <[id] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/article/view/47492998283395072" >

engenes · 2022-07-30T17:45:20Z

I think this issue has been fixed?
https://github.com/vitejs/vite/blob/v3.0.4/packages/vite/CHANGELOG.md#304-2022-07-29

ennioVisco · 2022-09-07T12:56:46Z

Indeed, besides, since rc.9 vite-node is the new default. This issue should be closed. cc @pi0

danielroe · 2022-09-07T13:46:38Z

Thanks! Example: https://stackblitz.com/edit/github-l4ercq.

lacorde · 2022-09-09T09:49:00Z

@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 ?

danielroe · 2022-09-09T10:31:10Z

@lacorde That sounds right. What's not working? Do you have a reproduction?

lacorde · 2022-09-09T14:13:10Z

@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'

AnzhiZhang · 2023-03-09T14:42:10Z

This is bothering me, I can't even import the function of the Nuxt module
Example: https://stackblitz.com/edit/github-wtjope

danielroe · 2023-03-13T22:33:35Z

@AnzhiZhang I think that might be an issue to raise upstream with @nuxt/content - it's not related to this issue.

caoxiemeihao · 2023-03-14T00:17:01Z

Actually, It is limited by Vite's resolve function, which has certain restrictions.
If we force try to match paths as mush as possible, will this break Vite's design? @poyoho

poyoho · 2023-03-14T02:10:31Z

use the resolve function to replace the alias paths in importSource. Do you mean try to match paths as mush as possible before vite/dynamicImportVars plugin? I think it is ok.

caoxiemeihao · 2023-03-14T03:05:42Z

At present, vite-plugin-dynamic-import implements its own resolve function, only it looks i bit ugly.
vite/dynamicImportVars care to re-implement the resolve function? or as you say, we add a other plugin?

poyoho · 2023-03-14T03:17:44Z

IMO, vite plugin also can get the ctx.resolve, the vite/resolve is had too many feature. And now vite/dynamicImportVars no support alias?

caoxiemeihao · 2023-03-14T03:41:20Z

Here some cases:

// With out ends slash
import(`./foo-${id}`)

// Only alias here
import(`@/${id}`)

// node_modules's module and mybe load the `style` files.
// e.g. cssFilePath == 'css/hero.css' || 'less/hero.less', can includes slash
import('ui-framework/theme' + cssFilePath)

pi0 added bug nuxt3 labels Nov 4, 2021

pi0 mentioned this issue Nov 4, 2021

Async imports with variables throw error #12655

Closed

pi0 changed the title ~~Dynamic imports does not work with vite~~ Dynamic glob imports does not work with vite Nov 4, 2021

danielroe mentioned this issue Jan 19, 2023

No way of using dynamic images #13246

Closed

danielroe added vite 🍰 p2-nice-to-have and removed nuxt3 labels Jan 28, 2022

pi0 assigned antfu Mar 28, 2022

danielroe mentioned this issue Jan 19, 2023

dynamic glob imports don't work in SSR #14047

Closed

This comment was marked as duplicate.

Sign in to view

olivervorasai mentioned this issue Jan 19, 2023

ref is not defined when import.meta.glob is used when template has an html class #14242

Closed

danielroe closed this as completed Sep 7, 2022

danielroe reopened this Sep 9, 2022

danielroe added the 3.x label Jan 19, 2023

danielroe transferred this issue from nuxt/framework Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic glob imports does not work with vite #12806

Dynamic glob imports does not work with vite #12806

pi0 commented Nov 4, 2021

AbrahemAlhofe commented Dec 6, 2021

pi0 commented Dec 10, 2021

Blakeinstein commented Jan 27, 2022

lacorde commented Jan 28, 2022

Blakeinstein commented Jan 28, 2022 •

edited

jerrywu001 commented Feb 17, 2022 •

edited

b-avb commented Mar 28, 2022

pi0 commented Mar 28, 2022

antfu commented Mar 29, 2022

patak-dev commented Mar 29, 2022

caoxiemeihao commented Mar 31, 2022 •

edited

ghost commented May 6, 2022 •

edited by ghost

This comment was marked as duplicate.

silencerspirit commented Jun 21, 2022

zhouzilong2020 commented Jun 25, 2022

caoxiemeihao commented Jun 25, 2022 •

edited

mlsjla commented Jun 29, 2022

engenes commented Jul 30, 2022 •

edited

ennioVisco commented Sep 7, 2022

danielroe commented Sep 7, 2022

lacorde commented Sep 9, 2022

danielroe commented Sep 9, 2022

lacorde commented Sep 9, 2022 •

edited

AnzhiZhang commented Mar 9, 2023

danielroe commented Mar 13, 2023

caoxiemeihao commented Mar 14, 2023

poyoho commented Mar 14, 2023

caoxiemeihao commented Mar 14, 2023 •

edited

poyoho commented Mar 14, 2023

caoxiemeihao commented Mar 14, 2023 •

edited

Dynamic glob imports does not work with vite #12806

Dynamic glob imports does not work with vite #12806

Comments

pi0 commented Nov 4, 2021

Environment

Describe the bug

Reproduction

Additional context

Logs

AbrahemAlhofe commented Dec 6, 2021

pi0 commented Dec 10, 2021

Blakeinstein commented Jan 27, 2022

lacorde commented Jan 28, 2022

Blakeinstein commented Jan 28, 2022 • edited

jerrywu001 commented Feb 17, 2022 • edited

b-avb commented Mar 28, 2022

pi0 commented Mar 28, 2022

antfu commented Mar 29, 2022

patak-dev commented Mar 29, 2022

caoxiemeihao commented Mar 31, 2022 • edited

ghost commented May 6, 2022 • edited by ghost

This comment was marked as duplicate.

silencerspirit commented Jun 21, 2022

zhouzilong2020 commented Jun 25, 2022

caoxiemeihao commented Jun 25, 2022 • edited

mlsjla commented Jun 29, 2022

engenes commented Jul 30, 2022 • edited

ennioVisco commented Sep 7, 2022

danielroe commented Sep 7, 2022

lacorde commented Sep 9, 2022

danielroe commented Sep 9, 2022

lacorde commented Sep 9, 2022 • edited

AnzhiZhang commented Mar 9, 2023

danielroe commented Mar 13, 2023

caoxiemeihao commented Mar 14, 2023

poyoho commented Mar 14, 2023

caoxiemeihao commented Mar 14, 2023 • edited

poyoho commented Mar 14, 2023

caoxiemeihao commented Mar 14, 2023 • edited

Blakeinstein commented Jan 28, 2022 •

edited

jerrywu001 commented Feb 17, 2022 •

edited

caoxiemeihao commented Mar 31, 2022 •

edited

ghost commented May 6, 2022 •

edited by ghost

caoxiemeihao commented Jun 25, 2022 •

edited

engenes commented Jul 30, 2022 •

edited

lacorde commented Sep 9, 2022 •

edited

caoxiemeihao commented Mar 14, 2023 •

edited

caoxiemeihao commented Mar 14, 2023 •

edited