Vue Vite Docker WSL2. Internal server error: EACCES: permission denied, stat '/root/.node_modules/plugin-vue:export-helper'

[sshiling]

Describe the bug

Error running dev server in WSL2 Docker.

docker-compose:

  frontend:
    build: .
    command: npm run dev
    volumes:
      - ./:/frontend
    ports:
      - '8080:8080'

Dockerfile:

FROM node:lts-alpine
WORKDIR /frontend
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "dev"]

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: true,
    port: 8080
  }
})

Reproduction

https://github.com/sshiling/Vite-Vue-Docker-WSL2-Bug

System Info

System:
    OS: Linux 4.19 Ubuntu 20.04 LTS (Focal Fossa)        
    CPU: (1) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 129.67 MB / 979.44 MB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.15 - /usr/bin/npm

Used Package Manager

npm

Logs

frontend_1  |   vite v2.7.13 dev server running at:
frontend_1  |
frontend_1  |   > Local:    http://localhost:8080/
frontend_1  |   > Network:  http://172.19.0.2:8080/
frontend_1  |
frontend_1  |   ready in 259ms.
frontend_1  |
frontend_1  | 2:31:01 PM [vite] Internal server error: EACCES: permission denied, stat '/root/.node_modules/plugin-vue:export-helper'
frontend_1  |   Plugin: vite:import-analysis
frontend_1  |   File: /frontend/src/App.vue
frontend_1  |       at Object.statSync (node:fs:1536:3)
frontend_1  |       at isDirectory (/frontend/node_modules/resolve/lib/sync.js:31:23)
frontend_1  |       at loadNodeModulesSync (/frontend/node_modules/resolve/lib/sync.js:200:17)
frontend_1  |       at Function.resolveSync [as sync] (/frontend/node_modules/resolve/lib/sync.js:107:17)
frontend_1  |       at resolveFrom$3 (/frontend/node_modules/vite/dist/node/chunks/dep-f5552faa.js:3911:29)
frontend_1  |       at resolvePackageData (/frontend/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30046:19)
frontend_1  |       at /frontend/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30426:15
frontend_1  |       at Array.find (<anonymous>)
frontend_1  |       at tryNodeResolve (/frontend/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30425:44)
frontend_1  |       at Context.resolveId (/frontend/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30257:28)

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 https://github.com/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.

[imran-vz]

This is happening to me as well.
But I'm on PopOs, i don't think this is something to do with WSL.

frontend  | error when starting dev server:
frontend  | Error: Build failed with 11 errors:
frontend  | node_modules/.pnpm/resolve@1.22.0/node_modules/resolve/lib/sync.js:31:22: error: [plugin: vite:dep-scan] EACCES: permission denied, stat '/root/.node_modules/@heroicons/react/outline/SearchIcon'
frontend  | node_modules/.pnpm/resolve@1.22.0/node_modules/resolve/lib/sync.js:31:22: error: [plugin: vite:dep-scan] EACCES: permission denied, stat '/root/.node_modules/@heroicons/react/outline/SearchIcon'
frontend  | node_modules/.pnpm/resolve@1.22.0/node_modules/resolve/lib/sync.js:31:22: error: [plugin: vite:dep-scan] EACCES: permission denied, stat '/root/.node_modules/@heroicons/react/outline/SearchIcon'
frontend  | node_modules/.pnpm/resolve@1.22.0/node_modules/resolve/lib/sync.js:31:22: error: [plugin: vite:dep-scan] EACCES: permission denied, stat '/root/.node_modules/dayjs/plugin/relativeTime'
frontend  | node_modules/.pnpm/resolve@1.22.0/node_modules/resolve/lib/sync.js:31:22: error: [plugin: vite:dep-scan] EACCES: permission denied, stat '/root/.node_modules/dayjs/plugin/relativeTime'
frontend  | ...
frontend  |     at failureErrorWithLog (/app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:1493:15)
frontend  |     at /app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:1151:28
frontend  |     at runOnEndCallbacks (/app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:941:63)
frontend  |     at buildResponseToResult (/app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:1149:7)
frontend  |     at /app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:1258:14
frontend  |     at /app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:629:9
frontend  |     at handleIncomingPacket (/app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:726:9)
frontend  |     at Socket.readFromStdout (/app/client/node_modules/.pnpm/esbuild@0.13.15/node_modules/esbuild/lib/main.js:596:7)
frontend  |     at Socket.emit (node:events:390:28)
frontend  |     at addChunk (node:internal/streams/readable:315:12)
frontend exited with code 1

Getting the same error on Ubuntu 20.04 in combination with docker

Downgrading to 2.6.14 works as a quick workaround but should not be the fix. @patak-dev do you have any solution?

[imran-vz]

Downgrading to 2.6.14 works as a quick workaround but should not be the fix. @patak-dev do you have any solution?

This works

[joepagan]

Getting this on node:16-alpine with 2.6.14

[joepagan]

Just tried yarn install and yarn dev and that works... maybe it's an issue upstream with npm?

[Yakoot]

same problem, but works fine on node:16 with 2.6.14

[f-nyx]

I still get the error with both node-16 and node-16-alpine using version 2.6.14.

I found a workaround, if you mount your source directory in /root it works. This docker-compose.yml configuration works for me:

version: '3.2'
services:
  frontend:
    image: node:16-alpine
    working_dir: /root
    volumes:
      - ./frontend:/root
    command: npx vite --host

[f15u]

Just tried yarn install and yarn dev and that works... maybe it's an issue upstream with npm?

Using yarn seems resolve the problem.

For context:
Docker: node:16.14-alpine
npm: v8.3.1

[bbbboom]

It looks like this resolve#pull should be causing the problem.

[GonerGenesis]

I still get the error with both node-16 and node-16-alpine using version 2.6.14.

I found a workaround, if you mount your source directory in /root it works. This docker-compose.yml configuration works for me:

version: '3.2'
services:
  frontend:
    image: node:16-alpine
    working_dir: /root
    volumes:
      - ./frontend:/root
    command: npx vite --host

Worked for me but 'Ugh'. I ran into it by setting up a docker dev environment for a svelte kit app with vite.ssr.noExternalize option enabled for three.js

[Randomneo]

Same here on just linux (its not WSL problem). Solved with installing 2.5 version of vite

npm install vite@2.5

why i'm doing frontend??? :(

[Ca-moes]

Same here on just linux (its not WSL problem). Solved with installing 2.5 version of vite

npm install vite@2.5

why i'm doing frontend??? :(

Which Node version/docker image? Also trying to get it to work and currently using node:lts-gallium