Sveltekit: New app errors

[strenkml]

Describe the bug Building a new Sveltekit app has the build error: error TS5101: Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error. Use 'verbatimModuleSyntax' instead.

After replacing importsNotUsedAsValues with verbatimModuleSyntax, the build throws the following error: src\app.html does not exist

To Reproduce

1. Generate new sveltekit app
2. Run the build or serve target

Expected behavior The the freshly created app builds and runs

[dgrbrady]

+1 to this, I'm seeing this as well. Also thought I'd mention that running the serve executor yields the same "src/app.html" does not exist error. And when I go to localhost:4200 I get this error logged to the console:

ailed to load url /.svelte-kit/generated/server/internal.js (resolved id: /.svelte-kit/generated/server/internal.js). Does the file exist?
12:15:09 PM [vite] Error when evaluating SSR module /node_modules/@sveltejs/kit/src/runtime/server/index.js: failed to import "/.svelte-kit/generated/server/internal.js"
|- Error: Failed to load url /.svelte-kit/generated/server/internal.js (resolved id: /.svelte-kit/generated/server/internal.js) in /path/to/my/nx/workspace/node_modules/@sveltejs/kit/src/runtime/server/index.js. Does the file exist?
    at loadAndTransform (file:///path/to/my/nx/workspace/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53376:21)

Not sure if the 2 are related, but guidance or suggestions is greatly appreciated! I'm on ubuntu and am trying to generate a sveltekit app under my apps/* directory.

Output from nx report:

  Node   : 18.16.1
   OS     : linux-x64
   npm    : 9.5.1
   
   nx                 : 17.0.1
   @nx/js             : 17.0.1
   @nx/jest           : 17.0.1
   @nx/linter         : 17.0.1
   @nx/eslint         : 17.0.1
   @nx/workspace      : 17.0.1
   @nx/cypress        : 17.0.1
   @nx/devkit         : 17.0.1
   @nx/eslint-plugin  : 17.0.1
   @nrwl/tao          : 17.0.1
   @nx/vite           : 17.0.1
   typescript         : 5.1.6
   ---------------------------------------
   Community plugins:
   @nxext/svelte     : 17.0.1
   @nxext/sveltekit  : 17.0.1
   @wanews/nx-pulumi : 0.27.0

[Jedliu]

@dgrbrady delete the .svelte-kit folder and restart the server or the vscode. The following problem will be solved.

Failed to load url /.svelte-kit/generated/server/internal.js

The files in the .svelte-kit should be like this

Copy the folders src and static from apps/your-sveltekit-app/ to the root. The following problem will be solved.

src\app.html does not exist

But the folder structure is not supposed to be like this.

When the server starts, there is a message:

The following Vite config options will be overridden by SvelteKit:
  - root

The server is loaded from the default source path. I tried to update the svelte.config.js to assign the new files path, but it doesn't work. This config file wasn't loaded at all. I move the svelte.config.js to the root of the nx file path. It was loaded then.

I'm still checking how to fix this. Hope someone could advise the right path. Thank you!

[Jedliu]

To make the svelte.config.js work in the root of the NX project, I have to add "type": "module", in the package.json which will break other NX apps. Here I attach thesvelte.config.js file.

Looking for a working solution.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
    files: {
      routes: 'apps/web/src/routes',
    }
  },
};

export default config;

[guernica0131]

Has this issue been resolved? I have the exact same issue and can't find a workable solution. Under no condition is it practical to have src in root for a micro service application

[Anthony-Jhoiro]

Hello! I created a PR on the Sveltekit repo that should fix the issue. If anyone wants to try it, I would appreciate any review!! https://github.com/sveltejs/kit/pull/12420

You only need to add the cwd option to your vite.config.ts like this:

	plugins: [sveltekit({cwd: __dirname})],

[kristianmandrup]

As @Anthony-Jhoiro mentioned, this is discussed in https://github.com/sveltejs/kit/pull/12410 and https://github.com/sveltejs/kit/pull/12420

I created a Feature Request for Sveltekit to have better support for Nx and looked more into what Nx does behind the scenes in https://github.com/sveltejs/kit/issues/12499

It looks like Nx should not be hardcoded to use cwd as process.cwd() but should allow an override as other monorepos like yarn, pnmp etc. do.

@dominikg I'm not sure this is needed, you can just set the cwd when invoking the scripts instead:

pnpm --dir apps/app1 build (npm and yarn have similar args)

Perhaps it should call process.chdir(dir) if a --dir argument is passed.

export interface RunOptions {
  dir: string;
  // more ...
}

export function withRunOptions<T>(yargs: Argv<T>): Argv<T & RunOptions> {
  return withVerbose(withExcludeOption(yargs))
    .option('dir', {
      describe: 'The dir to use as current working directory',
      type: 'string',
    })

        await import('./run-one').then((m) =>
          // set process cwd if args dir is set to override default
          if (args.dir) {
            process.chdir(args.dir)
          } 
          m.runOne(process.cwd(), withOverrides(args))
        );

These changes would have to be made in Nx core in https://github.com/nrwl/nx/blob/master/packages/nx/src/command-line/run/run-one.ts