Types conflict

[tobiaszciesielski]

I wanted to use remar with prism with TypeScript and I faced some types conflicts.
Maybe you know what is going on. ts-ignore resolved the thing.

I'm using following dependencies.

"dependencies": {
    "gray-matter": "^4.0.3",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1",
    "remark-prism": "^1.3.6",
    "sass": "^1.45.0",
    "scss": "^0.2.4"
  },
  "devDependencies": {
    "@types/node": "17.0.0",
    "@types/react": "17.0.37",
    "@types/remark-prism": "^1.3.0",
    "eslint": "8.5.0",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-import": "^2.25.3",
    "typescript": "4.5.4"
  }

Error appear in prism object

I imported plugins this way:

import html from 'remark-html';
import prism from 'remark-prism';
import { unified } from 'unified';

  Overload 1 of 3, '(plugin: Plugin<[], Node<Data>, Node<Data>>, ...settings: [boolean] | []): Processor<Node<Data>, Node<Data>, Node<Data>, void>', gave the following error.
    Argument of type 'Prism' is not assignable to parameter of type 'Plugin<[], Node<Data>, Node<Data>>'.
      The 'this' types of each signature are incompatible.
        Type 'Processor<void, Node<Data>, void, void>' is not assignable to type 'Processor<Settings>'.
          Types of property 'use' are incompatible.
            Type '{ <PluginParameters extends any[] = any[], Input = Node<Data>, Output = Input>(plugin: Plugin<PluginParameters, Input, Output>, ...settings: [boolean] | PluginParameters): UsePlugin<...>; <PluginParameters extends any[] = any[], Input = Node<...>, Output = Input>(tuple: [...] | [...]): UsePlugin<...>; (presetOrList:...' is not assignable to type '{ <S extends any[] = [(Settings | undefined)?]>(plugin: Plugin<S, Settings>, ...settings: S): Processor<Settings>; <S extends any[] = [(Settings | undefined)?]>(preset: Preset<...>): Processor<...>; <S extends any[] = [...?]>(pluginTuple: [...]): Processor<...>; (list: PluggableList<...>): Processor<...>; (processor...'.
              Types of parameters 'plugin' and 'plugin' are incompatible.
                The 'this' types of each signature are incompatible.
                  Type 'Processor<void, void, void, void> | Processor<void, any, void, void> | Processor<void, any, any, any> | Processor<any, any, void, void>' is not assignable to type 'Processor<Settings>'.
                    Type 'Processor<void, void, void, void>' is not assignable to type 'Processor<Settings>'.
                      Types of property 'use' are incompatible.
                        Types of parameters 'plugin' and 'plugin' are incompatible.
                          Type 'void | Transformer' is not assignable to type 'void | Transformer<any, any>'.
                            Type 'Transformer' is not assignable to type 'void | Transformer<any, any>'.
                              Type 'Transformer' is not assignable to type 'Transformer<any, any>'.
                                Types of parameters 'file' and 'file' are incompatible.
                                  Property 'contents' is missing in type 'import("/node_modules/vfile/lib/index").VFile' but required in type 'import("/node_modules/@types/remark-prism/node_modules/vfile/types/index").VFile'.
  Overload 2 of 3, '(tuple: [Plugin<any[], Node<Data>, Node<Data>>, ...any[]] | [Plugin<any[], Node<Data>, Node<Data>>, boolean]): Processor<...>', gave the following error.
    Argument of type 'Prism' is not assignable to parameter of type '[Plugin<any[], Node<Data>, Node<Data>>, ...any[]] | [Plugin<any[], Node<Data>, Node<Data>>, boolean]'.
      Type 'Prism' is not assignable to type '[Plugin<any[], Node<Data>, Node<Data>>, boolean]'.
  Overload 3 of 3, '(presetOrList: Preset | PluggableList): Processor<void, void, void, void>', gave the following error.
    Argument of type 'Prism' is not assignable to parameter of type 'Preset | PluggableList'.
      Type 'Prism' is missing the following properties from type 'Pluggable<any[]>[]': pop, push, concat, join, and 28 more.ts(2769)
index.d.ts(79, 5): 'contents' is declared here.
No quick fixes available

[miguelvictor]

im having this problem too

[tobiaszciesielski]

Based on https://github.com/leerob/nextjs-prism-markdown repo. I set following versions

    "remark": "12.0.1",
    "remark-html": "13.0.1",
    "remark-prism": "1.1.14",

and it did the job.
Notice that i removed ^ to avoid changing minor versions.

It proves that there is some problem in higher version in remark-prism

[stephencweiss]

@tobiaszciesielski - downgrading the remark versions was working for a few days for me, but suddenly I'm getting a very weird (to me) error:

./node_modules/http-proxy-agent/dist/agent.js:15:0
Module not found: Can't resolve 'net'

Import trace for requested module:
./node_modules/http-proxy-agent/dist/index.js
./node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js
./node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js
./node_modules/jsdom/lib/api.js
./node_modules/remark-prism/index.js
./utils/markdownToHtml.ts
./utils/index.ts
./pages/blog/[post].tsx

