Types conflict
Opened this issue · 6 comments
tobiaszciesielski commented
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 commented
im having this problem too
tobiaszciesielski commented
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 commented
@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 commented
aving this problem too
I got the same problem
MattPua commented
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
}
shivarajnaidu commented
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