vanilla-extract
vanilla-extract copied to clipboard
vite plugin fails to resolve files when full path starts with `/app` (remix, docker)
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 fromresolveId
, presumably because remix uses theapp/
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
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.