https://nextjs.org/docs/messages/module-not-found

The offending line is when I try to "use" prism in the following function:

import remark from "remark";
import html from "remark-html";
import prism from "remark-prism";

export async function markdownToHtml(markdown: string) {
  const result = await remark()
    // https://github.com/sergioramos/remark-prism/issues/265
    .use(html, { sanitize: false })
    .use(prism)
    .process(markdown);
  return result.toString();
}

export default markdownToHtml;

Any ideas?

[thaycacac]

aving this problem too

I got the same problem

[MattPua]

FYI for anyone who runs into this,

I solved it by resolving the missing dependencies via this add in package.json

  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "net": false,
    "tls": false,
    "child_process": false
  }

[yuvarajvemula]

i am also having same issue as tobiaszciesielski

I wanted to use remar with prism with TypeScript and I faced some types conflicts. Maybe you know what is going on. ts-ignore resolved the thing.

I'm using following dependencies.

"dependencies": {
    "gray-matter": "^4.0.3",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1",
    "remark-prism": "^1.3.6",
    "sass": "^1.45.0",
    "scss": "^0.2.4"
  },
  "devDependencies": {
    "@types/node": "17.0.0",
    "@types/react": "17.0.37",
    "@types/remark-prism": "^1.3.0",
    "eslint": "8.5.0",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-import": "^2.25.3",
    "typescript": "4.5.4"
  }

Error appear in prism object

I imported plugins this way:

import html from 'remark-html';
import prism from 'remark-prism';
import { unified } from 'unified';

  Overload 1 of 3, '(plugin: Plugin<[], Node<Data>, Node<Data>>, ...settings: [boolean] | []): Processor<Node<Data>, Node<Data>, Node<Data>, void>', gave the following error.
    Argument of type 'Prism' is not assignable to parameter of type 'Plugin<[], Node<Data>, Node<Data>>'.
      The 'this' types of each signature are incompatible.
        Type 'Processor<void, Node<Data>, void, void>' is not assignable to type 'Processor<Settings>'.
          Types of property 'use' are incompatible.
            Type '{ <PluginParameters extends any[] = any[], Input = Node<Data>, Output = Input>(plugin: Plugin<PluginParameters, Input, Output>, ...settings: [boolean] | PluginParameters): UsePlugin<...>; <PluginParameters extends any[] = any[], Input = Node<...>, Output = Input>(tuple: [...] | [...]): UsePlugin<...>; (presetOrList:...' is not assignable to type '{ <S extends any[] = [(Settings | undefined)?]>(plugin: Plugin<S, Settings>, ...settings: S): Processor<Settings>; <S extends any[] = [(Settings | undefined)?]>(preset: Preset<...>): Processor<...>; <S extends any[] = [...?]>(pluginTuple: [...]): Processor<...>; (list: PluggableList<...>): Processor<...>; (processor...'.
              Types of parameters 'plugin' and 'plugin' are incompatible.
                The 'this' types of each signature are incompatible.
                  Type 'Processor<void, void, void, void> | Processor<void, any, void, void> | Processor<void, any, any, any> | Processor<any, any, void, void>' is not assignable to type 'Processor<Settings>'.
                    Type 'Processor<void, void, void, void>' is not assignable to type 'Processor<Settings>'.
                      Types of property 'use' are incompatible.
                        Types of parameters 'plugin' and 'plugin' are incompatible.
                          Type 'void | Transformer' is not assignable to type 'void | Transformer<any, any>'.
                            Type 'Transformer' is not assignable to type 'void | Transformer<any, any>'.
                              Type 'Transformer' is not assignable to type 'Transformer<any, any>'.
                                Types of parameters 'file' and 'file' are incompatible.
                                  Property 'contents' is missing in type 'import("/node_modules/vfile/lib/index").VFile' but required in type 'import("/node_modules/@types/remark-prism/node_modules/vfile/types/index").VFile'.
  Overload 2 of 3, '(tuple: [Plugin<any[], Node<Data>, Node<Data>>, ...any[]] | [Plugin<any[], Node<Data>, Node<Data>>, boolean]): Processor<...>', gave the following error.
    Argument of type 'Prism' is not assignable to parameter of type '[Plugin<any[], Node<Data>, Node<Data>>, ...any[]] | [Plugin<any[], Node<Data>, Node<Data>>, boolean]'.
      Type 'Prism' is not assignable to type '[Plugin<any[], Node<Data>, Node<Data>>, boolean]'.
  Overload 3 of 3, '(presetOrList: Preset | PluggableList): Processor<void, void, void, void>', gave the following error.
    Argument of type 'Prism' is not assignable to parameter of type 'Preset | PluggableList'.
      Type 'Prism' is missing the following properties from type 'Pluggable<any[]>[]': pop, push, concat, join, and 28 more.ts(2769)
index.d.ts(79, 5): 'contents' is declared here.
No quick fixes available