🐞Wrong version of `@master/css` as dependency of `@master/css.svelte`

[Oskar Gmerek]

Description

I set up a new SvelteKit project. While integrating with masterCSS, I started to encounter errors:

[vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/@master/css.svelte/dist/CSSProvider.svelte:19:9: ERROR: No matching export in "node_modules/@master/css.svelte/node_modules/@master/css/dist/index.mjs" for import "MasterCSS"
node_modules/@master/css.svelte/dist/CSSProvider.svelte:19:20: ERROR: No matching export in "node_modules/@master/css.svelte/node_modules/@master/css/dist/index.mjs" for import "initRuntime"
    at failureErrorWithLog (/Users/macbook/Desktop/sveltekit/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/macbook/Desktop/sveltekit/node_modules/esbuild/lib/main.js:1058:25
    at /Users/macbook/Desktop/sveltekit/node_modules/esbuild/lib/main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I started by deleting the .svelte-kit generated files, node-modules, and package manager lock files. I reinstalled and restarted, but it didn't help.

Next, I dived into the source code to find the cause.

I noticed that the library @master/css.svelte doesn't use the version of @master/css that I installed but installed its own version.

When I go to /node-modules/@master/css.svelte/node-modules/@master/css/package.json, I can see:

{"name":"@master/css","scripts":{"build":"aron pack --platform=node","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"A Virtual CSS language with enhanced syntax ~13KB","author":"Aoyue Design LLC.","funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/css"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":["./src/polyfills/css-escape.ts"],"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","browser":"./dist/index.browser.js","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/keyframes.css":"^2.0.0-beta.99","@master/normal.css":"^2.0.0-beta.99"},"devDependencies":{"to-extend":"^1.4.6"},"version":"2.0.0-beta.99"}

I don't quite understand how 'beta.99' appears there, but I have no illusions; it is certainly the cause of the above errors.

Reproduction

Just follow docs for svelte integration using bun as a package manager.

System Informations

Browser: N/A
OS: macOS Sonoma 14.1
Node.js: 18.16.1
Package Manager: bun 1.0.7

[Oskar Gmerek]

Additional info:

Long time ago I noticed that is some kind of mismatch with the masterCSS npm packages versions.
I have installed an extension in VS Code for checking outdated dependencies.
This extensions checking every dependency, one by one when triggered.
There is also an option to detect latest prereleases.

I using this extension intensively from long time (like two years or even longer) and honestly I didn't catch any version mismatches with any libraries other than masterCSS.
For masterCSS I often getting info that the latest prerelease is a older version than is it.

For example, currently I have installed:

    "@master/css": "2.0.0-beta.186",
    "@master/css.svelte": "2.0.0-beta.186",
    "@master/normal.css": "2.0.0-beta.186",

And I getting info from this extension than latest available prereleases are:

• 2.0.0-beta.186 for @master/css,
• 2.0.0-beta.131 for @master/css.svelte,
• 2.0.0-beta.84 for @master/normal.css

After writing everything above, I went to npm to double check and I see why is that. The beta versions are beta.186 for all of that packages, but css.svelte and normal.css have latest versions suggested by the extension.
beta version > latest version what is making version mismatch.

When I started to write this additional info I was thinking that can be related to original report, but now I'm not sure.
Any way, latest version should be updated on releasing beta's of css.svelte and normal.css packages before get to v1.

[Oskar Gmerek]

If someone will stuck with this problem, then the temporary workaround is a follow:

Add this to your main package.json:

...
  "overrides": {
    "@master/css": "2.0.0-beta.186",
    "@master/css.svelte": "2.0.0-beta.186",
    "@master/normal.css": "2.0.0-beta.186",
    "@master/keyframes.css": "2.0.0-beta.186"
  },
...

[Aron]

@oskar-gmerek Thanks for describing the problem clearly!

This is a transition period, some packages are added during the Beta period, and usually version releases are only marked as stable versions (latest). If you don't suffix @beta like npm i @master/css@beta, it won't install the actual latest version, which is normal behavior.

At this stage your solution is correct. Individually specify installation into package.json dependencies.