how to use svelte-package in a monorepo

[hawaiiH]

Describe the bug

When setting up a monorepo with a SvelteKit application, I encounter a build error. The npm i command installs packages correctly, but during the build process, the Svelte module (or Vite) seems to be read from the root node_modules instead of the local node_modules in the SvelteKit application.

Repository Structure

monorepo_root/
├─ clients/
│  ├─ sveltekit-application/

Relevant package.json Configurations

• root package.json:

{
  "workspaces": [
    "clients/*"
  ],
  "devDependencies": {
    "@types/eslint": "^8.56.2",
    "@typescript-eslint/eslint-plugin": "^6.20.0",
    "@typescript-eslint/parser": "^6.20.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-svelte": "^2.35.1",
    "prettier": "^3.2.4",
    "prettier-plugin-svelte": "^3.1.2",
    "typescript": "^5.3.3"
  }
}

• clients/sveltekit-application/package.json:

{
  "devDependencies": {
    "@sveltejs/adapter-node": "^4.0.1",
    "@sveltejs/kit": "^2.5.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "svelte": "^5.0.0-next.42",
    "svelte-check": "^3.6.3",
    "vite": "^5.0.12"
  }
}

Reproduction

1. Set up a monorepo with the above structure and package.json files.
2. Run npm i to install dependencies.
3. Attempt to build the SvelteKit application in clients/sveltekit-application.

Logs

"create_ssr_component" is not exported by "node_modules/svelte/src/internal/index.js", imported by ".svelte-kit/generated/root.svelte".
file: /my_path/monorepo_root/clients/sveltekit-application/.svelte-kit/generated/root.svelte:3:1
1: /* .svelte-kit/generated/root.svelte generated by Svelte v4.2.9 */
2: import {
3:   create_ssr_component,
     ^
4:   escape,
5:   missing_component,
error during build:
RollupError: "create_ssr_component" is not exported by "node_modules/svelte/src/internal/index.js", imported by ".svelte-kit/generated/root.svelte".
    at error (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at Module.error (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:12781:16)
    at Module.traceVariable (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:13218:29)
    at ModuleScope.findVariable (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:11635:39)
    at Identifier.bind (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:7217:40)
    at CallExpression.bind (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:4641:23)
    at CallExpression.bind (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:8854:15)
    at VariableDeclarator.bind (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:4641:23)
    at VariableDeclaration.bind (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:4637:28)
    at Program.bind (file:///my_path/monorepo_root/node_modules/rollup/dist/es/shared/node-entry.js:4637:28)

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 68.25 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.4.0 - /usr/local/bin/npm
    pnpm: 7.24.3 - /usr/local/bin/pnpm
Browsers:
    Chrome: 121.0.6167.139
    Safari: 17.2.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[OmidNejadabbasi]

@hawaiiH why is this not planned? I wanna develop a component library alongside a website front end and update it as i go. can't we do this?

[OmidNejadabbasi]

@hawaiiH see if this repo of mine meets your needs : https://github.com/omidNejadabbasi/notit

the ui-commons project is my components library

[ryoppippi]

Same!

[suamai]

Same problem here, doesn't seem to work well with npm workspaces when there are multiple svelte projects inside the monorepo

[GaryB432]

Rich's presentations are so enticing I want to use runes! but my monorepo that used to work now gives me this "create_ssr_component" is not exported. 😞

mkdir app-monorepo
cd .\app-monorepo\
npm init -y
mkdir apps
cd apps
npm create svelte@latest web
# select typescript and all the other options including svelte-5
cd ..
npm init -w .\apps\web -y
npm run build -w apps/web

Windows 11. Node 20

[eltigerchino]

Please provide a minimal reproduction in the form of a downloadable repository.

[OmidNejadabbasi]

@suamai @ryoppippi
I found the solution. You have to run svelte-package inside the sub-project for it to work. this command will create a dist folder in the sub-folder. You can also add the -w switch to watch the changes. Read more here : Packaging

Here is a working example of mine: https://github.com/omidNejadabbasi/notit
I run svelte-package -w inside ui-commons folder (my component lib) then I develop.

[multiplehats]

That works, but when I have a Svelte app (call it A), that imports things from the the Svelte Package app (call it B), it refreshes app A twice when something changes in the B app.

I think because the Svelte Package app is being watched for changes and has it's own HMR, and the A app sees a change in one of it's dependencies (the dist of B changes) so it reloads.

Have you found a fix for this?

[dominikg]

I'm going to convert this issue to a discussion and update the title to reflect that this is about building libraries with svelte-package in a monorepo. neither sveltekit nor svelte-package currently provide this setup as a first class feature, so its not a bug with either of them.

[hawaiiH]

I have started using the npm flag --install-strategy=nested. You can easily add this to the .npmrc file in the root directory:

install-strategy=nested

• and don't forget to delete node_modules and package-lock.json before implementing this change

[GaryB432]

nesting the node_modules works for me but it also nests all the other apps in my monorepo