Next.js Discord

Discord Forum

MDX plugins not working with Windows and Turbopack

Unanswered
!skyfall posted this in #help-forum
Open in Discord
When all the following conditions are true:
- Using Turbopack
- Using Windows
- Using @next/mdx
- Using a Remark plugin (remark-gfm in this case)
I get the following error whenever I visit a page that uses MDX:
Error: ./components/security/content.mdx
Error evaluating Node.js code
Error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    [at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:209:11)]
    [at defaultLoad (node:internal/modules/esm/load:107:3)]
    [at ModuleLoader.load (node:internal/modules/esm/loader:701:12)]
    [at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:514:43)]
    [at #createModuleJob (node:internal/modules/esm/loader:538:36)]
    [at #getJobFromResolveResult (node:internal/modules/esm/loader:306:34)]
    [at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:274:41)]
    [at process.processTicksAndRejections (node:internal/process/task_queues:105:5)]
    [at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:577:25)]
    at BuildError (http://localhost:3000/_next/static/chunks/node_modules_next_3e2414c2._.js:17422:41)
    // ...

Here's my next.config.ts:
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true
  },
  trailingSlash: true,
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  images: {
    // ...
  },
  webpack: (config) => {
    return config
  },
  transpilePackages: ["animejs"]
}

import million from 'million/compiler'
import withMDX from '@next/mdx'

const withMDXConfig = withMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [["remark-gfm"]]
  },
})

export default million.next(withMDXConfig(nextConfig), {
  auto: true
})

How can I fix this? I'm using the latest Next.js (15.3.3) and Windows 11.

9 Replies

Chum salmon
I'm not sure what's it like with Turbopack because I don't use it.
But I just want to confirm that I can use Next 15.3.3 with remark-gfm 4.0.1 fine without Turbopack.
@!skyfall When all the following conditions are true: - Using Turbopack - Using Windows - Using `@next/mdx` - Using a Remark plugin (`remark-gfm` in this case) I get the following error whenever I visit a page that uses MDX: Error: ./components/security/content.mdx Error evaluating Node.js code Error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' [at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:209:11)] [at defaultLoad (node:internal/modules/esm/load:107:3)] [at ModuleLoader.load (node:internal/modules/esm/loader:701:12)] [at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:514:43)] [at #createModuleJob (node:internal/modules/esm/loader:538:36)] [at #getJobFromResolveResult (node:internal/modules/esm/loader:306:34)] [at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:274:41)] [at process.processTicksAndRejections (node:internal/process/task_queues:105:5)] [at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:577:25)] at BuildError (http://localhost:3000/_next/static/chunks/node_modules_next_3e2414c2._.js:17422:41) // ... Here's my `next.config.ts`: ts /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, eslint: { ignoreDuringBuilds: true }, trailingSlash: true, pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'], images: { // ... }, webpack: (config) => { return config }, transpilePackages: ["animejs"] } import million from 'million/compiler' import withMDX from '@next/mdx' const withMDXConfig = withMDX({ extension: /\.mdx?$/, options: { remarkPlugins: [["remark-gfm"]] }, }) export default million.next(withMDXConfig(nextConfig), { auto: true }) How can I fix this? I'm using the latest Next.js (15.3.3) and Windows 11.
Chum salmon
wait you didn't import remarkGfm from 'remark-gfm' in your next.config.ts??
try import it first import remarkGfm from 'remark-gfm'
and in the option > remarPlugins do : remarkPlugins: [remarkGfm],
@Chum salmon wait you didn't `import remarkGfm from 'remark-gfm'` in your next.config.ts??
Doesn't work with Turbopack due to a Turbopack issue, the docs say to do that:
Chum salmon
oh ok so it's different. Wish I could help but I have no idea.
remark-gfm is a JavaScrip function so it can't be used with Turbopack
if I understand it correctly
ah okay - thanks anyways