search

giscus / giscus-component

Component library for giscus, a comment system powered by GitHub Discussions.
https://giscus-component.vercel.app
MIT License
315 stars 25 forks source link

Errors in SvelteKit #31

Closed shinokada closed 2 years ago

shinokada commented 2 years ago

I use mdsvex in my SvelteKit project. I tried to Giscus in a markdown file, but it returns an error.

My doc.svlete file:

<script>
  import Prism from "prismjs";
  import "prismjs/themes/prism.css";
  import "prism-themes/themes/prism-holi-theme.css";
  import { Giscus } from "@giscus/svelte";
</script>

<div class="max-w-3xl mx-auto pb-32">
  <div class="container mt-4 flex flex-wrap mx-auto pt-16">
    <slot />
    <Giscus
      repo="shinokada/svelte-flow"
      repoId="my-repoid"
      category="General"
      categoryId="my-id-here"
      mapping="pathname"
      reactions-enabled="1"
      emit-metadata="0"
      inputPosition="bottom"
      theme="light"
      lang="en"
      crossorigin="anonymous"
    />
  </div>
</div>

In one of markdown file:

---
layout: doc
---

<script>
  import { Card } from "svelte-flow";
</script>
bla bla

One of errors is:

<Layout_MDSVEX_DEFAULT> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: <Layout_MDSVEX_DEFAULT> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at Proxy.validate_component (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1722:15)
    at card.md:9:27
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at Object.default (root.svelte:43:47)
    at eval (/src/routes/__layout.svelte:127:64)
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at root.svelte:37:45
    at $$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at Object.render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1753:26)
    at render_response (file:///Users/shinichiokada/Svelte/svelte-flow/.svelte-kit/runtime/server/index.js:1147:28)

On my terminal error says:


[svelte-preprocess] PostCSS configuration was not passed or is invalid. If you expect to load it from a file make sure to install "postcss-load-config" and try again.

Error: Cannot find module '/Users/shinichiokada/Svelte/svelte-flow/postcss.config.cjs' imported from '/Users/shinichiokada/Svelte/svelte-flow/node_modules/lilconfig/dist/index.js'
12:16:26 PM [vite] Error when evaluating SSR module /src/routes/layouts/doc.svelte:
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60169:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60105:9)
12:16:26 PM [vite] Error when evaluating SSR module /src/routes/accordions/default.md:
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60169:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60105:9)
exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60169:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60105:9)

I have already postcss-load-config installed.

Any idea?

laymonage commented 2 years ago

I don't know, I've never used mdsvex before but I don't see any reason why it shouldn't work. The error message also doesn't say anything about giscus.

By the way, reactions-enabled should be reactionsEnabled and emit-metadata should be emitMetadata.

If that still doesn't work, you might want to try the giscus web component.

laymonage commented 2 years ago

The error seems to come from svelte-flow, not giscus.

shinokada commented 2 years ago

I removed node_modules and package-lock.json and npm i.

I get the following error:

12:36:41 PM [vite] Error when evaluating SSR module /src/routes/layouts/doc.svelte:
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:56246:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:56177:9)
...

VS Code gives an warning not able to find a declaration file.

image
laymonage commented 2 years ago

Can you try installing version 1.1.2-beta.1?

shinokada commented 2 years ago

Can I install like this?

npm i @giscus/svelte@1.1.2-beta.1
laymonage commented 2 years ago

Yes.

shinokada commented 2 years ago

I get this error:

<Giscus> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: <Giscus> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at Proxy.validate_component (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1722:15)
    at eval (/src/routes/layouts/doc.svelte:18:29)
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at default.md:10:27
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at Object.default (root.svelte:43:47)
    at eval (/src/routes/__layout.svelte:127:64)
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at root.svelte:37:45
    at $$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
laymonage commented 2 years ago

Check your package.json, is @giscus/svelte in devDependencies? If so, move it to dependencies and run npm i again.

laymonage commented 2 years ago

Please try with v2.0.0 and report back if the issue still happens.