chore(deps): Bumb dependencies and switch back to mdx from xdm

Author: OliverDudgeon

context/MDXComponentProvider.tsx

@@ -3,8 +3,6 @@ import type { FC } from 'react';
 import { Link, Typography } from '@material-ui/core';
 import { MDXProvider } from '@mdx-js/react';
 
-// We use mdx-js here because, despite using xdm now for rendering, it has the same API.
-
 export const MDXComponentProvider: FC = ({ children }) => {
   return (
     <MDXProvider

next.config.js

@@ -10,6 +10,14 @@ const withTM = require('next-transpile-modules')(
   { debug: false }, // Log which files get transpiled
 );
 
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/,
+  options: {
+    jsxImportSource: '@emotion/react',
+    providerImportSource: '@mdx-js/react',
+  },
+});
+
 const resolvePackage = (packageName) => path.resolve(__dirname, '.', 'node_modules', packageName);
 
 /**
@@ -29,21 +37,6 @@ const nextConfig = {
   },
   // Allow mdx content and mdx files as pages
   webpack(config) {
-    config.module.rules.push({
-      test: /\.mdx$/,
-      use: [
-        {
-          loader: 'xdm/webpack.cjs',
-          options: {
-            // This line allows a configurable provider to configure transformed components
-            providerImportSource: '@mdx-js/react',
-            // This line provides compatibility with the emotion css prop jsx pragma
-            jsxImportSource: '@emotion/react',
-          },
-        },
-      ],
-    });
-
     if (process.env.MONOREPO) {
       const packages = ['react', '@material-ui/core', 'react-query'];
       packages.forEach(
@@ -62,4 +55,4 @@ const sentryWebpackPluginOptions = {
 
 const moduleExports = process.env.MONOREPO ? withTM(nextConfig) : nextConfig;
 
-module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);
+module.exports = withMDX(withSentryConfig(moduleExports, sentryWebpackPluginOptions));

package.json

@@ -25,18 +25,20 @@
   },
   "dependencies": {
     "@auth0/nextjs-auth0": "1.7.0",
-    "@emotion/react": "11.8.1",
+    "@emotion/react": "11.8.2",
     "@emotion/styled": "11.8.1",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.60",
+    "@mdx-js/loader": "^2.1.0",
+    "@next/mdx": "^12.1.0",
     "@rjsf/core": "3.2.1",
     "@rjsf/material-ui": "3.2.1",
     "@squonk/account-server-client": "0.1.20-rc.1",
-    "@squonk/data-manager-client": "0.7.0-beta.5",
+    "@squonk/data-manager-client": "0.7.0-beta.6",
     "@squonk/mui-theme": "2.0.1",
-    "axios": "0.26.0",
-    "dayjs": "1.10.8",
+    "axios": "0.26.1",
+    "dayjs": "1.11.0",
     "filesize": "8.0.7",
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
@@ -45,14 +47,14 @@
     "lodash-es": "4.17.21",
     "material-ui-popup-state": "1.9.3",
     "next": "12.1.0",
-    "next-http-proxy-middleware": "1.2.2",
+    "next-http-proxy-middleware": "1.2.4",
     "next-transpile-modules": "9.0.0",
-    "node-fetch": "3.2.1",
+    "node-fetch": "3.2.3",
     "notistack": "1.0.10",
-    "plotly.js-basic-dist": "2.9.0",
+    "plotly.js-basic-dist": "2.11.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-dropzone": "11.7.1",
+    "react-dropzone": "12.0.4",
     "react-plotly.js": "2.5.1",
     "react-query": "3.34.16",
     "react-table": "7.7.0",
@@ -65,33 +67,32 @@
     "@emotion/babel-preset-css-prop": "11.2.0",
     "@mdx-js/react": "1.6.22",
     "@next/eslint-plugin-next": "12.1.0",
-    "@playwright/test": "1.19.2",
-    "@sentry/nextjs": "6.18.1",
+    "@playwright/test": "1.20.0",
+    "@sentry/nextjs": "6.19.1",
     "@squonk/eslint-config": "0.2.0",
     "@types/lodash-es": "4.17.6",
     "@types/mdx-js__react": "1.5.5",
     "@types/node": "16.11.26",
     "@types/plotly.js-basic-dist": "1.54.0",
-    "@types/react": "17.0.39",
+    "@types/react": "17.0.41",
     "@types/react-plotly.js": "2.5.0",
-    "@types/react-table": "7.7.9",
+    "@types/react-table": "7.7.10",
     "@types/react-virtualized": "9.21.20",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.13.0",
-    "@typescript-eslint/parser": "5.13.0",
-    "eslint": "8.10.0",
+    "@typescript-eslint/eslint-plugin": "5.16.0",
+    "@typescript-eslint/parser": "5.16.0",
+    "eslint": "8.11.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.29.2",
+    "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "husky": "7.0.4",
     "identity-obj-proxy": "3.0.0",
-    "lint-staged": "12.3.4",
-    "prettier": "2.5.1",
+    "lint-staged": "12.3.7",
+    "prettier": "2.6.0",
     "sass": "1.49.9",
-    "typescript": "4.6.2",
-    "xdm": "3.3.4"
+    "typescript": "4.6.2"
   }
 }