Upgrade react-scripts to v5, Support Webpack 5.x

[jaywcjlove]

Upgrade react-scripts to v5

• @kkt/ncc: $RefreshSig$ is not defined #357
• Error: Cannot find module 'ajv/dist/compile/codegen'  #350
• WARNING in DefinePlugin Conflicting values for 'process.env.NODE_ENV' #347
• TypeError: MiniCssExtractPlugin is not a constructor #340
• Critical dependency: the request of a dependency is an expression #336
• Error: You forgot to add 'mini-css-extract-plugin' plugin #334
• Inline JavaScript is not enabled. Is it set in your options antdpro/antdp#170
• Startup service stuck #330 🚧
• sourceMap source file does not exist #325
• Error: true is not a PostCSS plugin #324
• Build load *module.less, shows resolve-url-loader warning #313
• lerna bootstrap --hoist doesn't work with create-react-app 5 #305
• Webpack 5 facebook/create-react-app#11201
• BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default #412
• Failed to parse source map from #446

• Migrate from kkt 5.x to 6.x.
• Migrate from kkt 4.x to 5.x.

• Hooks + multiple instances of React facebook/react#13991 (comment)

.kktrc.ts

import webpack, { Configuration } from 'webpack';
import { LoaderConfOptions } from 'kkt';
import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
import lessModules from '@kkt/less-modules';
import scopePluginOptions from '@kkt/scope-plugin-options';
import pkg from './package.json';
import path from 'path';

export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
  conf = lessModules(conf, env, options);
  // Get the project version.
  conf.plugins!.push(
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(pkg.version),
    }),
  );
  // https://github.com/kktjs/kkt/issues/336#issue-1097660932
  conf.module!.exprContextCritical = false;

  conf = scopePluginOptions(conf, env, {
    ...options,
    allowedPaths: [
+      path.resolve(process.cwd(), './node_modules/')
    ]
  });
  /**
   * https://github.com/facebook/react/issues/13991#issuecomment-435587809
   * https://legacy.reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
   */
+  if (conf.resolve?.alias) {
+    conf.resolve.alias = {
+      ...conf.resolve.alias,
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
+    };
+  }
  conf = mdCodeModulesLoader(conf);
  if (env === 'production') {
    conf.output = { ...conf.output, publicPath: './' };
  }
  return conf;
};

[jaywcjlove]

e3ac95f
f2a4433
36eb963

[jaywcjlove]

TypeError: Cannot read property 'javascript' of undefined
webpack-contrib/terser-webpack-plugin#339

[jaywcjlove]

• Webpack 5 facebook/create-react-app#11201

[jaywcjlove]

• lerna bootstrap --hoist doesn't work with create-react-app 5 #305

[jaywcjlove]

• uiwjs/react-codemirror@02ed82e
• uiwjs/react-heat-map@bd4d00b
• uiwjs/react-codesandbox@e9d1c02
• uiwjs/react-code-preview@4bd10bf
• jaywcjlove/validator.js@d5710ed
• kktjs/kkt-codesandbox-tamplate@0b3a56f

⚠️ sourceMap source file does not exist. ¹

WARNING in ./node_modules/codesandbox-import-utils/lib/api/define.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map 
from '/git-project/@uiw/react/react-codesandbox/node_modules/codesandbox-import-utils/src/api/define.ts' 
file: Error: ENOENT: no such file or directory, 
open '/git-project/@uiw/react/react-codesandbox/node_modules/codesandbox-import-utils/src/api/define.ts'

https://github.com/uiwjs/react-codesandbox/blob/2012811c8a8edcba05ea1498140f72b20d61882d/.kktrc.ts#L23-L28

⚠️ Do not need the following configuration, upgrade kkt to v7.0.3+.

export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
  // ....
  // ⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣⇣
  if (conf.module && conf.module.rules && conf.module.rules[0]) {
    const rules = conf.module.rules[0];
    if (typeof rules === 'object' && typeof rules.loader === 'string' && /source-map-loader/.test(rules.loader)) {
      ;(conf.module.rules[0] as any).exclude = /((@babel(?:\/|\\{1,2})runtime)|codesandbox-import-utils)/;
    }
  }
  // ⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡
}

Footnotes

1. https://github.com/uiwjs/react-codesandbox/commit/e9d1c020fe5ca4d5a6e20dd60adf596e458f442f ↩

[jaywcjlove]

• https://github.com/uiwjs/react-code-preview/runs/4673097348?check_suite_focus=true

> kkt build --app-src ./website

Creating an optimized production build...
Failed to compile.

Error: true is not a PostCSS plugin
    at runMicrotasks (<anonymous>)

• chore: add package-lock.json file. uiwjs/react-code-preview@700567d

[jaywcjlove]

Module not found: Error: Can't resolve 'path' in '/home/runner/work/react-amap/react-amap/node_modules/@uiw/react-code-preview/node_modules/@babel/core/lib/transformation'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

https://github.com/uiwjs/react-amap/runs/4749457776?check_suite_focus=true

[jaywcjlove]

Creating an optimized production build...
Compiled with warnings.

./node_modules/@babel/standalone/babel.js
Critical dependency: the request of a dependency is an expression

./node_modules/@babel/standalone/babel.js
Critical dependency: the request of a dependency is an expression

临时解决方案

$ CI=false npm run doc

module.exports = {
  //...
  module: {
    exprContextCritical: true,
  },
};

• https://webpack.js.org/configuration/module/#module-contexts
• https://stackoverflow.com/a/65857316/1334703

[jaywcjlove]

• Fix issue #11930 where mini css extract plugin was updated to new version facebook/create-react-app#11932
• Breaking change with import via CommonJS in 2.5.0 webpack-contrib/mini-css-extract-plugin#896

KKT:BUILD:ERROR: TypeError: MiniCssExtractPlugin is not a constructor
    at createWebpackConfig (/home/runner/work/react-code-preview/react-code-preview/node_modules/react-scripts/config/webpack.config.js:664:9)
    at _callee$ (/home/runner/work/react-code-preview/react-code-preview/node_modules/kkt/src/scripts/build.ts:31:29)
    at tryCatch (/home/runner/work/react-code-preview/react-code-preview/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/home/runner/work/react-code-preview/react-code-preview/node_modules/regenerator-runtime/runtime.js:294:22)
    at Generator.next (/home/runner/work/react-code-preview/react-code-preview/node_modules/regenerator-runtime/runtime.js:119:21)
    at asyncGeneratorStep (/home/runner/work/react-code-preview/react-code-preview/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/home/runner/work/react-code-preview/react-code-preview/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)

npm i mini-css-extract-plugin@2.4.5 -D