question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing `.css.ts` files from other packages in a monorepo with Vite plugin

See original GitHub issue

Describe the bug

I’ve been testing out a vanilla-extract based component library (following patterns from Braid) along side a test site in a monorepo.

When trying to build the component package from source within the site via Vite, the virtual files aren’t being resolved properly (getting a 404)

I am not sure if this is an issue with either Vite, my setup/config, or the vanilla-extract plugin (possibly here at resolveId).

Link to reproduction

Examples repo 👉 @samrose3/pixels (yarn && yarn dev)

Example codesandbox with slight vite.config.ts modifications from above repo setup.

Screen Shot 2021-08-25 at 8 09 19 AM

Just a note, I have been able to achieve a similar monorepo cross-package compile using the Webpack plugin. That seems to work well as expected. Only Vite has been giving me trouble.

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.92 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 92.0.4515.159
    Chrome Canary: 95.0.4621.0
    Firefox Nightly: 93.0a1
    Safari: 14.1.2
  npmPackages:
    @vanilla-extract/vite-plugin: ^1.1.1 => 1.1.1 
    vite: ^2.4.4 => 2.4.4 
    webpack: ^5.50.0 => 5.50.0 

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
mattcompilescommented, Sep 1, 2021

Hey 👋,

Sorry it took me a bit to have a look at this. I think there’s a few different issues being raised here so it would be good to separate them out into separate issues. However, the initially raised issues here seems to be fixed by upgrading to the latest @vanilla-extract/vite-plugin and vite packages.

0reactions
mattcompilescommented, Sep 2, 2021

@samrose3 awesome. Going to close this issue. Feel free to make another one with the repro for the other problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Importing .css.ts files from other packages in a monorepo with ...
Just a note, I have been able to achieve a similar monorepo cross-package compile using the Webpack plugin. That seems to work well...
Read more >
Shared Options | Vite
Directory to save cache files. Files in this directory are pre-bundled deps or some other cache files generated by vite, which can improve...
Read more >
Setting up a monorepo with Lerna for a TypeScript project
Each individual package requires its own tsconfig.json file for correct relative paths. Other options can be extended from the tsconfig.json at ...
Read more >
An actual complete guide to typescript monorepos - Rahul Tarak
A good typescript monorepo guide. ... to the about workspace file we need a lerna.json where we set the packages ... Other relative...
Read more >
Work with Vite and NX - Medium
This practical post will help you combine Vite with the NX monorepo tool. ... In most of the time, it's a file that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found