[TypeScript] @mdx-js/rollup doesn't match Vite 3's plugin types

[guoyunhe]

Initial 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

[wooorm]

Why would that be a bug here? This uses Rollup's plugin type. What would you suggest? Why not a bug in Vite?

mdx/packages/rollup/lib/index.js

Line 4 in 69a15b7

* @typedef {import('rollup').Plugin} Plugin

[wooorm]

Closing due to no response (and per my above comment: I think we’re doing the right thing)

[ryuujo1573]

I hope this would be of help: [vitejs.dev] Rollup Plugin Compatibility

Here is the solution:

If I am not getting wrong, use @mdx-js/rollup under build.rollupOptions.plugins
since this plugin works only (?) in build phase.

However this was unmet due to version disagreement.
I added rollup manually without specifying version, so 3.4.0 was installed.
As a result, by default 2.79.1 required but 3.4.0 provided.

Or in this way:

plugins: [
    react(),
    {
        ...mdx(),
        enforce: 'post',
        apply: 'build',
    },
    // ...
]

I am quite a noob, pls excuse me for possible mistakes.

---

p.s. Document here doesn't work, except for being the way above.

Thanks for your time.

[wooorm]

p.s. Document here doesn't work, except for being the way above.

If it doesn’t work, that’s because Vite changed. It used to work.
As it doesn’t work anymore, are you interested in updating the docs?

[ryuujo1573]

p.s. Document here doesn't work, except for being the way above.

If it doesn’t work, that’s because Vite changed. It used to work. As it doesn’t work anymore, are you interested in updating the docs?

Sure, I'll try to do it when I wake up tomorrow. 🛏️

To-Do-rrow:

• Check breaking change by vite (There's no change in vite)
• Write a doc about this.
• Write an issue to vite if needed

---

Update:

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, the pnpm prompted that:

WARN Issues with peer dependencies found
.
└─┬ @mdx-js/rollup 2.1.5
  └── ✕ missing peer rollup@>=2
Peer dependencies that should be installed:
  rollup@>=2

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 by vite. 😂

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. 🥳

[wooorm]

No idea of what that means,

What that means is that you are using pnpm. Which does not install peer dependencies. It means you need to install it.

I installed rollup by pnpm i -D rollup and it gave me a version of >=3

This is fine for us, but not fine for Vite. Vite wants a version higher than 2.79.1 but lower than 3.0.0

conflicts

Yes. Install a lower version. pnpm i -D rollup@2

I just did something unconsciously that made this messy

Raise it with Vite folks or install v2 for them. Our package supports version 2 and 3.

[ryuujo1573]

Thank you. I've learned something new !! 🌵