nx-extensions
nx-extensions copied to clipboard
nxext
Sveltekit: Can't serve newly generated app
Describe the bug
After I generated a new app with nx g @nxext/sveltekit:app my-app, I get an error when trying to serve the app with npx nx serve my-app:
> nx run my-app:serve
> NX Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
at interpolateArgsIntoCommand (/Users/el_stefano/Documents/Development/nx-test/my-app/node_modules/nx/src/executors/run-commands/run-commands.impl.js:193:47)
at /Users/el_stefano/Documents/Development/nx-test/my-app/node_modules/nx/src/executors/run-commands/run-commands.impl.js:106:21
at Array.forEach (<anonymous>)
at normalizeOptions (/Users/el_stefano/Documents/Development/nx-test/my-app/node_modules/nx/src/executors/run-commands/run-commands.impl.js:104:22)
at /Users/el_stefano/Documents/Development/nx-test/my-app/node_modules/nx/src/executors/run-commands/run-commands.impl.js:41:28
at Generator.next (<anonymous>)
at fulfilled (/Users/el_stefano/Documents/Development/nx-test/my-app/node_modules/tslib/tslib.js:115:62)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
I created a nest app in the same workspace and it works.
To Reproduce Steps to reproduce the behavior:
- Generate new app with
nx g @nxext/sveltekit:app my-app. - Serve the app with
npx nx serve my-app
Expected behavior
npx nx serve my-app serves the app
I got the exact same issue. Any updates on this? I use nx 14.8.3 and am unable to serve up the svelte-kit app through nx. Just like the original reporter of this bug.
Basic workaround for simple use cases:
nx version: 14.6.4
Step 1: Required packages
@sveltejs/kit@sveltejs/adapter-autosvelte-preprocess[email protected](needs to be >= v3.0.0.) (might need to be installed globally)
Usage for npm:
npm i @sveltejs/kit svelte-preprocess @sveltejs/adapter-auto [email protected]
Step 2: Create vite config
// apps/[app name]/vite.config.ts
import type { UserConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
const config: UserConfig = {
plugins: [sveltekit()],
resolve: {
alias: {
// other libraries which are used by the app need to be declared
"@[my-org]/[library name]": resolve("../../libs/[library name]/src/index.ts"),
}
},
server: {
fs: {
// Allow access to node_modules (like @svelte/kit)
allow: ['../../node_modules'],
},
}
};
export default config;
Step 3: Edit Svelte Config
- Add an adapter
// apps/[app name]/svelte.config.js
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter(),
},
};
export default config;
Step 4: Refactor for new SvelteKit Router API
Step 4.1: Rename app/[app name]/src/routes/index.svelte to .../+page.svelte
Step 4.2: Replace app/[app name]/src/app.html
- Note how "%svelte.head%" changed to "%sveltekit.head%"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-prefetch>
<div>%sveltekit.body%</div>
</body>
</html>
Step 5: Change Executor
// apps/[app name]/project.json
{
...
"targets": {
"build": {
"executor": "nx:run-commands",
"options": {
"commands": ["vite build"],
"cwd": "apps/[app name]"
}
},
"serve": {
"executor": "nx:run-commands",
"options": {
"commands": ["vite"],
"cwd": "apps/[app name]"
}
},
"add": { //* unchanged *//
"executor": "@nxext/sveltekit:add"
},
"lint": { //* unchanged *//
"executor": "@nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["apps/vosfore-web-kit/**/*.{ts,svelte,spec.ts}"]
}
}
},
...
}
Step 6: Declaring dependencies for better nx integration (dep-graph etc.) [optional]
- For better integration, you can explicitly create a depency by importing the package in any
.tsfile. This is useful if you import a package in a.sveltefile and it doesn't show up in the dep-graph or in the build process - Please remember to also add the package to the
vite.config.tsfile (See Step 2)
// apps/[app name]/dependencies.ts
// @ts-nocheck
import {} from "@[my-org]/[library name a]";
import {} from "@[my-org]/[library name b]";
import {} from "@[my-org]/[library name c]";
@luechtdev thank you for the work around. I am getting the following error running npx nx run app1:build : 'resolve' is not exported by __vite-browser-external
I think I have followed all the steps. I have also added an outDir to the svelte.config.js to handle the multiple apps. Could that be it? Also I would expect sveltekit to add any aliases specified in the svelte.config.kit.alias object to both the vite.config.ts and the tsconfig.json. So why do you need to specify it explicitly?
@remkoboschker make sure resolve is imported from the path package.
I tried the whole process in a new nx project and could not replicate ur error.
Although I noticed that the outDir option did throw an error (ESM Error in my case).
I would suggest using the out option of your adapter options:
// svelte.config.js
// ...
kit: {
adapter: adapter({
out: "../../dist/app1"
}),
alias: {
"@test/lib1": resolve("../../libs/lib1/src/index.ts"),
}
}
This should allow multiple apps. PS.: Using svelte.kit.alias instead of vite.alias is working just fine as well.
I started migrating our mono-repo with a fresh start and it works out well now.
Please note that the static adapter does not support the out parameter https://github.com/sveltejs/kit/tree/master/packages/adapter-static#pages
Thank you again.
@remkoboschker Conflicts should be avoided since all build data should be saved in apps/app1/.svelte-kit.
PS Might be a good idea to remove all .svelte-kit folders from version control
Edit: I updated the workaround to also feature a small workaround for dependencies to other packages from .svelte files and support for the nx dep-graph. (Step 6)