Skip to content

Commit aaddb29

Browse files
raixianschmitzjasonwilliamsSpacerate-w-h
authored
[WP5] Webpack5 update (#10961)
* Revert "Revert "Update postcss packages" (#10216)" This reverts commit 3968923. * Revert "Update postcss packages" (#10216) This reverts commit 580ed5d. * Update postcss and loader * Update [email protected] References: * [hook rename](TypeStrong/fork-ts-checker-webpack-plugin#490) * [include/exclude](TypeStrong/fork-ts-checker-webpack-plugin#450) and [issue options](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#issues-options) * [release notes 5.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v5.0.0) * Update fork-ts-checker-webpack-plugin 6.0.5 * Add [email protected] remove Add [email protected] Remove optimize-css-assets-webpack-plugin and postcss-safe-parser References: * https://webpack.js.org/plugins/css-minimizer-webpack-plugin/ * Add support for Webpack 5 message objects * Update WebpackManifestPlugin to v3.0.0 * Support both "SingleEntryPlugin" and "EntryPlugin" * Support Webpack 5 IgnorePlugin signature Reference: * https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales * #10006 * Update webpack and dev server * Enable persistent cache * Fix react-error-overlay webpack * Fix dev server config * Remove support for SingleEntryPlugin * update workbox-webpack-plugin * Fix post css config * Comment out WebpackManifestPlugin for now having issues with undefined path * Add fast refresh entries to ModuleScopePlugin * Format files * Remove unused variables in start command * git ignore tsconfig.tsbuildinfo supporting incremental typescript builds * simplify output path review feedback from @kumarlachhani * Use asset modules in react-scripts * Use asset modules in react-error-overlay * eslint-config-react-app typo fix (#10317) This just fixes a shell snippet in the readme file for this plugin * Fix link address (#10907) Replace the Github home link with a link to the repo's main page or a link to the source (https://github.com/CodeByZach/pace/blob/master/pace.js) * Bump immer version for fixing security issue (#10791) Bump immer minor version to fix `Prototype Pollution` Security issue. * test(create-react-app): add integration tests (#10381) * Revert "Use asset modules in react-error-overlay" This reverts commit 952f896. * Disable broken tests for now * Revert source-map bump in react-error-overlay * JSON is using default export * Webpack config: Remove invalid parser configuration * Fix issue with ModuleScope and babel runtime * Fix svgr configuration * Webpack config svg use file-loader instead of url-loader * Update postcss-normalize * Fix asset output name * Update test matrix using node 12+14 postcss normalize only support node >=12 * Fix file output extension * Align assetModuleFilename * pipeline update configuration names * Add back webpack-manifest-plugin * Fix kitchen sink get actual href value .href is prefixed with http://localhost etc. * Update kitchen sink test to webpack 5 asset modules * Let webpack handle global this * Fix eject copy config/webpack/persistentCache folder * Move tsbuildinfo into cache folder * Update dependencies * Update webpack-dev-server to beta.3 * Compilation.modules changed to type Set reference: comment by @slorber #9994 (comment) * Format JsonInclusion.js using prettier * Run prettier on webpack dev server config * Enable e2e behavior tests using node 12+14 * Comment out e2e behavior tests for now * Add experimental support for module federation * Fix missing wds socket path update accordingly to review by @xiaokekeT * Revert "Add experimental support for module federation" This reverts commit 8fdc63b. Co-authored-by: Ian Schmitz <[email protected]> Co-authored-by: jasonwilliams <[email protected]> Co-authored-by: Joseph Atkins-Turkish <[email protected]> Co-authored-by: e-w-h <[email protected]> Co-authored-by: Shamprasad RH <[email protected]> Co-authored-by: James George <[email protected]>
1 parent fddce8a commit aaddb29

31 files changed

+432
-401
lines changed

‎.eslintrc.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"browser": true,
55
"commonjs": true,
66
"node": true,
7-
"es6": true
7+
"es6": true,
8+
"jest": true
89
},
910
"parserOptions": {
1011
"ecmaVersion": 2018

‎.github/workflows/integration.yml

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: Integration Tests
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
pull_request:
8+
branches:
9+
- master
10+
11+
jobs:
12+
job:
13+
runs-on: ${{ matrix.os }}
14+
strategy:
15+
matrix:
16+
os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
17+
node: ['10', '12', '14']
18+
steps:
19+
- uses: actions/checkout@v2
20+
- name: Setup node
21+
uses: actions/setup-node@v1
22+
with:
23+
node-version: ${{ matrix.node }}
24+
- name: Cache dependencies
25+
id: cache
26+
uses: actions/cache@v2
27+
with:
28+
path: |
29+
node_modules
30+
*/*/node_modules
31+
key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', './yarn.lock') }}
32+
- name: Install packages
33+
if: steps.cache.outputs.cache-hit != 'true'
34+
run: yarn --frozen-lockfile --prefer-offline
35+
- name: Run integration tests
36+
run: yarn test:integration

‎azure-pipelines-test-job.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ parameters:
66
name: ''
77
testScript: ''
88
configurations:
9-
LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
109
LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
10+
LinuxNode14: { vmImage: 'ubuntu-16.04', nodeVersion: 14.x }
1111

1212
jobs:
1313
- job: ${{ parameters.name }}

‎azure-pipelines.yml

+19-19
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ jobs:
2626
# ******************************************************************************
2727
# Installs test suite
2828
# ******************************************************************************
29-
- template: azure-pipelines-test-job.yml
30-
parameters:
31-
name: Installs
32-
testScript: tasks/e2e-installs.sh
29+
# - template: azure-pipelines-test-job.yml
30+
# parameters:
31+
# name: Installs
32+
# testScript: tasks/e2e-installs.sh
3333

3434
# ******************************************************************************
3535
# Kitchensink test suite
@@ -42,25 +42,25 @@ jobs:
4242
# ******************************************************************************
4343
# Kitchensink Eject test suite
4444
# ******************************************************************************
45-
- template: azure-pipelines-test-job.yml
46-
parameters:
47-
name: KitchensinkEject
48-
testScript: tasks/e2e-kitchensink-eject.sh
45+
# - template: azure-pipelines-test-job.yml
46+
# parameters:
47+
# name: KitchensinkEject
48+
# testScript: tasks/e2e-kitchensink-eject.sh
4949

5050
# ******************************************************************************
5151
# Behavior test suite
5252
# ******************************************************************************
53-
- template: azure-pipelines-test-job.yml
54-
parameters:
55-
name: Behavior
56-
testScript: tasks/e2e-behavior.sh
57-
configurations:
58-
LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
59-
LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
60-
WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x }
61-
WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
62-
MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x }
63-
MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }
53+
# - template: azure-pipelines-test-job.yml
54+
# parameters:
55+
# name: Behavior
56+
# testScript: tasks/e2e-behavior.sh
57+
# configurations:
58+
# LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
59+
# LinuxNode14: { vmImage: 'ubuntu-16.04', nodeVersion: 14.x }
60+
# WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
61+
# WindowsNode14: { vmImage: 'windows-2019', nodeVersion: 14.x }
62+
# MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }
63+
# MacNode14: { vmImage: 'macOS-10.15', nodeVersion: 14.x }
6464

6565
# ******************************************************************************
6666
# Old Node test suite

‎docusaurus/docs/advanced-configuration.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ You can adjust various development and production settings by setting environmen
1515
| PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
1616
| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |
1717
| WDS_SOCKET_HOST | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details. |
18-
| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. |
18+
| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. |
1919
| WDS_SOCKET_PORT | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details. |
2020
| PUBLIC_URL | ✅ Used | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
2121
| BUILD_PATH | 🚫 Ignored | ✅ Used | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project. |

‎docusaurus/docs/using-the-public-folder.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ The `public` folder is useful as a workaround for a number of less common cases:
6060

6161
- You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
6262
- You have thousands of images and need to dynamically reference their paths.
63-
- You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
63+
- You want to include a small script like [`pace.js`](https://github.com/CodeByZach/pace) outside of the bundled code.
6464
- Some libraries may be incompatible with webpack and you have no other option but to include it as a `<script>` tag.
6565

6666
Note that if you add a `<script>` that declares global variables, you should read the topic [Using Global Variables](using-global-variables.md) in the next section which explains how to reference them.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"screencast": "node ./tasks/screencast.js",
1616
"screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
1717
"alex": "alex .",
18+
"test:integration": "jest test/integration",
1819
"test": "cd packages/react-scripts && node bin/react-scripts.js test",
1920
"format": "prettier --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
2021
"compile:lockfile": "node tasks/compile-lockfile.js"

‎packages/create-react-app/__tests__/getTemplateInstallPackage.test.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ describe('getTemplateInstallPackage', () => {
2121
});
2222

2323
it('cra-template-typescript gives cra-template-typescript', async () => {
24-
await expect(getTemplateInstallPackage('cra-template-typescript')).resolves.toBe(
25-
'cra-template-typescript'
26-
);
24+
await expect(
25+
getTemplateInstallPackage('cra-template-typescript')
26+
).resolves.toBe('cra-template-typescript');
2727
});
2828

2929
it('typescript gives cra-template-typescript', async () => {
@@ -45,9 +45,9 @@ describe('getTemplateInstallPackage', () => {
4545
});
4646

4747
it('cra-template-typescript@next gives cra-template-typescript@next', async () => {
48-
await expect(getTemplateInstallPackage('cra-template-typescript@next')).resolves.toBe(
49-
'cra-template-typescript@next'
50-
);
48+
await expect(
49+
getTemplateInstallPackage('cra-template-typescript@next')
50+
).resolves.toBe('cra-template-typescript@next');
5151
});
5252

5353
it('@iansu gives @iansu/cra-template', async () => {
@@ -69,9 +69,9 @@ describe('getTemplateInstallPackage', () => {
6969
});
7070

7171
it('@iansu/cra-template-typescript@next gives @iansu/cra-template-typescript@next', async () => {
72-
await expect(getTemplateInstallPackage('@iansu/cra-template-typescript@next')).resolves.toBe(
73-
'@iansu/cra-template-typescript@next'
74-
);
72+
await expect(
73+
getTemplateInstallPackage('@iansu/cra-template-typescript@next')
74+
).resolves.toBe('@iansu/cra-template-typescript@next');
7575
});
7676

7777
it('http://example.com/cra-template.tar.gz gives http://example.com/cra-template.tar.gz', async () => {

‎packages/eslint-config-react-app/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ This config also ships with optional Jest rules for ESLint (based on [`eslint-pl
3939
You'll first need to add the ESLint plugin for Jest (if you don't already have it installed).
4040

4141
```sh
42-
npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library&^3.9.0
42+
npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library@^3.9.0
4343
```
4444

4545
You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config.

‎packages/react-dev-utils/ModuleNotFoundPlugin.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -100,14 +100,7 @@ class ModuleNotFoundPlugin {
100100
const { prettierError } = this;
101101
compiler.hooks.make.intercept({
102102
register(tap) {
103-
// "SingleEntryPlugin" can be removed when Webpack 4 no longer have to be supported
104-
if (
105-
!(
106-
tap.name === 'MultiEntryPlugin' ||
107-
tap.name === 'SingleEntryPlugin' ||
108-
tap.name === 'EntryPlugin'
109-
)
110-
) {
103+
if (!(tap.name === 'MultiEntryPlugin' || tap.name === 'EntryPlugin')) {
111104
return tap;
112105
}
113106
return Object.assign({}, tap, {

‎packages/react-dev-utils/ModuleScopePlugin.js

+6
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class ModuleScopePlugin {
1515
constructor(appSrc, allowedFiles = []) {
1616
this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
1717
this.allowedFiles = new Set(allowedFiles);
18+
this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
1819
}
1920

2021
apply(resolver) {
@@ -53,6 +54,11 @@ class ModuleScopePlugin {
5354
if (this.allowedFiles.has(requestFullPath)) {
5455
return callback();
5556
}
57+
if (this.allowedPaths.some((allowedFile) => {
58+
return requestFullPath.startsWith(allowedFile);
59+
})) {
60+
return callback();
61+
}
5662
// Find path from src to the requested file
5763
// Error if in a parent directory of all given appSrcs
5864
if (

‎packages/react-dev-utils/README.md

+2-4
Original file line numberDiff line numberDiff line change
@@ -231,11 +231,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
231231

232232
var compiler = webpack(config);
233233

234-
compiler.hooks.invalid.tap('invalid', function() {
234+
compiler.hooks.invalid.tap('invalid', function () {
235235
console.log('Compiling...');
236236
});
237237

238-
compiler.hooks.done.tap('done', function(stats) {
238+
compiler.hooks.done.tap('done', function (stats) {
239239
var rawMessages = stats.toJson({}, true);
240240
var messages = formatWebpackMessages(rawMessages);
241241
if (!messages.errors.length && !messages.warnings.length) {
@@ -338,11 +338,9 @@ The `args` object accepts a number of properties:
338338

339339
- **appName** `string`: The name that will be printed to the terminal.
340340
- **config** `Object`: The webpack configuration options to be provided to the webpack constructor.
341-
- **devSocket** `Object`: Required if `useTypeScript` is `true`. This object should include `errors` and `warnings` which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running `fork-ts-checker-webpack-plugin` with `async: true` to report errors that are emitted after the webpack build is complete.
342341
- **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below.
343342
- **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm.
344343
- **useTypeScript** `boolean`: If `true`, TypeScript type checking will be enabled. Be sure to provide the `devSocket` argument above if this is set to `true`.
345-
- **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages.
346344
- **webpack** `function`: A reference to the webpack constructor.
347345

348346
##### `prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object`

‎packages/react-dev-utils/WebpackDevServerUtils.js

+7-64
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const prompts = require('prompts');
1717
const clearConsole = require('./clearConsole');
1818
const formatWebpackMessages = require('./formatWebpackMessages');
1919
const getProcessForPort = require('./getProcessForPort');
20-
const typescriptFormatter = require('./typescriptFormatter');
2120
const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin');
2221

2322
const isInteractive = process.stdout.isTTY;
@@ -104,11 +103,9 @@ function printInstructions(appName, urls, useYarn) {
104103
function createCompiler({
105104
appName,
106105
config,
107-
devSocket,
108106
urls,
109107
useYarn,
110108
useTypeScript,
111-
tscCompileOnError,
112109
webpack,
113110
}) {
114111
// "Compiler" is a low-level interface to webpack.
@@ -137,28 +134,16 @@ function createCompiler({
137134

138135
let isFirstCompile = true;
139136
let tsMessagesPromise;
140-
let tsMessagesResolver;
141137

142138
if (useTypeScript) {
143-
compiler.hooks.beforeCompile.tap('beforeCompile', () => {
144-
tsMessagesPromise = new Promise(resolve => {
145-
tsMessagesResolver = msgs => resolve(msgs);
146-
});
147-
});
148-
149139
forkTsCheckerWebpackPlugin
150140
.getCompilerHooks(compiler)
151-
.receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
152-
const allMsgs = [...diagnostics, ...lints];
153-
const format = message =>
154-
`${message.file}\n${typescriptFormatter(message, true)}`;
155-
156-
tsMessagesResolver({
157-
errors: allMsgs.filter(msg => msg.severity === 'error').map(format),
158-
warnings: allMsgs
159-
.filter(msg => msg.severity === 'warning')
160-
.map(format),
161-
});
141+
.waiting.tap('awaitingTypeScriptCheck', () => {
142+
console.log(
143+
chalk.yellow(
144+
'Files successfully emitted, waiting for typecheck results...'
145+
)
146+
);
162147
});
163148
}
164149

@@ -180,48 +165,6 @@ function createCompiler({
180165
errors: true,
181166
});
182167

183-
if (useTypeScript && statsData.errors.length === 0) {
184-
const delayedMsg = setTimeout(() => {
185-
console.log(
186-
chalk.yellow(
187-
'Files successfully emitted, waiting for typecheck results...'
188-
)
189-
);
190-
}, 100);
191-
192-
const messages = await tsMessagesPromise;
193-
clearTimeout(delayedMsg);
194-
if (tscCompileOnError) {
195-
statsData.warnings.push(...messages.errors);
196-
} else {
197-
statsData.errors.push(...messages.errors);
198-
}
199-
statsData.warnings.push(...messages.warnings);
200-
201-
// Push errors and warnings into compilation result
202-
// to show them after page refresh triggered by user.
203-
if (tscCompileOnError) {
204-
stats.compilation.warnings.push(...messages.errors);
205-
} else {
206-
stats.compilation.errors.push(...messages.errors);
207-
}
208-
stats.compilation.warnings.push(...messages.warnings);
209-
210-
if (messages.errors.length > 0) {
211-
if (tscCompileOnError) {
212-
devSocket.warnings(messages.errors);
213-
} else {
214-
devSocket.errors(messages.errors);
215-
}
216-
} else if (messages.warnings.length > 0) {
217-
devSocket.warnings(messages.warnings);
218-
}
219-
220-
if (isInteractive) {
221-
clearConsole();
222-
}
223-
}
224-
225168
const messages = formatWebpackMessages(statsData);
226169
const isSuccessful = !messages.errors.length && !messages.warnings.length;
227170
if (isSuccessful) {
@@ -377,7 +320,7 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
377320
// If proxy is specified, let it handle any request except for
378321
// files in the public folder and requests to the WebpackDevServer socket endpoint.
379322
// https://github.com/facebook/create-react-app/issues/6720
380-
const sockPath = process.env.WDS_SOCKET_PATH || '/sockjs-node';
323+
const sockPath = process.env.WDS_SOCKET_PATH || '/ws';
381324
const isDefaultSockHost = !process.env.WDS_SOCKET_HOST;
382325
function mayProxy(pathname) {
383326
const maybePublicPath = path.resolve(

0 commit comments

Comments
 (0)