Vite can't seem to find jsx-dev-runtime inside Docker container

[petervmeijgaard]

Describe the bug

I can't seem to get Vite with react-ts running inside a Docker container.

When trying to do so, I get the following error:

error when starting dev server:
Error: EACCES: permission denied, stat '/root/.node_modules/react/jsx-dev-runtime'
    at Object.statSync (node:fs:1538:3)
    at isDirectory (/var/www/node_modules/resolve/lib/sync.js:31:23)
    at loadNodeModulesSync (/var/www/node_modules/resolve/lib/sync.js:200:17)
    at Function.resolveSync [as sync] (/var/www/node_modules/resolve/lib/sync.js:107:17)
    at resolveFrom$3 (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:3911:29)
    at resolvePackageData (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30046:19)
    at /var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30426:15
    at Array.find (<anonymous>)
    at tryNodeResolve (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30425:44)
    at Context.resolveId (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30257:28)

I tried to use an alias for react/jsx-dev-runtime, as described here facebook/react#20235, but this doesn't seem to work which is probably because Vite is using Rollup instead of Webpack.

Reproduction

https://github.com/petervmeijgaard/vite-react-docker-example

System Info

System:
    OS: Linux 5.15 Pop!_OS 21.10
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 7.58 GB / 31.32 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Firefox: 96.0
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.4 
    vite: ^2.7.2 => 2.7.13

Used Package Manager

npm

Logs

> vite-react-docker-example@0.0.0 dev
> vite --debug

2022-01-31T09:52:51.121Z vite:config bundled config file loaded in 74.88ms
2022-01-31T09:52:51.127Z vite:config using resolved config: {
  plugins: [
    'vite:pre-alias',
    'alias',
    'vite:react-babel',
    'vite:react-refresh',
    'vite:react-jsx',
    'vite:modulepreload-polyfill',
    'vite:resolve',
    'vite:html-inline-script-proxy',
    'vite:css',
    'vite:esbuild',
    'vite:json',
    'vite:wasm',
    'vite:worker',
    'vite:asset',
    'vite:define',
    'vite:css-post',
    'vite:client-inject',
    'vite:import-analysis'
  ],
  server: {
    preTransformRequests: true,
    host: '0.0.0.0',
    port: 80,
    hmr: { port: 80 },
    watch: { usePolling: true },
    fs: { strict: true, allow: [Array], deny: [Array] }
  },
  resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  optimizeDeps: {
    include: [ 'react/jsx-dev-runtime' ],
    esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  },
  configFile: '/var/www/vite.config.ts',
  configFileDependencies: [ 'vite.config.ts' ],
  inlineConfig: {
    root: undefined,
    base: undefined,
    mode: undefined,
    configFile: undefined,
    logLevel: undefined,
    clearScreen: undefined,
    server: {}
  },
  root: '/var/www',
  base: '/',
  publicDir: '/var/www/public',
  cacheDir: '/var/www/node_modules/.vite',
  command: 'serve',
  mode: 'development',
  isProduction: false,
  build: {
    target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    polyfillModulePreload: true,
    outDir: '/var/www/dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    sourcemap: false,
    rollupOptions: {},
    minify: 'esbuild',
    terserOptions: {},
    write: true,
    emptyOutDir: null,
    manifest: false,
    lib: false,
    ssr: false,
    ssrManifest: false,
    reportCompressedSize: true,
    chunkSizeWarningLimit: 500,
    watch: null,
    commonjsOptions: { include: [Array], extensions: [Array] },
    dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  },
  preview: {
    port: undefined,
    strictPort: undefined,
    host: '0.0.0.0',
    https: undefined,
    open: undefined,
    proxy: undefined,
    cors: undefined
  },
  env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  assetsInclude: [Function: assetsInclude],
  logger: {
    hasWarned: false,
    info: [Function: info],
    warn: [Function: warn],
    warnOnce: [Function: warnOnce],
    error: [Function: error],
    clearScreen: [Function: clearScreen],
    hasErrorLogged: [Function: hasErrorLogged]
  },
  packageCache: Map(0) {},
  createResolver: [Function: createResolver]
}
2022-01-31T09:52:51.147Z vite:deps Crawling dependencies using entries:
  /var/www/index.html
2022-01-31T09:52:51.153Z vite:resolve 0.31ms /src/main.tsx -> /var/www/src/main.tsx
2022-01-31T09:52:51.156Z vite:resolve 1.79ms react -> /var/www/node_modules/react/index.js
2022-01-31T09:52:51.157Z vite:resolve 0.56ms react-dom -> /var/www/node_modules/react-dom/index.js
2022-01-31T09:52:51.158Z vite:resolve 0.64ms ./App -> /var/www/src/App.tsx
2022-01-31T09:52:51.160Z vite:deps Scan completed in 25.87ms: {
  react: '/var/www/node_modules/react/index.js',
  'react-dom': '/var/www/node_modules/react-dom/index.js'
}
error when starting dev server:
Error: EACCES: permission denied, stat '/root/.node_modules/react/jsx-dev-runtime'
    at Object.statSync (node:fs:1538:3)
    at isDirectory (/var/www/node_modules/resolve/lib/sync.js:31:23)
    at loadNodeModulesSync (/var/www/node_modules/resolve/lib/sync.js:200:17)
    at Function.resolveSync [as sync] (/var/www/node_modules/resolve/lib/sync.js:107:17)
    at resolveFrom$3 (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:3911:29)
    at resolvePackageData (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30046:19)
    at /var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30426:15
    at Array.find (<anonymous>)
    at tryNodeResolve (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30425:44)
    at Context.resolveId (/var/www/node_modules/vite/dist/node/chunks/dep-f5552faa.js:30257:28)

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] 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.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[petervmeijgaard]

I also tried to use Yarn, and that seems to work just fine. This issue is probably just NPM only

[sodatea]

Fixed by #7612 and will be shipped in the next patch.