Merge pull request #1503 from Adslot/upgrade-mdx

[ADS-6051] chore: upgrade to mdx v2

babel.config.js → babel.config.cjs

@@ -1,4 +1,4 @@
-const svgoConfig = require('./svgo-config');
+const svgoConfig = require('./svgo-config.cjs');
 
 const isDevelopment = process.env.TYPE === 'development';
 

config/cssTransform.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   process() {
     return { code: 'module.exports = {};' };
   },

config/paths.js

@@ -1,12 +1,12 @@
-const path = require('path');
-const fs = require('fs');
+import path from 'node:path';
+import fs from 'node:fs';
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
-module.exports = {
+export default {
   appBuild: resolveApp('docs'),
   appDist: resolveApp('dist'),
   appDistEs: resolveApp('es'),

config/polyfill.js

@@ -1,4 +1,6 @@
+import * as svg4everybody from 'svg4everybody';
+
 const regexp = new RegExp('(MSIE)|(Trident)', 'i');
 if (regexp.test(navigator.userAgent)) {
-  require('svg4everybody')({ polyfill: true });
+  svg4everybody({ polyfill: true });
 }

config/webpack.config.dev.build.js

@@ -1,13 +1,13 @@
-const webpack = require('webpack');
-const { merge: webpackMerge } = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const commonConfig = require('./webpack.config');
-const paths = require('./paths');
+import webpack from 'webpack';
+import { merge as webpackMerge } from 'webpack-merge';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import * as commonConfig from './webpack.config.js';
+import { default as paths } from './paths.js';
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
-module.exports = webpackMerge(commonConfig, {
+export default webpackMerge(commonConfig.default, {
   mode: 'development',
   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
@@ -62,6 +62,12 @@ module.exports = webpackMerge(commonConfig, {
         options: {
           cacheDirectory: true,
         },
+        resolve: {
+          // https://webpack.js.org/configuration/module/#resolvefullyspecified
+          // temp fix for migrating to esm
+          // needs to be reviewed and discussed later
+          fullySpecified: false,
+        },
       },
       {
         test: /\.css$/i,

config/webpack.config.dev.js

@@ -1,16 +1,17 @@
-const path = require('path');
-const emoji = require('remark-emoji');
-const webpack = require('webpack');
-const { merge: webpackMerge } = require('webpack-merge');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const commonConfig = require('./webpack.config');
-const paths = require('./paths');
+import path from 'node:path';
+import emoji from 'remark-emoji';
+import remarkMdxCodeMeta from 'remark-mdx-code-meta';
+import webpack from 'webpack';
+import { merge as webpackMerge } from 'webpack-merge';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import * as commonConfig from './webpack.config.js';
+import { default as paths } from './paths.js';
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
-module.exports = webpackMerge(commonConfig, {
+export default webpackMerge(commonConfig.default, {
   mode: 'development',
   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
@@ -46,10 +47,17 @@ module.exports = webpackMerge(commonConfig, {
           {
             loader: '@mdx-js/loader',
             options: {
-              remarkPlugins: [emoji],
+              providerImportSource: '@mdx-js/react',
+              remarkPlugins: [emoji, remarkMdxCodeMeta],
             },
           },
         ],
+        resolve: {
+          // https://webpack.js.org/configuration/module/#resolvefullyspecified
+          // temp fix for migrating to esm
+          // needs to be reviewed and discussed later
+          fullySpecified: false,
+        },
       },
       {
         test: /\.(eot|ttf|woff|woff2)$/,

config/webpack.config.dist.js

@@ -1,11 +1,12 @@
-const emoji = require('remark-emoji');
-const webpack = require('webpack');
-const { merge: webpackMerge } = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const commonConfig = require('./webpack.config');
-const paths = require('./paths');
+import emoji from 'remark-emoji';
+import remarkMdxCodeMeta from 'remark-mdx-code-meta';
+import webpack from 'webpack';
+import { merge as webpackMerge } from 'webpack-merge';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import * as commonConfig from './webpack.config.js';
+import { default as paths } from './paths.js';
 
 // Assert this just to be safe.
 if (process.env.NODE_ENV !== 'dist') {
@@ -14,7 +15,7 @@ if (process.env.NODE_ENV !== 'dist') {
 
 // This dist is used for creating the minified .css file.
 // The output .js file will be removed.
-module.exports = webpackMerge(commonConfig, {
+export default webpackMerge(commonConfig.default, {
   mode: 'production',
   // Don't attempt to continue if there are any errors.
   bail: true,
@@ -62,7 +63,8 @@ module.exports = webpackMerge(commonConfig, {
           {
             loader: '@mdx-js/loader',
             options: {
-              remarkPlugins: [emoji],
+              providerImportSource: '@mdx-js/react',
+              remarkPlugins: [emoji, remarkMdxCodeMeta],
             },
           },
         ],
@@ -81,6 +83,12 @@ module.exports = webpackMerge(commonConfig, {
         options: {
           cacheDirectory: true,
         },
+        resolve: {
+          // https://webpack.js.org/configuration/module/#resolvefullyspecified
+          // temp fix for migrating to esm
+          // needs to be reviewed and discussed later
+          fullySpecified: false,
+        },
       },
       {
         test: /\.css$/i,
@@ -129,9 +137,9 @@ module.exports = webpackMerge(commonConfig, {
         },
       }),
       new CssMinimizerPlugin({
-        minify: (data, inputMap, minimizerOptions) => {
-          const cssnano = require('cssnano');
-          const safe = require('postcss-safe-parser');
+        minify: async (data, inputMap, minimizerOptions) => {
+          const { default: cssnano } = await import('cssnano');
+          const { default: safe } = await import('postcss-safe-parser');
 
           const [[filename, input]] = Object.entries(data);
 
@@ -142,22 +150,20 @@ module.exports = webpackMerge(commonConfig, {
             parser: safe,
           };
 
-          return cssnano({
+          const result = await cssnano({
             preset: [
               'default',
               {
                 convertValues: false,
               },
             ],
-          })
-            .process(input, postcssOptions)
-            .then((result) => {
-              return {
-                code: result.css,
-                map: result.map,
-                warnings: result.warnings(),
-              };
-            });
+          }).process(input, postcssOptions);
+
+          return {
+            code: result.css,
+            map: result.map,
+            warnings: result.warnings(),
+          };
         },
       }),
     ],

config/webpack.config.js

@@ -1,7 +1,10 @@
-const path = require('path');
-const paths = require('./paths');
+import path from 'path';
+import { default as paths } from './paths.js';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const buffer = require.resolve('buffer/');
 
-module.exports = {
+export default {
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
     // We placed these paths second because we want `node_modules` to "win"
@@ -21,7 +24,7 @@ module.exports = {
     alias: {
       styles: `${paths.appSrc}/styles/`,
     },
-    fallback: { buffer: require.resolve('buffer/') },
+    fallback: { buffer: buffer },
   },
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

config/webpack.config.prod.js

@@ -1,21 +1,22 @@
-const webpack = require('webpack');
-const emoji = require('remark-emoji');
-const { merge: webpackMerge } = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const commonConfig = require('./webpack.config');
-const paths = require('./paths');
+import webpack from 'webpack';
+import emoji from 'remark-emoji';
+import remarkMdxCodeMeta from 'remark-mdx-code-meta';
+import { merge as webpackMerge } from 'webpack-merge';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import * as commonConfig from './webpack.config.js';
+import { default as paths } from './paths.js';
 
 // Assert this just to be safe.
 if (process.env.NODE_ENV !== 'production') {
-  throw new Error('Production builds must have NODE_ENV=dist.');
+  throw new Error(`Production builds must have NODE_ENV=production, actual NODE_ENV=${process.env.NODE_ENV}.`);
 }
 
 // This dist is used for creating the minified .css file.
 // The output .js file will be removed.
-module.exports = webpackMerge(commonConfig, {
+export default webpackMerge(commonConfig.default, {
   mode: 'production',
   // Don't attempt to continue if there are any errors.
   bail: true,
@@ -68,7 +69,8 @@ module.exports = webpackMerge(commonConfig, {
           {
             loader: '@mdx-js/loader',
             options: {
-              remarkPlugins: [emoji],
+              providerImportSource: '@mdx-js/react',
+              remarkPlugins: [emoji, remarkMdxCodeMeta],
             },
           },
         ],
@@ -84,6 +86,12 @@ module.exports = webpackMerge(commonConfig, {
         test: /\.(js|jsx)$/,
         include: [paths.appSrc, paths.appDemo],
         loader: 'babel-loader',
+        resolve: {
+          // https://webpack.js.org/configuration/module/#resolvefullyspecified
+          // temp fix for migrating to esm
+          // needs to be reviewed and discussed later
+          fullySpecified: false,
+        },
       },
       {
         test: /\.css$/i,
@@ -129,9 +137,9 @@ module.exports = webpackMerge(commonConfig, {
         },
       }),
       new CssMinimizerPlugin({
-        minify: (data, inputMap, minimizerOptions) => {
-          const cssnano = require('cssnano');
-          const safe = require('postcss-safe-parser');
+        minify: async (data, inputMap, minimizerOptions) => {
+          const { default: cssnano } = await import('cssnano');
+          const { default: safe } = await import('postcss-safe-parser');
 
           const [[filename, input]] = Object.entries(data);
 
@@ -142,22 +150,20 @@ module.exports = webpackMerge(commonConfig, {
             parser: safe,
           };
 
-          return cssnano({
+          const result = await cssnano({
             preset: [
               'default',
               {
                 convertValues: false,
               },
             ],
-          })
-            .process(input, postcssOptions)
-            .then((result) => {
-              return {
-                code: result.css,
-                map: result.map,
-                warnings: result.warnings(),
-              };
-            });
+          }).process(input, postcssOptions);
+
+          return {
+            code: result.css,
+            map: result.map,
+            warnings: result.warnings(),
+          };
         },
       }),
     ],

config/webpackDevServer.config.js

@@ -1,11 +1,11 @@
-const config = require('./webpack.config.dev');
-const paths = require('./paths');
+import { default as config } from './webpack.config.dev.js';
+import { default as paths } from './paths.js';
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 
 // eslint-disable-next-line
-module.exports = function (proxy, allowedHost) {
+export default function (proxy, allowedHost) {
   return {
     // Enable gzip compression of generated files.
     compress: true,
@@ -51,4 +51,4 @@ module.exports = function (proxy, allowedHost) {
       publicPath: config.output.publicPath,
     },
   };
-};
+}