The repo does not run with the updates to Sveltekit

[abannsunny]

I downloaded the code and made a few changes to make it run.

I updated the code to make sure the project runs

renamed svelte.config.cjs to svelte.config.js

changed content to:

import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};

export default config;

rename the $layout.svelte to __layout.svelte

But when I browse to the site, I get this error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules@smui\button\index.js require() of ES modules is not supported. require() of C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules@smui\button\index.js from C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules@sveltejs\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules@smui\button\package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at nodeRequire (C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules\@sveltejs\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68211:17)
at ssrImport (C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules\@sveltejs\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68164:20)
at eval (C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\src\routes\__layout.svelte:7:31)
at instantiateModule (C:\Users\user\Downloads\smui-example-sveltekit-master\smui-example-sveltekit-master\node_modules\@sveltejs\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:166)

[abannsunny]

So I fixed it by changing the svelte.config.js file to this:

used the filter from this issue: https://github.com/hperrin/smui-example-sveltekit/issues/5#issue-869611128

import preprocess from 'svelte-preprocess';
import fs from 'fs';
const pkg = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf8'));

console.log(Object.keys(pkg.dependencies || {}))
/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
vite: () => ({

	ssr: {
        noExternal: Object.keys(pkg.dependencies || {}).filter((pkgName) =>
            pkgName.startsWith("@smui")
          ),
      }	
})
	}
};

export default config;

[abannsunny]

This fixes the issue #7

[geoidesic]

Doesn't work for me. I get

3:07:31 PM [vite] Error when evaluating SSR module /node_modules/@smui/ripple/Ripple.js:
TypeError: Cannot destructure property 'applyPassive' of '__vite_ssr_import_1__.events' as it is null.
    at eval (/node_modules/@smui/ripple/Ripple.js:9:9)
    at instantiateModule (/Users/repo/GitHub/sveltekit-smui-starter/node_modules/@sveltejs/kit/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:68783:166)
Cannot destructure property 'applyPassive' of '__vite_ssr_import_1__.events' as it is null.
TypeError: Cannot destructure property 'applyPassive' of '__vite_ssr_import_1__.events' as it is null.
    at eval (/node_modules/@smui/ripple/Ripple.js:9:9)
    at instantiateModule (/Users/repo/GitHub/sveltekit-smui-starter/node_modules/@sveltejs/kit/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:68783:166)

[geoidesic]

Actually yours does work. The reason it's not working for me is that I tried to add in route aliases. How can we add route aliases with this config?

I tried this:

import preprocess from "svelte-preprocess";
import fs from "fs";
import path from "path";

const pkg = JSON.parse(
  fs.readFileSync(new URL("package.json", import.meta.url), "utf8")
);

console.log(Object.keys(pkg.dependencies || {}));
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess({
    scss: {
      // not mandatory but nice to have for concise imports
      includePaths: [path.resolve("./static/css")],
    },
  }),

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",
    vite: () => ({
      resolve: {
        alias: {
          $static: path.resolve("./static"),
        },
      },
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}).filter(pkgName =>
          pkgName.startsWith("@smui")
        ),
      },
    }),
  },
};

export default config;

[abannsunny]

on the sveltekit FAQs https://kit.svelte.dev/faq

All you have to do is:

" First, you need to add it to the Vite configuration. In svelte.config.js add vite.resolve.alias:

// svelte.config.js
import path from 'path';

export default {
	kit: {
		vite: {
			resolve: {
				alias: {
					$utils: path.resolve('./src/utils')
				}
			}
		}
	}
};

Then, to make TypeScript aware of the alias, add it to tsconfig.json (for TypeScript users) or jsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "$utils/*": ["src/utils/*"]
    }
  }
}

"

Are you missing the tsconfig or jsconfig section?

I was able to get path aliases to work. using the above 2 steps