New svelte-kit issues

[antonha]

Hi! First and foremost, thanks for maintaining this library. Really helpful!

There seems to be some new issues around svelte-kit and ESM imports. I have looked at the previous two issues around this - this seems to be popping up again with newer versions of svelte-kit.

Steps to reproduce:

1. Go into the svelte-highlight/examples/sveltekit folder
2. Run yarn upgrade && yarn install (example commit at antonha@25efe8d)
3. Run yarn dev
4. Go to localhost:3000

I've added an example commit

Expected behavior would of course be to see the example. Actual behavior is that an error message is shown:

500

module is not defined

ReferenceError: module is not defined
    at /node_modules/highlight.js/lib/core.js:2500:1
    at instantiateModule (svelte-highlight/examples/sveltekit/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:68783:166)

It seems like a lot of whack-a-mole with issues from svelte-kit? I am not that good of a front-end engineer, so I have a hard time really understanding these issues. Mostly reporting to see if I'm crazy or not.

Again, thanks for this library!

[metonym]

@antonha Thank you for raising this issue.

I've upgraded the SvelteKit example and was able to reproduce your error.

It appears that the error does not originate from the highlight.js package itself because it already contains an exports map for each folder; it should automatically resolve to the ES or CJS entrypoints.

highlight.js/package.json

"exports": {
    ".": {
      "require": "./lib/index.js",
      "import": "./es/index.js"
    },
    "./package.json": "./package.json",
    "./lib/common": {
      "require": "./lib/common.js",
      "import": "./es/common.js"
    },
    "./lib/core": {
      "require": "./lib/core.js",
      "import": "./es/core.js"
    },
    "./lib/languages/*": {
      "require": "./lib/languages/*.js",
      "import": "./es/languages/*.js"
    },
    "./scss/*": "./scss/*",
    "./styles/*": "./styles/*",
    "./types/*": "./types/*"
  }

Rather, the error is caused by the actual Svelte component Highlight.svelte; it imports the core module directly, which resolves to the CJS entry point in the latest SvelteKit set-up.

svelte-highlight/src/Highlight.svelte

import hljs from "highlight.js/lib/core";

Suggested workaround

Instruct vite to optimize the highlight.js/lib/core module:

svelte.config.js

import adapter from "@sveltejs/adapter-node";

/** @type {import('@sveltejs/kit').Config} */
export default {
  kit: {
    adapter: adapter(),
    target: "#svelte",
+    vite: {
+      optimizeDeps: {
+       include: ["highlight.js/lib/core"],
+      },
+    },
  },
};

[antonha]

The work-around worked for me, thank you!

[aslak01]

This method doesn't work for me:

> Failed to resolve force included dependency: highlight.js/lib/core
Error: Failed to resolve force included dependency: highlight.js/lib/core
    at optimizeDeps (/Users/a/dev/pancake/kitcake1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:65252:27)
    at async runOptimize (/Users/a/dev/pancake/kitcake1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:69054:48)
    at async Object.createServer (/Users/a/dev/pancake/kitcake1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-bc228bbb.js:69083:9)
    at async Watcher.init_server (file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index.js:3237:15)
    at async Watcher.init (file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index.js:3197:3)
    at async file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:622:20
file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index.js:3539
		this.vite.close();
		          ^

TypeError: Cannot read property 'close' of undefined
    at Watcher.close (file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index.js:3539:13)
    at process.<anonymous> (file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index.js:3187:9)
    at process.emit (node:events:365:28)
    at process.emit (node:domain:470:12)
    at process.exit (node:internal/process/per_thread:189:15)
    at handle_error (file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:582:10)
    at file:///Users/a/dev/pancake/kitcake1/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:634:4
 ERROR  Command failed with exit code 1.

[metonym]

@aslak01 Could you provide more info on your setup?

[aslak01]

Well, I've just copied the code straight from the readme/this thread into an otherwise working project, and got that error. The only thing that I can think of a bit non standard about that project is that it's using adapter: vercel(). Otherwise, running node 16 and pnpm.

[onderbakirtas]

I'm using same setup as @aslak01 and facing same issue as well. My Node version is 14 though.

[metonym]

@onderbakirtas What does your set-up look like?

The following works for me:

package.json

• @sveltejs/[email protected]
• @sveltejs/[email protected]

{
  "type": "module",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build"
  },
  "devDependencies": {
    "@sveltejs/adapter-vercel": "next",
    "@sveltejs/kit": "next",
    "svelte": "^3.42.3",
    "svelte-highlight": "^3.2.0"
  }
}

svelte.config.js

import adapter from "@sveltejs/adapter-vercel";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    target: "#svelte",
    adapter: adapter(),
    vite: {
      optimizeDeps: {
        include: ["highlight.js/lib/core"],
      },
    },
  },
};

export default config;

Both npm run dev and npm run build execute successfully.

[onderbakirtas]

@metonym Thanks, I ended up using use: directive to implement same thing.

[xleon]

In my case I had the above issue
> Failed to resolve force included dependency: highlight.js/lib/core

when using pnpm. It started working after installing the package with npm.

[metonym]

@xleon Nice catch. I was able to repro the error.

The issue is because vite cannot locate the highlight.js/lib/core to optimize, as pnpm does not flatten dependencies in the same way that NPM or Yarn do.

Two workarounds:

1. install highlight.js as a dependency: pnpm i highlight.js
2. shamefully hoist all modules (probably not what pnpm users want): pnpm i -D svelte-highlight --shamefully-hoist

---

EDIT: I've updated the docs to recommend installing highlight.js as a dependency