New Vite requirements gives warning when building "for the first time"

[uranderu]

Describe the bug

Hi,

If I'm not mistaken since the new build changes introduced in PR #5332 I'm getting this error when building:

[WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

    tsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Now this is quite logical because the .svelte-kit folder is in my (and this repos) .gitignore. The folder (and the tsconfig.json file) does get generated after running once, but that isn't a solution since you'd generally build in a CI/CD pipeline.

I don't know if this is a problem or not, but thought it would be better to report it in any case.

Thanks for the amazing work you all have done! :)

Reproduction

My project where this is happening: link
Logs of a CI/CD step where you can see this: link

If you want to recreate it using my repo here are the steps:

• Clone my repo
• run npm install
• run npm run build

Logs

Relevant part:

Step 7/9 : RUN npm run build
 ---> Running in bef9c63132b9
> personal-website@0.0.1 build
> vite build
▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
    tsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

System Info

  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.53 
    @sveltejs/adapter-static: ^1.0.0-next.34 => 1.0.0-next.34 
    @sveltejs/kit: next => 1.0.0-next.360 
    svelte: ^3.44.0 => 3.48.0 
    vite: ^2.9.13 => 2.9.13

Severity

annoyance

Additional Information

My package.json file:

{
	"name": "personal-website",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"package": "svelte-kit package",
		"preview": "vite preview",
		"prepare": "svelte-kit sync",
		"test": "playwright test",
		"check": "svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
		"format": "prettier --write --plugin-search-dir=. ."
	},
	"devDependencies": {
		"@playwright/test": "^1.22.2",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/adapter-static": "^1.0.0-next.34",
		"@sveltejs/kit": "next",
		"@typescript-eslint/eslint-plugin": "^5.27.0",
		"@typescript-eslint/parser": "^5.27.0",
		"bootstrap": "^5.1.3",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"sass": "^1.49.11",
		"svelte": "^3.44.0",
		"svelte-check": "^2.7.1",
		"svelte-preprocess": "^4.10.5",
		"tslib": "^2.3.1",
		"typescript": "^4.7.2",
		"vite": "^2.9.13"
	},
	"type": "module"
}

[phenomen]

I have the same error and build fails on Netlify.

[benmccann]

Make sure you have the following line in your package.json. It will create the file when you run npm install.

		"prepare": "svelte-kit sync",

[uranderu]

Make sure you have the following line in your package.json. It will create the file when you run npm install.

		"prepare": "svelte-kit sync",

It's there. I've updated this issue with my entire package.json file just to be sure.

[benmccann]

I just ran the following commands and didn't see any issue:

git clone https://gitlab.com/uranderu/personal-website.git
cd personal-website/
npm install
npm run build

[Rich-Harris]

@phenomen this wouldn't fail the build, you're experiencing a different error in addition to this (harmless) warning

I have same issues with new Vite requirements, my console prompts an error about hydration:

root.svelte? [sm]:50      
       Uncaught (in promise) Error: options.hydrate only works if the component was compiled with the `hydratable: true` option

I don't know where to set hydratable to true.

This is my current svelte.config.js:

import adapter from '@sveltejs/adapter-static';
import * as fs from 'fs';
const pkg = JSON.parse(fs.readFileSync('./package.json'));
import preprocess from 'svelte-preprocess';
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const filePath = dirname(fileURLToPath(import.meta.url));
const scssPath = `${filePath}/src/lib/styles/`;

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess({
    scss: {
      sourceMap: true,
      prependData: `@import '${scssPath}localmixins.scss';`
    }
  }),
  vite: {
    adapter: adapter(),
    browser:{
      hydrate: true
    },
    config: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
      },
      build: {
        minify: true
      }
    },
    files: {
      lib: 'src/lib'
    },
    prerender: {
      default: true,
      crawl: true,
      onError: 'continue',
      enabled: true,
      entries: ['*']
    }
  }
};

export default config;

And my vite.config.js:

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit()]
};

export default config;

Tried to build a new project and see the changes but it must be something about my code, probably some of you can point me in the right direction.

Thanks in advance.

[benmccann]

@raccodee your issue is unrelated to this one. Please ask help questions on Discord

This needs to live in your vite.config.js:

      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
      },
      build: {
        minify: true
      }

The vite key should be removed from svelte.config.js and everything else within it should live directly in the config object without any intermediate keys

[uranderu]

I just ran the following commands and didn't see any issue:

git clone https://gitlab.com/uranderu/personal-website.git
cd personal-website/
npm install
npm run build

Hi, I've done some testing and I'm getting the same results as you. Indeed after running npm install I'm getting the .svelte-kit folder and then the error is gone when building. In my initial test on my PC I removed all the generated folders/files including the .svelte-kit folder which explains the error.

However, I'm still getting these issues on Gitlab CI/CD but I think that is an issue with them since I'm not getting these errors when running the dockerfile locally on my machine. And since @Rich-Harris said it is a harmless warning (and I'm not seeing any problems) I'm fine with it. Thank you for your help!

Edit: I've found out what caused the issue on Gitlab CI/CD. I didn't copy the "svelte.config.js" file before I ran "npm install" which ran "svelte-kit sync". I'm not going to clarify my weird (and now changed) Dockerfile but I wanted to update this comment since I accused Gitlab CI/CD.

[ogrotten]

And since @Rich-Harris said it is a harmless warning

Can you link to this please?

[uranderu]

@phenomen this wouldn't fail the build, you're experiencing a different error in addition to this (harmless) warning

There you go, it's in one of the comments marked off-topic above.

[ogrotten]

@phenomen this wouldn't fail the build, you're experiencing a different error in addition to this (harmless) warning

There you go, it's in one of the comments marked off-topic above.

Wow ok. Thanks I completely missed that... which would be the effect of hiding things in issue threads. It seems anti productive. Just because it's off topic doesn't mean it's irrelevant.

[ollyde]

Trying to migrate a project from 5 months ago ...

Created a new project
npm create vite@latest

Select SvelteKit and TypeScript

Try to run the project

[WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

    tsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json",

Getting a little sick of the constant breaking changes on SvelteKit.

[uranderu]

Trying to migrate a project from 5 months ago ...

Created a new project npm create vite@latest

Select SvelteKit and TypeScript

Try to run the project

[WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

    tsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json",

Normally this gets generated automatically on the first startup. Maybe try the official way to create a project? npm create svelte@latest my-app

Getting a little sick of the constant breaking changes on SvelteKit.

Five months ago SvelteKit was still in beta, so breaking changes were a possibility. Nevertheless, they warned people that breaking changes will occur. If I'm not mistaken it was right at the top of the README.