Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jaywcjlove opened this issue Mar 12, 2021 · 9 comments
Closed

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

jaywcjlove opened this issue Mar 12, 2021 · 9 comments

Comments

@jaywcjlove
Copy link
Member

jaywcjlove commented Mar 12, 2021

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
Copy link
Member Author

e3ac95f
f2a4433
36eb963

@jaywcjlove
Copy link
Member Author

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

@jaywcjlove
Copy link
Member Author

jaywcjlove commented Oct 3, 2021

@jaywcjlove
Copy link
Member Author

@jaywcjlove
Copy link
Member Author

jaywcjlove commented Dec 31, 2021

⚠️ 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)/;
    }
  }
  // ⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡
}

Footnotes

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

@jaywcjlove
Copy link
Member Author

> kkt build --app-src ./website

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

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

@jaywcjlove jaywcjlove changed the title Upgrade webpack v5 Upgrade react-scripts to v5, Support Webpack 5.x Jan 1, 2022
jaywcjlove added a commit to uiwjs/react-code-preview that referenced this issue Jan 2, 2022
jaywcjlove added a commit to uiwjs/react-markdown-editor that referenced this issue Jan 8, 2022
kktjs/kkt#198
Upgrade react-scripts to v5, Support Webpack 5.x
jaywcjlove added a commit to uiwjs/react-baidu-map that referenced this issue Jan 8, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/npm-unpkg that referenced this issue Jan 8, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to jaywcjlove/tsbb that referenced this issue Jan 8, 2022
jaywcjlove added a commit to uiwjs/react-amap that referenced this issue Jan 8, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
@jaywcjlove
Copy link
Member Author

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 added a commit to uiwjs/react-github-corners that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-split that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-clock that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-clock that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-domain-verify that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/ui-color that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-only-when that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-stackblitz that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-codepen that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5
kktjs/kkt#198
@jaywcjlove
Copy link
Member Author

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 added a commit to uiwjs/react-prismjs that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/react-shields that referenced this issue Jan 10, 2022
Upgrade react-scripts to v5, Support Webpack 5
kktjs/kkt#198
jaywcjlove added a commit to uiwjs/keycode-info that referenced this issue Jan 12, 2022
kktjs/kkt#198
Upgrade react-scripts to v5, Support Webpack 5.x
jaywcjlove added a commit to jaywcjlove/nginx-editor that referenced this issue Jan 12, 2022
kktjs/kkt#198
Upgrade react-scripts to v5, Support Webpack 5
jaywcjlove added a commit to uiwjs/react-run-web that referenced this issue Jan 12, 2022
jaywcjlove added a commit to jaywcjlove/dev-site that referenced this issue Jan 12, 2022
@jaywcjlove
Copy link
Member Author

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

jaywcjlove added a commit to uiwjs/react-code-preview that referenced this issue Jan 17, 2022
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
whyzsm pushed a commit to whyzsm/antdp that referenced this issue May 22, 2023
Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
jaywcjlove added a commit that referenced this issue May 27, 2023
Module not found: Error: Can't resolve 'path' in '/home/runner/work/react-color/react-color/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.
shinyjohn0401 pushed a commit to shinyjohn0401/react-codemirror that referenced this issue Jan 22, 2024
Startup service stuck
kktjs/kkt#330

Upgrade react-scripts to v5, Support Webpack 5.x
kktjs/kkt#198
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant