[TypeScript] @mdx-js/rollup doesn't match Vite 3's plugin types
See original GitHub issueInitial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Affected packages and versions
@mdx-js/rollup 2.1.2
Link to runnable example
No response
Steps to reproduce
Create a vite.config.ts with:
import mdx from '@mdx-js/rollup';
import react from '@vitejs/plugin-react';
import { UserConfig } from 'vite';
const config: UserConfig = {
plugins: [
react({ jsxRuntime: 'classic' }),
mdx({
jsxRuntime: 'classic',
providerImportSource: '@mdx-js/react',
}) as any,
],
}
export default config;
Expected behavior
TypeScript should not show errors
Actual behavior
TypeScript shows errors:
error TS2322: Type 'Plugin' is not assignable to type 'PluginOption'.
Type 'Plugin' is not assignable to type 'Plugin_2'.
Types of property 'resolveId' are incompatible.
Type 'ObjectHook<(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>, {}> | undefined' is not assignable to type '((this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; ssr?: boolean | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>) | undefined'.
Type '{ handler: (this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>; order?: "pre" | ... 2 more ... | undefined; }' is not assignable to type '(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; ssr?: boolean | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>'.
Type '{ handler: (this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>; order?: "pre" | ... 2 more ... | undefined; }' provides no match for the signature '(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; ssr?: boolean | undefined; isEntry: boolean; }): ResolveIdResult | Promise<...>'.
38 mdx({
~~~~~
39 jsxRuntime: 'classic',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
42 }),
~~~~~~~~
at createTSError (/Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/index.ts:859:12)
at reportTSError (/Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/index.ts:863:19)
at getOutput (/Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/index.ts:1077:36)
at Object.compile (/Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/index.ts:1433:41)
at transformSource (/Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/esm.ts:400:37)
at /Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/esm.ts:278:53
at async addShortCircuitFlag (/Users/guoyunhe/Git/cratedx/node_modules/ts-node/src/esm.ts:409:15)
at async ESMLoader.load (node:internal/modules/esm/loader:359:20)
at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:47) {
diagnosticCodes: [ 2322 ]
}
Runtime
Node v16
Package manager
npm v8
OS
macOS
Build and bundle tools
Vite
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:7 (7 by maintainers)
Top Results From Across the Web
How to use @mdx-js/rollup with Vite? #1981 - GitHub
The issue is that, mdx is native ESM and your project is not native ESM. From vite's documentation. Note Vite supports using ES...
Read more >@mdx-js/rollup - npm
Rollup plugin for MDX. Latest version: 2.2.1, last published: 10 days ago. Start using @mdx-js/rollup in your project by running `npm i ...
Read more >Getting started - MDX
This article explains how to integrate MDX into your project. It shows how to use MDX with your bundler and JSX runtime of...
Read more >A really good MDX compiler. No runtime. With esbuild, Rollup ...
xdm is an MDX compiler that focusses on two things: Compiling the MDX syntax (markdown + JSX) to JavaScript; Making it easier to...
Read more >Typescript bold text - Caritas Castellaneta
See @rollup/plugin-babel. This type has allowed us to quickly and easily define style props They have roughly the same properties as the ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
What that means is that you are using pnpm. Which does not install peer dependencies. It means you need to install it.
This is fine for us, but not fine for Vite. Vite wants a version higher than
2.79.1
but lower than3.0.0
Yes. Install a lower version.
pnpm i -D rollup@2
Raise it with Vite folks or install v2 for them. Our package supports version 2 and 3.
Sure, I’ll try to do it when I wake up tomorrow. 🛏️
To-Do-rrow:
Check breaking change by(There’s no change invite
vite
)Write an issue tovite
if neededUpdate:
I checked dependencies in
vite
and I noticed that vite@3.2.4 consumes{ rollup: '^2.79.1' }
; And the dependency of rollup in this package was marked as{ rollup: '>=2' }
. After installation of@mdx-js/rollup
, thepnpm
prompted that:No idea of what that means, I installed rollup by
pnpm i -D rollup
and it gave me a version of>=3
, which will be used by@mdx-js/rollup
and conflicts with older version of^2.79.1
which is used byvite
. 😂That’s the problem. The breaking change was made by
rollup
major number and I just did something unconsciously that made this messy. Manually setrollup
version to^2.79.1
solves the problème. 🥳