Cannot provide path aliases to Vite for Remix integration

chinanderm commented 1 year ago

Describe the bug

In an Nx monorepo we are using vanilla-extract to style components that are imported by a handful of Remix applications. When a Remix application has *.css.ts files directly, or imports one via a shared lib/package in the monorepo with a relative import, no issues exist. However, if the import is via a path alias (via tsconfig), Vite in the vanilla-extract integration package process cannot resolve the path of the import.

After some debugging and an investigation, we think we've found the problem at the call to vite.createServer() in packages/integration/src/compiler.ts. Here, there is no ability to pass in a resolve.alias Vite configuration to define aliases.

In the mean time, we've created a patch in our repo that adds in resolve.alias to the config object passed to vite.createServer(). This patch solves the problem for us in the short term but ideally Remix and/or the integration code in vanilla-extract can support an alias configuration, whether automatic or manual.

We've created a reproduction repo that can highlight the issue. A couple notes:

The example Remix app can be spun up using npm run example-app:dev
The code patch is not active in the repo. If you want to run with the patch, rename patches.off to patches.

@markdalgleish I know you're also on the Remix team so hopefully this can be a joint effort to resolve!

Reproduction

https://github.com/chinanderm/remix-vanilla-extract-vite-alias

System Info

System:
  OS: macOS 13.5
  CPU: (12) arm64 Apple M2 Pro
  Memory: 5.56 GB / 32.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn: 1.22.19 - /opt/homebrew/bin/yarn
  npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
Browsers:
  Chrome: 115.0.5790.170
  Safari: 16.6
npmPackages:
  @vanilla-extract/css: ^1.12.0 => 1.12.0 
  @vanilla-extract/sprinkles: 1.6.1 => 1.6.1

Used Package Manager

npm

Logs

✘ [ERROR] Failed to load url @my-shared-lib/sprinkles.css (resolved id: @my-shared-lib/sprinkles.css) in /Users/mattchinander/Documents/repos/remix-ve/apps/example-app/app/components/styles.css.ts. Does the file exist? [plugin vanilla-extract-plugin]
    ../../node_modules/vite-node/dist/server.cjs:325:15:
      325 │       result = await this.server.transformRequest(id);
          ╵                ^
    at loadAndTransform (file:///Users/mattchinander/Documents/repos/remix-ve/node_modules/vite/dist/node/chunks/dep-75f53616.js:54890:21)
    at ViteNodeServer._transformRequest (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/server.cjs:325:16)
    at ViteNodeServer._fetchModule (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/server.cjs:304:17)
    at ViteNodeRunner.directRequest (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/client.cjs:248:46)
    at ViteNodeRunner.cachedRequest (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/client.cjs:183:14)
    at ViteNodeRunner.dependencyRequest (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/client.cjs:231:14)
    at /Users/mattchinander/Documents/repos/remix-ve/apps/example-app/app/components/styles.css.ts:4:31
    at ViteNodeRunner.directRequest (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/client.cjs:339:5)
    at ViteNodeRunner.cachedRequest (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/client.cjs:183:14)
    at ViteNodeRunner.executeFile (/Users/mattchinander/Documents/repos/remix-ve/node_modules/vite-node/dist/client.cjs:160:12)
    at /Users/mattchinander/Documents/repos/remix-ve/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:764:29
    at queueFn (/Users/mattchinander/Documents/repos/remix-ve/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:520:24)
    at processQueue (/Users/mattchinander/Documents/repos/remix-ve/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:541:3)
  This error came from the "onLoad" callback registered here:
    ../../node_modules/@remix-run/dev/dist/compiler/plugins/vanillaExtract.js:136:12:
      136 │       build.onLoad({
          ╵             ~~~~~~
    at setup (/Users/mattchinander/Documents/repos/remix-ve/node_modules/@remix-run/dev/dist/compiler/plugins/vanillaExtract.js:136:13)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at handlePlugins (/Users/mattchinander/Documents/repos/remix-ve/node_modules/esbuild/lib/main.js:1326:9)
  The plugin "vanilla-extract-plugin" was triggered by this import
    app/components/MyComponent.tsx:1:24:
      1 │ import { MyStyle } from "./styles.css";
        ╵                         ~~~~~~~~~~~~~~
✘ [ERROR] Build failed with 1 error:
../../node_modules/vite-node/dist/server.cjs:325:15: ERROR: [plugin: vanilla-extract-plugin] Failed to load url @my-shared-lib/sprinkles.css (resolved id: @my-shared-lib/sprinkles.css) in /Users/mattchinander/Documents/repos/remix-ve/apps/example-app/app/components/styles.css.ts. Does the file exist? [plugin css-bundle-update-plugin]
    app/root.tsx:1:30:
      1 │ import { cssBundleHref } from "@remix-run/css-bundle";
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~
  This error came from the "onLoad" callback registered here:
    ../../node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:47:12:
      47 │       build.onLoad({
         ╵             ~~~~~~
    at setup (/Users/mattchinander/Documents/repos/remix-ve/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:47:13)
    at handlePlugins (/Users/mattchinander/Documents/repos/remix-ve/node_modules/esbuild/lib/main.js:1279:21)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

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.

askoufis commented 9 months ago

@chinanderm Is this still an issue with the new vite remix plugin and v4 of the VE vite plugin? We've made sure it works correctly with tsconfig paths.

chinanderm commented 9 months ago

@chinanderm Is this still an issue with the new vite remix plugin and v4 of the VE vite plugin? We've made sure it works correctly with tsconfig paths.

@askoufis I'm assuming it won't be once we're able to transition our Remix apps to the Vite integration. We haven't been able to do that yet as we're waiting on support for Remix+Vite within Shopify Hydrogen. That's coming soon though so I imagine we'll have a resolution on this within the next few weeks.

askoufis commented 9 months ago

@askoufis I'm assuming it won't be once we're able to transition our Remix apps to the Vite integration. We haven't been able to do that yet as we're waiting on support for Remix+Vite within Shopify Hydrogen. That's coming soon though so I imagine we'll have a resolution on this within the next few weeks.

Great! Thanks for the update.

vanilla-extract-css / vanilla-extract