Use ESM

.eslintrc.yml

@@ -83,9 +83,8 @@ overrides:
       - '*.tsx'
     extends: 'plugin:@typescript-eslint/recommended'
     settings:
-      import:
-        resolver:
-          typescript: null
+      import/resolver:
+        typescript: null
 
   - files:
       - '*.d.ts'

.github/workflows/ci.yml

@@ -24,5 +24,6 @@ jobs:
         run: yarn --frozen-lockfile
         env:
           CI: 'true'
+      - run: curl https://patch-diff.githubusercontent.com/raw/webpack/webpack/pull/14077.patch | patch --directory packages/loader/node_modules/webpack --strip 1
       - name: Test
         run: yarn test

docs/advanced/api.mdx

@@ -27,7 +27,7 @@ You should use the async API, unless you have very good reasons to use the
 You can use the library directly:
 
 ```js
-var mdx = require('@mdx-js/mdx')
+import {mdx} from '@mdx-js/mdx'
 
 const content = `
 # Hello, world!
@@ -107,8 +107,8 @@ string synchronously.
 It’s important to note that if you have any async plugins, they will be ignored.
 
 ```js
-const fs = require('fs')
-const mdx = require('@mdx-js/mdx')
+import fs from 'fs'
+import {mdx} from '@mdx-js/mdx'
 
 const mdxText = fs.readFileSync('hello.mdx', 'utf8')
 
@@ -123,12 +123,12 @@ If you want to extract data from a MDX file, you can access the
 compiler directly:
 
 ```js
