Vite + Linaria + exports field in package.json = crash

[nstepien]

Describe the bug

I tried setting up Playwright for component testing, which uses vite, in our existing components library repo, but I ended up hitting a roadblock with Vite using the exports field for linaria's local/relative imports.

Vite should ignore the exports field in the local package.json file.

What is actually happening is this error:

vite v3.2.4 building for production...
✓ 3 modules transformed.
[commonjs--resolver] Missing "./main_lquf2n.css" export in "undefined" package
error during build:
Error: Missing "./main_lquf2n.css" export in "undefined" package
    at bail (file:///D:/repos/vite-bug/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:32675:8)
    at resolve (file:///D:/repos/vite-bug/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:32752:10)
    at resolveExports (file:///D:/repos/vite-bug/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34128:12)
    at resolveDeepImport (file:///D:/repos/vite-bug/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34146:31)       
    at tryNodeResolve (file:///D:/repos/vite-bug/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33838:20)
    at Object.resolveId (file:///D:/repos/vite-bug/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33598:28)        
    at file:///D:/repos/vite-bug/node_modules/rollup/dist/es/shared/rollup.js:22748:40

If I remove the exports field then the error goes away, but I cannot remove it.

Reproduction

https:/nstepien/vite-bug

Steps to reproduce

1. Clone repo above
2. npm ci
3. npm run build

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (64) x64 AMD Ryzen Threadripper 3970X 32-Core Processor
    Memory: 16.33 GB / 31.86 GB
  Binaries:
    Node: 19.1.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.1.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.52)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vite: ^3.2.3 => 3.2.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[haoqunjiang]

Looks similar to #11020 (comment)
These things in the local package.json should be ignored by Rollup build.

[nstepien]

@sodatea if I use Rollup with a similar set up I do not get any errors. So I'm thinking it's an issue with Vite rather than Rollup.

[nstepien]

I should add that Vite crashes when running either vite or vite build.

[nstepien]

Same bug with [email protected]

[nstepien]

@Anber would you know anything about this bug with Vite+linaria?

[Anber]

@nstepien is it a Windows-specific bug? I tried https:/nstepien/vite-bug, and it works well.

[nstepien]

@Anber Mmh, I don't have another machine to confirm whether this is Windows-only 🤔
Thanks for checking though 🙏

[godon019]

@nstepien @Anber it works well on MacOS

[amanmahajan7]

Same issue with 4.1.0-beta.1

[nstepien]

I've looked into it more deeply,

Linaria outputs code like this:

import "D:/repos/vite-bug/main_lquf2n.css";

The path uses / instead of \, which Vite doesn't like.

If I patch Vite's resolvePlugin with the following:

const prefix1 = 'D:/repos/vite-bug/';
const prefix2 = 'D:\\repos\\vite-bug\\';
id = id.replace(prefix1, prefix2);

or

const prefix1 = 'D:/repos/vite-bug/';
const prefix2 = './';
id = id.replace(prefix1, prefix2);

then Vite + Linaria works as it should.

@Anber Is it an easy fix in Linaria to output windows absolute paths with \\?
I've opened a PR callstack/linaria#1201

[nstepien]

Fixed in Linaria.