search

kktjs / kkt

Create React apps with no build configuration, Cli tool for creating react apps.
https://kktjs.github.io/kkt
MIT License
49 stars 11 forks source link

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

Closed jaywcjlove closed 2 years ago

jaywcjlove commented 3 years ago

react-scripts version react-scripts version

Upgrade react-scripts to v5

.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 commented 3 years ago

e3ac95fe219a68e0f03f9259863aa27ba8399de4 f2a44331b762c242f95d322df7d96954b7df7f41 36eb963fac3850be8d2c8c8ed8ef27ff9642332a

jaywcjlove commented 3 years ago

TypeError: Cannot read property 'javascript' of undefined https://github.com/webpack-contrib/terser-webpack-plugin/issues/339

jaywcjlove commented 2 years ago
jaywcjlove commented 2 years ago
jaywcjlove commented 2 years ago

⚠️ sourceMap source file does not exist. ^1

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)/;
    }
  }
  // ⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡
}
jaywcjlove commented 2 years ago 
> kkt build --app-src ./website

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

Error: true is not a PostCSS plugin
    at runMicrotasks (<anonymous>)
jaywcjlove commented 2 years ago 
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 commented 2 years ago 
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,
  },
};
jaywcjlove commented 2 years ago 
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