-const {createCompiler} = require('@mdx-js/mdx')
-const detectFrontmatter = require('remark-frontmatter')
-const vfile = require('vfile')
-const visit = require('unist-util-visit')
-const remove = require('unist-util-remove')
-const yaml = require('yaml')
+import {createCompiler} from '@mdx-js/mdx'
+import detectFrontmatter from 'remark-frontmatter'
+import vfile from 'vfile'
+import visit from 'unist-util-visit'
+import remove from 'unist-util-remove'
+import yaml from 'yaml'
 
 const file = vfile(
   `

docs/advanced/plugins.mdx

@@ -46,10 +46,10 @@ They are passed in the options to the core MDX library, but you’d typically pa
 them through a loader like so:
 
 ```js
-const images = require('remark-images')
-const emoji = require('remark-emoji')
+import images from 'remark-images'
+import emoji from 'remark-emoji'
 
-module.exports = {
+export default {
   module: {
     rules: [
       {
@@ -74,10 +74,10 @@ module.exports = {
 If you’re using MDX directly, they can be passed like so:
 
 ```js
-const fs = require('fs')
-const mdx = require('@mdx-js/mdx')
-const images = require('remark-images')
-const emoji = require('remark-emoji')
+import fs from 'fs'
+import {mdx} from '@mdx-js/mdx'
+import images from 'remark-images'
+import emoji from 'remark-emoji'
 
 const mdxText = fs.readFileSync('hello.mdx', 'utf8')
 const jsx = mdx.sync(mdxText, {
@@ -114,10 +114,10 @@ Luckily, it’s possible to build a custom plugin that visits all text nodes wit
 This works in most cases, and could look something like this:
 
 ```js
-const visit = require('unist-util-visit')
-const retext = require('retext')
-const retextSmartypants = require('retext-smartypants')
-const mdx = require('@mdx-js/mdx')
+import visit from 'unist-util-visit'
+import retext from 'retext'
+import retextSmartypants from 'retext-smartypants'
+import {mdx} from '@mdx-js/mdx'
 
 function remarkSmartypants(options) {
   const processor = retext().use(retextSmartypants, options)

docs/advanced/transform-content.mdx

@@ -32,10 +32,9 @@ Content.
 And our script, `example.js`, looks as follows:
 
 ```js
-const {read, write} = require('to-vfile')
-const remark = require('remark')
-const mdx = require('remark-mdx')
-
+import {read, write} from 'to-vfile'
+import remark from 'remark'
+import mdx from 'remark-mdx'
 ;(async () => {
   const path = './example.mdx'
   const file = await read(path)

docs/getting-started/index.mdx

@@ -421,11 +421,11 @@ custom use case, you can of course do it yourself.
 The below rendering function is what we use for our MDX integration tests:
 
 ```js
-const babel = require('@babel/core')
-const React = require('react')
-const {renderToStaticMarkup} = require('react-dom/server')
-const mdx = require('@mdx-js/mdx')
-const {MDXProvider, mdx: createElement} = require('@mdx-js/react')
+import babel from '@babel/core'
+import React from 'react'
+import {renderToStaticMarkup} from 'react-dom/server'
+import {mdx} from '@mdx-js/mdx'
+import {MDXProvider, mdx as createElement} from '@mdx-js/react'
 
 const transform = code =>
   babel.transform(code, {

docs/getting-started/webpack.mdx

@@ -20,7 +20,7 @@ For webpack projects you can define the following `webpack.config.js` extension
 handler for `.md` and `.mdx` files:
 
 ```js
-module.exports = {
+export default {
   module: {
     // ...
 
@@ -49,9 +49,9 @@ If you’d like to configure [plugins](/advanced/plugins) you can do that by
 passing them as options:
 
 ```js
-const images = require('remark-images')
-const emoji = require('remark-emoji')
-module.exports = {
+import images from 'remark-images'
+import emoji from 'remark-emoji'
+export default {
   module: {
     rules: [
       {
@@ -79,7 +79,7 @@ If you’re running MDX in the browser you will need to configure webpack to ign
 the `fs` module:
 
 ```js
-module.exports = {
+export default {
   node: {
     fs: 'empty'
   }

docs/guides/custom-loader.mdx

@@ -6,10 +6,10 @@ Consider a scenario where you wanted to add frontmatter support to all your MDX
 
 ```js
 // lib/fm-loader.js
-const matter = require('gray-matter')
-const stringifyObject = require('stringify-object')
+import matter from 'gray-matter'
+import stringifyObject from 'stringify-object'
 
-module.exports = async function (src) {
+export default async function (src) {
   const callback = this.async()
   const {content, data} = matter(src)
 
@@ -26,7 +26,7 @@ The loader code above parses out the frontmatter, exports it as the named export
 Then, you can use it with the following config:
 
 ```js
-module.exports = {
+export default {
   module: {
     rules: [
       {

docs/guides/syntax-highlighting.mdx

@@ -127,9 +127,9 @@ ecosystem. One solid library for syntax highlighting is
 
 ```js
 // webpack.config.js
-const rehypePrism = require('@mapbox/rehype-prism')
+import rehypePrism from '@mapbox/rehype-prism'
 
-module.exports = {
+export default {
   module: {
     // ...
     rules: [

docs/guides/terminal.mdx

@@ -35,10 +35,10 @@ It’s important to ensure that the MDXProvider wraps the MDX runtime
 component.
 
 ```js
-const React = require('react')
-const {Text, render} = require('ink')
-const {MDXProvider} = require('@mdx-js/react')
-const MDX = require('@mdx-js/runtime')
+import React from 'react'
+import {Text, render} from 'ink'
+import {MDXProvider} from '@mdx-js/react'
+import MDX from '@mdx-js/runtime'
 
 const components = {
   h1: ({children}) => <Text bold>{children}</Text>,
@@ -83,10 +83,10 @@ From <Color bgBlack white bold> MDX! </Color>
 ## All together
 
 ```js
-const React = require('react')
-const {render, Color, Box, Text} = require('ink')
-const MDX = require('@mdx-js/runtime')
-const {MDXProvider} = require('@mdx-js/react')
+import React from 'react'
+import {render, Color, Box, Text} from 'ink'
+import MDX from '@mdx-js/runtime'
+import {MDXProvider} from '@mdx-js/react'
 
 const MDXContent = `
 # Hello, world!

docs/guides/writing-a-plugin.mdx

@@ -13,9 +13,9 @@ for you.
 Then you can first log out the nodes to see it in action:
 
 ```js
-const visit = require('unist-util-visit')
+import visit from 'unist-util-visit'
 
-module.exports = () => (tree, file) => {
+export default () => (tree, file) => {
   visit(tree, 'heading', node => {
     console.log(node)
   })
@@ -34,9 +34,9 @@ text there is also an emphasis node.
 To walk the text nodes, you can use `unist-util-visit` again:
 
 ```js
-const visit = require('unist-util-visit')
+import visit from 'unist-util-visit'
 
-module.exports = () => (tree, file) => {
+export default () => (tree, file) => {
   visit(tree, 'heading', node => {
     visit(node, 'text', textNode => {
       console.log(textNode)
@@ -51,10 +51,10 @@ Now that you are logging out the text nodes, you can now manipulate them with th
 to the node:
 
 ```js
-const title = require('title')
-const visit = require('unist-util-visit')
+import title from 'title'
+import visit from 'unist-util-visit'
 
-module.exports = () => (tree, file) => {
+export default () => (tree, file) => {
   visit(tree, 'heading', node => {
     visit(node, 'text', textNode => {
       const text = textNode.value ? textNode.value.trim() : ''

package.json

@@ -52,7 +52,7 @@
     "gatsby": "^2.24.3",
     "gatsby-theme-mdx1": "npm:gatsby-theme-mdx@^1.0.0",
     "husky": "^4.3.0",
-    "jest": "^26.6.0",
+    "jest": "^27.1.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.0",
     "patch-package": "^6.4.7",

packages/gatsby-theme-mdx/src/components/code-preview.js

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react'
 import {LiveProvider, LivePreview, LiveEditor, LiveError} from 'react-live'
-import mdx from '@mdx-js/mdx'
+import {mdx} from '@mdx-js/mdx'
 import {MDXProvider, mdx as createElement} from '@mdx-js/react'
 import * as Rebass from '@rebass/emotion'
 import {ThemeContext} from '@emotion/core'

packages/gatsby-theme-mdx/src/components/playground-editor.js

@@ -1,6 +1,6 @@
 import React, {useContext, useState} from 'react'
 import {LiveProvider, LivePreview, LiveEditor, LiveError} from 'react-live'
-import mdx from '@mdx-js/mdx'
+import {mdx} from '@mdx-js/mdx'
 import {MDXProvider, mdx as createElement} from '@mdx-js/react'
 import * as Rebass from '@rebass/emotion'
 import {ThemeContext} from '@emotion/core'

packages/loader/index.js

@@ -1,5 +1,5 @@
-const {getOptions} = require('loader-utils')
-const {createCompiler} = require('@mdx-js/mdx')
+import {getOptions} from 'loader-utils'
+import {createCompiler} from '@mdx-js/mdx'
 
 const DEFAULT_RENDERER = `
 import React from 'react'
@@ -14,7 +14,7 @@ const pragma = `
 
 const compilerCache = new Map()
 
-module.exports = async function (content) {
+export default async function (content) {
   if (!compilerCache.has(this.query)) {
     const {renderer = DEFAULT_RENDERER, ...opts} = getOptions(this)
     compilerCache.set(this.query, [renderer, createCompiler(opts)])

packages/loader/package.json

@@ -35,8 +35,8 @@
     "loader"
   ],
   "scripts": {
-    "test-api": "jest test",
-    "test-coverage": "jest test --coverage",
+    "test-api": "NODE_OPTIONS=--experimental-vm-modules jest test",
+    "test-coverage": "NODE_OPTIONS=--experimental-vm-modules jest test --coverage",
     "test-types": "dtslint types",
     "test": "yarn test-coverage && yarn test-types"
   },
@@ -49,11 +49,11 @@
     "loader-utils": "^2.0.0"
   },
   "devDependencies": {
-    "memory-fs": "^0.5.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "remark-slug": "^6.0.0",
-    "webpack": "^4.0.0"
+    "webpack": "^5.51.1"
   },
+  "type": "module",
   "gitHead": "bf7deab69996449cb99c2217dff75e65855eb2c1"
 }