vanilla-extract icon indicating copy to clipboard operation
vanilla-extract copied to clipboard

vite plugin fails to resolve files when full path starts with `/app` (remix, docker)

Open meatwallace opened this issue 10 months ago • 0 comments

Describe the bug

reporting a fairly obscure issue but it caught me up for a while so think it's worth noting:

  • using the vite plugin in combination with remix and docker
  • setting WORKDIR to /app causes compilation to fail with errors from resolveId, presumably because remix uses the app/ dir
  • changing the WORKDIR to anything else makes it work
  • i did NOT try this using a more traditional application (no remix) using a src/ directory with a mirroring /src WORKDIR in docker.
  • i suspect it might be something to do with the way getAbsoluteId works but i didn't dig too far

Reproduction

https://github.com/meatwallace/vite-remix-vanilla-extract-docker-repro

System Info

from my host PC. dockerfile is same node/npm/yarn but running in the official node slim image.

System:
    OS: Linux 5.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 25.41 GB / 31.31 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/20.12.2/bin/yarn
    npm: 10.5.0 - ~/.asdf/installs/nodejs/20.12.2/bin/npm
    pnpm: 9.0.6 - ~/.asdf/installs/nodejs/20.12.2/bin/pnpm
  npmPackages:
    @vanilla-extract/css: ^1.15.1 => 1.15.1 
    @vanilla-extract/vite-plugin: ^4.0.9 => 4.0.9 
    vite: ^5.1.0 => 5.2.10

Used Package Manager

yarn

Logs

Error: [remix] No CSS for file: /app/routes/_index.css.ts
file: /app/app/routes/_index.css.ts?client-route=1
    at Object.getCssForFile (/app/node_modules/@vanilla-extract/vite-plugin/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.prod.js:853:15)
    at Context.resolveId (/app/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.prod.js:172:79)
    at Object.resolveId (file:///app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51057:64)
    at async ModuleGraph._resolveUrl (file:///app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:64543:46)
    at async file:///app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:64445:45
    at async Promise.all (index 0)
    at async ModuleGraph.updateModuleInfo (file:///app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:64385:13)
    at async TransformContext.transform (file:///app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66456:39)
    at async Object.transform (file:///app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51133:30)
    at async getRouteModuleExports (/app/node_modules/@remix-run/dev/dist/vite/plugin.js:232:21) {
  plugin: 'remix',
  id: '/app/app/routes/_index.css.ts?client-route=1',
  pluginCode: "import '/app/app/routes/_index.css.ts.vanilla.css';\n" +
    "export var container = '_1pf1p030';",
  code: 'PLUGIN_ERROR',
  hook: 'transform',
  watchFiles: [
    '/app/app/entry.client.tsx',
    '/app/app/root.tsx',
    '/app/app/routes/_index.css.ts',
    '/app/app/routes/_index.tsx',
    '/app/package.json',
    '/app/node_modules/react/jsx-runtime.js',
    '/app/node_modules/@remix-run/react/dist/esm/index.js',
    '/app/node_modules/react/index.js',
    '/app/node_modules/react-dom/client.js',
    '/app/node_modules/@remix-run/react/dist/esm/browser.js',
    '/app/node_modules/@remix-run/react/dist/esm/components.js',
    '/app/node_modules/@remix-run/react/dist/esm/server.js',
    '/app/node_modules/@remix-run/react/dist/esm/scroll-restoration.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/index.js',
    '/app/node_modules/react-router-dom/dist/index.js',
    '/app/node_modules/react/cjs/react-jsx-runtime.production.min.js',
    '/app/node_modules/react/cjs/react.production.min.js',
    '/app/node_modules/react-dom/index.js',
    '/app/node_modules/@remix-run/react/dist/esm/errorBoundaries.js',
    '/app/node_modules/@remix-run/react/dist/esm/routes.js',
    '/app/node_modules/@remix-run/react/dist/esm/single-fetch.js',
    '/app/node_modules/react-router-dom/server.mjs',
    '/app/node_modules/@remix-run/react/dist/esm/_virtual/_rollupPluginBabelHelpers.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/cookies.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/formData.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/responses.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/single-fetch.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/server.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/sessions.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/sessions/cookieStorage.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/sessions/memoryStorage.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/upload/memoryUploadHandler.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/upload/errors.js',
    '/app/node_modules/@remix-run/server-runtime/dist/esm/dev.js',
    '/app/node_modules/react-dom/cjs/react-dom.production.min.js',
    '/app/node_modules/@remix-run/react/dist/esm/errors.js',
    '/app/node_modules/@remix-run/react/dist/esm/invariant.js',
    '/app/node_modules/@remix-run/router/dist/router.js'
  ]
}

Validations

meatwallace avatar May 01 '24 02:05 meatwallace