import glob, operation not permitted #10306

GuillaumeChk · 2022-10-01T18:19:28Z

Describe the bug

I am displaying dynamically all images located in the Assets directory. In a SPA with Vue + Vite.
For this purpose, I am using

import.meta.glob from Vite
import.meta.glob("../assets/images/*.(jpg|JPG|png|PNG|svg)", { as: "url" }),
relative path binding
return new URL(`${subPath}`, import.meta.url).href).

Success in dev mode.
Error while building in production mode.

Reproduce

npm run build

Error

vite v3.1.4 building for production...
✓ 17 modules transformed.
[vite:import-glob] EPERM: operation not permitted, scandir 'C:\Documents and Settings'
file: C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project/src/views/AboutView.vue
error during build:
Error: EPERM: operation not permitted, scandir 'C:\Documents and Settings'

Minimal reproductible example

Click to expand!

From a default project vue cli with vite

Added images folder in Assets folder
Added images in this folder (copy the vue logo.svg)
Replaced the About.vue view like below

About.vue

<template>
  <div>
    <img
    v-for="url in imagesUrl"
    :key="url.name"
      :src="getImageUrl(url.name)"
      style="width: 50px; height: 50px"
    />
  </div>
</template>

<script setup>
function getImageUrl(subPath) {
  return new URL(`${subPath}`, import.meta.url).href;
}

let imagesUrl =  import.meta.glob("../assets/images/*.(jpg|JPG|png|PNG|svg)", { as: "url" });
</script>

Reproduction

https://github.com/GuillaumeChk/vite-project.git

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-6400 CPU @ 2.70GHz
    Memory: 3.42 GB / 7.95 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.53)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-vue: ^3.0.3 => 3.1.0
    vite: ^3.0.9 => 3.1.4

Used Package Manager

npm

Logs

Click to expand!

> vue-project@0.0.0 build
> vite build --debug

  vite:config bundled config file loaded in 112.54ms +0ms
  vite:esbuild init tsconfck (root: C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project) +0ms
  vite:esbuild init tsconfck (root: C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project) +3ms
  vite:esbuild init tsconfck (root: C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project) +3ms
  vite:esbuild init tsconfck (root: C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project) +2ms
  vite:esbuild init tsconfck end +11ms
  vite:esbuild init tsconfck end +2ms
  vite:esbuild init tsconfck end +2ms
  vite:esbuild init tsconfck end +2ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   resolve: { alias: [ [Object], [Object], [Object] ] },
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: undefined }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     external: [],
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   configFile: 'C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project/vite.config.js',
  vite:config   configFileDependencies: [
  vite:config     'C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project/vite.config.js'  vite:config   ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project',
  vite:config   base: '/',
  vite:config   publicDir: 'C:\\Users\\guill\\Desktop\\web dev freelance\\vite-project\\vue-project\\public',
  vite:config   cacheDir: 'C:\\Users\\guill\\Desktop\\web dev freelance\\vite-project\\vue-project\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'vite:watch-package-data',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:reporter',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },       
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +44ms
vite v3.1.4 building for production...
✓ 24 modules transformed.
[vite:import-glob] EPERM: operation not permitted, scandir 'C:\Documents and Settings'
file: C:/Users/guill/Desktop/web dev freelance/vite-project/vue-project/src/views/AboutView.vue     
error during build:
Error: EPERM: operation not permitted, scandir 'C:\Documents and Settings'

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

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

sapphi-red · 2022-10-02T10:49:04Z

This is happening because Vite transforms

return new URL(`${subPath}`, import.meta.url).href)

into

new URL((import.meta.glob("**", { eager: true, import: 'default', as: 'url' }))[subPath], self.location)

.
related docs
related code

To workaround this, change new URL(${subPath}, import.meta.url).href) to new URL(subPath, import.meta.url).href).

GuillaumeChk · 2022-10-02T12:50:09Z

Build passed, error not showing anymore, but images are not found in production mode npm run preview.

I added a console.log to display image path while calling getImageUrl function.

function getImageUrl(subPath) {
  console.log(new URL(subPath, import.meta.url).href)
  return new URL(subPath, import.meta.url).href;
}

Images path are correct in dev mode (clicking showing them well), but not found in prod mode.
The path uses /src/ instead of /dist/, I think.

prod mode console log
GET http://127.0.0.1:4173/src/assets/images/logo.svg 404 (Not Found)

sapphi-red · 2022-10-02T14:35:45Z

That behavior is correct.

I guess what you want is:

<template>
  <div>
    <img
    v-for="(url, key) in imagesUrl"
    :key="key"
      :src="url"
      style="width: 50px; height: 50px"
    />
  </div>
</template>

<script setup>

let imagesUrl =  import.meta.glob("../assets/images/*.(jpg|JPG|png|PNG|svg)", { as: "url", eager: true });

</script>

GuillaumeChk · 2022-10-02T15:34:28Z

Ok, it is working with import.meta.glob only, but if I still want to use the getImageUrl() for a specific image path, I get the vite import glob operation not permitted again!

In the example below, A and B sections works without the other, but not both at the same time!
When using both, this time it is the first image that is not found while B images works.

<template>
  <div>
    <!-- A -->
    <img :src="getImageUrl(path)">

    <!-- B -->
    <img
    v-for="(url, key) in imagesUrl"
    :key="key"
      :src="url"
      style="width: 50px; height: 50px"
    />
  </div>
</template>

<script setup>
// A
let path = "../assets/images/logo.svg";

function getImageUrl(subPath) {
	return new URL(subPath, import.meta.url).href;
}

// B
let imagesUrl =  import.meta.glob("../assets/images/*.(jpg|JPG|png|PNG|svg)", { as: "url", eager: true });

</script>

I think this is the real bug that block me.
I apologize I did not give all the details at the beginning, I tried to minimalize the problem and keep it as simple as possible, but I didn't expected a conflict between the 2 different imports.

GuillaumeChk · 2022-10-02T15:44:22Z

Well I found a workaround that is to write the path and the function like this:

// A
let path = "images/logo.svg";

function getImageUrl(subPath) {
	return new URL(`../assets/${subPath}`, import.meta.url).href;
}

// B unchanged

instead of:

// A
let path = "../assets/images/logo.svg";

function getImageUrl(subPath) {
	return new URL(subPath, import.meta.url).href;
}

// B unchanged

I think it can still be considered as a bug, but my problem is solved!

Thx a lot @sapphi-red 👍

sapphi-red · 2022-10-03T12:26:16Z

I guess this is what you want:

<template>
  <div>
    <img :src="getImageUrl(path)">
  </div>
</template>

<script setup>
let imagesUrl = import.meta.glob("../assets/images/*.(jpg|JPG|png|PNG|svg)", { as: "url", eager: true });

let path = "../assets/images/logo.svg";

function getImageUrl(subPath) {
	return imagesUrl[subPath];
}
</script>

GuillaumeChk added the pending triage label Oct 1, 2022

GuillaumeChk changed the title ~~[vite:import-glob] EPERM: operation not permitted~~ import glob, operation not permitted Oct 1, 2022

sapphi-red added the p2-edge-case Bug, but has workaround or limited in scope (priority) label Oct 2, 2022

github-actions bot removed the pending triage label Oct 2, 2022

sapphi-red mentioned this issue Oct 20, 2022

fix: leave fully dynamic import.meta.url asset (fixes #10306) #10549

Merged

9 tasks

patak-dev closed this as completed in #10549 Apr 2, 2023

patak-dev pushed a commit that referenced this issue Apr 2, 2023

fix: leave fully dynamic import.meta.url asset (fixes #10306) (#10549)

56802b1

github-actions bot locked and limited conversation to collaborators Apr 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

import glob, operation not permitted #10306

import glob, operation not permitted #10306

GuillaumeChk commented Oct 1, 2022 •

edited

sapphi-red commented Oct 2, 2022 •

edited

GuillaumeChk commented Oct 2, 2022

sapphi-red commented Oct 2, 2022

GuillaumeChk commented Oct 2, 2022 •

edited

GuillaumeChk commented Oct 2, 2022 •

edited

sapphi-red commented Oct 3, 2022 •

edited

import glob, operation not permitted #10306

import glob, operation not permitted #10306

Comments

GuillaumeChk commented Oct 1, 2022 • edited

Describe the bug

Reproduce

Error

Minimal reproductible example

Reproduction

System Info

Used Package Manager

Logs

Validations

sapphi-red commented Oct 2, 2022 • edited

GuillaumeChk commented Oct 2, 2022

sapphi-red commented Oct 2, 2022

GuillaumeChk commented Oct 2, 2022 • edited

GuillaumeChk commented Oct 2, 2022 • edited

sapphi-red commented Oct 3, 2022 • edited

GuillaumeChk commented Oct 1, 2022 •

edited

sapphi-red commented Oct 2, 2022 •

edited

GuillaumeChk commented Oct 2, 2022 •

edited

GuillaumeChk commented Oct 2, 2022 •

edited

sapphi-red commented Oct 3, 2022 •

edited