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

[WP5] Webpack5 update #10961

Merged
merged 62 commits into from
May 28, 2021
Merged
Show file tree
Hide file tree
Changes from 46 commits
Commits
Show all changes
62 commits
Select commit Hold shift + click to select a range
cdb7ec0
Revert "Revert "Update postcss packages" (#10216)"
Jan 27, 2021
878f8c4
Merge remote-tracking branch 'upstream/master'
Mar 6, 2021
79b16d4
Revert "Update postcss packages" (#10216)
ianschmitz Dec 8, 2020
8d5d16f
Update postcss and loader
Jan 27, 2021
0254dc9
Update fork-ts-checker-webpack-plugin@5.2.1
Nov 3, 2020
6777da0
Update fork-ts-checker-webpack-plugin 6.0.5
Dec 5, 2020
f959414
Add css-minimizer-webpack-plugin@1.1.5 remove
Nov 4, 2020
fb56a14
Add support for Webpack 5 message objects
jasonwilliams Nov 20, 2020
48c5456
Update WebpackManifestPlugin to v3.0.0
Dec 5, 2020
468ffe6
Support both "SingleEntryPlugin" and "EntryPlugin"
Dec 5, 2020
4d0be4a
Support Webpack 5 IgnorePlugin signature
Mar 6, 2021
cfee807
Update webpack and dev server
Mar 6, 2021
38d72e7
Enable persistent cache
Mar 6, 2021
5bef914
Fix react-error-overlay webpack
Mar 6, 2021
58d36c2
Fix dev server config
Mar 6, 2021
a89a63a
Remove support for SingleEntryPlugin
Mar 6, 2021
74ed0c7
update workbox-webpack-plugin
Mar 6, 2021
19faf8c
Fix post css config
Mar 6, 2021
bbf93d2
Comment out WebpackManifestPlugin for now having issues with undefine…
Mar 6, 2021
73c952b
Add fast refresh entries to ModuleScopePlugin
Mar 6, 2021
33f9064
Format files
Mar 6, 2021
5e79ffa
Remove unused variables in start command
Mar 6, 2021
c0e4c4d
git ignore tsconfig.tsbuildinfo
Mar 6, 2021
871b2e9
simplify output path
Mar 20, 2021
613e2a5
Use asset modules in react-scripts
Mar 20, 2021
952f896
Use asset modules in react-error-overlay
Mar 20, 2021
651d0db
eslint-config-react-app typo fix (#10317)
Spacerat May 12, 2021
b680ee7
Fix link address (#10907)
May 12, 2021
281a868
Bump immer version for fixing security issue (#10791)
shamprasadrh May 12, 2021
7bdeced
test(create-react-app): add integration tests (#10381)
jamesgeorge007 May 12, 2021
2217ab7
Revert "Use asset modules in react-error-overlay"
May 14, 2021
6eef86c
Disable broken tests for now
May 14, 2021
0170343
Merge remote-tracking branch 'upstream/wp5' into webpack5-update
May 14, 2021
beb6e0e
Revert source-map bump in react-error-overlay
May 14, 2021
7234425
JSON is using default export
May 14, 2021
06fbbd0
Webpack config: Remove invalid parser configuration
May 14, 2021
0190603
Fix issue with ModuleScope and babel runtime
May 14, 2021
d709342
Fix svgr configuration
May 14, 2021
a35d315
Webpack config svg use file-loader instead of url-loader
May 14, 2021
236fd9c
Update postcss-normalize
May 14, 2021
a002e34
Fix asset output name
May 14, 2021
01e8444
Update test matrix using node 12+14
May 14, 2021
43a0d0d
Fix file output extension
May 14, 2021
506c13b
Align assetModuleFilename
May 14, 2021
9d6f4a9
pipeline update configuration names
May 14, 2021
6f683db
Add back webpack-manifest-plugin
May 15, 2021
819936b
Fix kitchen sink get actual href value
May 15, 2021
96d8f15
Update kitchen sink test to webpack 5 asset modules
May 15, 2021
f56887a
Let webpack handle global this
May 15, 2021
73f20aa
Fix eject copy config/webpack/persistentCache folder
May 15, 2021
9cdf282
Move tsbuildinfo into cache folder
May 15, 2021
d72116e
Update dependencies
May 15, 2021
8f81bc7
Update webpack-dev-server to beta.3
May 15, 2021
b7f1f2f
Compilation.modules changed to type Set
May 15, 2021
5b35c42
Merge remote-tracking branch 'upstream/master' into webpack5-update
May 15, 2021
c2dbf96
Format JsonInclusion.js using prettier
May 15, 2021
35df374
Run prettier on webpack dev server config
May 15, 2021
2504864
Enable e2e behavior tests using node 12+14
May 15, 2021
8976811
Comment out e2e behavior tests for now
May 15, 2021
8fdc63b
Add experimental support for module federation
May 15, 2021
28aa672
Fix missing wds socket path update
May 18, 2021
c7c916e
Revert "Add experimental support for module federation"
May 18, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion azure-pipelines-test-job.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ parameters:
name: ''
testScript: ''
configurations:
LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
LinuxNode14: { vmImage: 'ubuntu-16.04', nodeVersion: 14.x }

jobs:
- job: ${{ parameters.name }}
Expand Down
38 changes: 19 additions & 19 deletions azure-pipelines.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ jobs:
# ******************************************************************************
# Installs test suite
# ******************************************************************************
- template: azure-pipelines-test-job.yml
parameters:
name: Installs
testScript: tasks/e2e-installs.sh
# - template: azure-pipelines-test-job.yml
# parameters:
# name: Installs
# testScript: tasks/e2e-installs.sh

# ******************************************************************************
# Kitchensink test suite
Expand All @@ -42,25 +42,25 @@ jobs:
# ******************************************************************************
# Kitchensink Eject test suite
# ******************************************************************************
- template: azure-pipelines-test-job.yml
parameters:
name: KitchensinkEject
testScript: tasks/e2e-kitchensink-eject.sh
# - template: azure-pipelines-test-job.yml
# parameters:
# name: KitchensinkEject
# testScript: tasks/e2e-kitchensink-eject.sh

# ******************************************************************************
# Behavior test suite
# ******************************************************************************
- template: azure-pipelines-test-job.yml
parameters:
name: Behavior
testScript: tasks/e2e-behavior.sh
configurations:
LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x }
WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x }
MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }
# - template: azure-pipelines-test-job.yml
# parameters:
# name: Behavior
# testScript: tasks/e2e-behavior.sh
# configurations:
# LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
# LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
# WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x }
# WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
# MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x }
# MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }

# ******************************************************************************
# Old Node test suite
Expand Down
3 changes: 3 additions & 0 deletions packages/cra-template-typescript/template/gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
/.pnp
.pnp.js

# build cache info
tsconfig.tsbuildinfo
raix marked this conversation as resolved.
Show resolved Hide resolved

# testing
/coverage

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ describe('getTemplateInstallPackage', () => {
});

it('cra-template-typescript gives cra-template-typescript', async () => {
await expect(getTemplateInstallPackage('cra-template-typescript')).resolves.toBe(
'cra-template-typescript'
);
await expect(
getTemplateInstallPackage('cra-template-typescript')
).resolves.toBe('cra-template-typescript');
});

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

it('cra-template-typescript@next gives cra-template-typescript@next', async () => {
await expect(getTemplateInstallPackage('cra-template-typescript@next')).resolves.toBe(
'cra-template-typescript@next'
);
await expect(
getTemplateInstallPackage('cra-template-typescript@next')
).resolves.toBe('cra-template-typescript@next');
});

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

it('@iansu/cra-template-typescript@next gives @iansu/cra-template-typescript@next', async () => {
await expect(getTemplateInstallPackage('@iansu/cra-template-typescript@next')).resolves.toBe(
'@iansu/cra-template-typescript@next'
);
await expect(
getTemplateInstallPackage('@iansu/cra-template-typescript@next')
).resolves.toBe('@iansu/cra-template-typescript@next');
});

it('http://example.com/cra-template.tar.gz gives http://example.com/cra-template.tar.gz', async () => {
Expand Down
9 changes: 1 addition & 8 deletions packages/react-dev-utils/ModuleNotFoundPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,7 @@ class ModuleNotFoundPlugin {
const { prettierError } = this;
compiler.hooks.make.intercept({
register(tap) {
// "SingleEntryPlugin" can be removed when Webpack 4 no longer have to be supported
if (
!(
tap.name === 'MultiEntryPlugin' ||
tap.name === 'SingleEntryPlugin' ||
tap.name === 'EntryPlugin'
)
) {
if (!(tap.name === 'MultiEntryPlugin' || tap.name === 'EntryPlugin')) {
return tap;
}
return Object.assign({}, tap, {
Expand Down
6 changes: 6 additions & 0 deletions packages/react-dev-utils/ModuleScopePlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ class ModuleScopePlugin {
constructor(appSrc, allowedFiles = []) {
this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
this.allowedFiles = new Set(allowedFiles);
this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
}

apply(resolver) {
Expand Down Expand Up @@ -53,6 +54,11 @@ class ModuleScopePlugin {
if (this.allowedFiles.has(requestFullPath)) {
return callback();
}
if (this.allowedPaths.some((allowedFile) => {
return requestFullPath.startsWith(allowedFile);
})) {
return callback();
}
// Find path from src to the requested file
// Error if in a parent directory of all given appSrcs
if (
Expand Down
6 changes: 2 additions & 4 deletions packages/react-dev-utils/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -231,11 +231,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

var compiler = webpack(config);

compiler.hooks.invalid.tap('invalid', function() {
compiler.hooks.invalid.tap('invalid', function () {
console.log('Compiling...');
});

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

- **appName** `string`: The name that will be printed to the terminal.
- **config** `Object`: The webpack configuration options to be provided to the webpack constructor.
- **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.
- **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below.
- **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm.
- **useTypeScript** `boolean`: If `true`, TypeScript type checking will be enabled. Be sure to provide the `devSocket` argument above if this is set to `true`.
- **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.
- **webpack** `function`: A reference to the webpack constructor.

##### `prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object`
Expand Down
69 changes: 6 additions & 63 deletions packages/react-dev-utils/WebpackDevServerUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const prompts = require('prompts');
const clearConsole = require('./clearConsole');
const formatWebpackMessages = require('./formatWebpackMessages');
const getProcessForPort = require('./getProcessForPort');
const typescriptFormatter = require('./typescriptFormatter');
const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin');

const isInteractive = process.stdout.isTTY;
Expand Down Expand Up @@ -104,11 +103,9 @@ function printInstructions(appName, urls, useYarn) {
function createCompiler({
appName,
config,
devSocket,
urls,
useYarn,
useTypeScript,
tscCompileOnError,
webpack,
}) {
// "Compiler" is a low-level interface to webpack.
Expand Down Expand Up @@ -137,28 +134,16 @@ function createCompiler({

let isFirstCompile = true;
let tsMessagesPromise;
let tsMessagesResolver;

if (useTypeScript) {
compiler.hooks.beforeCompile.tap('beforeCompile', () => {
tsMessagesPromise = new Promise(resolve => {
tsMessagesResolver = msgs => resolve(msgs);
});
});

forkTsCheckerWebpackPlugin
.getCompilerHooks(compiler)
.receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
const allMsgs = [...diagnostics, ...lints];
const format = message =>
`${message.file}\n${typescriptFormatter(message, true)}`;

tsMessagesResolver({
errors: allMsgs.filter(msg => msg.severity === 'error').map(format),
warnings: allMsgs
.filter(msg => msg.severity === 'warning')
.map(format),
});
.waiting.tap('awaitingTypeScriptCheck', () => {
console.log(
chalk.yellow(
'Files successfully emitted, waiting for typecheck results...'
)
);
});
}

Expand All @@ -180,48 +165,6 @@ function createCompiler({
errors: true,
});

if (useTypeScript && statsData.errors.length === 0) {
const delayedMsg = setTimeout(() => {
console.log(
chalk.yellow(
'Files successfully emitted, waiting for typecheck results...'
)
);
}, 100);

const messages = await tsMessagesPromise;
clearTimeout(delayedMsg);
if (tscCompileOnError) {
statsData.warnings.push(...messages.errors);
} else {
statsData.errors.push(...messages.errors);
}
statsData.warnings.push(...messages.warnings);

// Push errors and warnings into compilation result
// to show them after page refresh triggered by user.
if (tscCompileOnError) {
stats.compilation.warnings.push(...messages.errors);
} else {
stats.compilation.errors.push(...messages.errors);
}
stats.compilation.warnings.push(...messages.warnings);

if (messages.errors.length > 0) {
if (tscCompileOnError) {
devSocket.warnings(messages.errors);
} else {
devSocket.errors(messages.errors);
}
} else if (messages.warnings.length > 0) {
devSocket.warnings(messages.warnings);
}

if (isInteractive) {
clearConsole();
}
}

const messages = formatWebpackMessages(statsData);
const isSuccessful = !messages.errors.length && !messages.warnings.length;
if (isSuccessful) {
Expand Down
14 changes: 13 additions & 1 deletion packages/react-dev-utils/formatWebpackMessages.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,19 @@ function isLikelyASyntaxError(message) {

// Cleans up webpack error messages.
function formatMessage(message) {
let lines = message.split('\n');
let lines = [];

if (typeof message === 'string') {
lines = message.split('\n');
} else if ('message' in message) {
lines = message['message'].split('\n');
} else if (Array.isArray(message)) {
message.forEach(message => {
if ('message' in message) {
lines = message['message'].split('\n');
}
});
}

// Strip webpack-added headers off errors/warnings
// https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
Expand Down
2 changes: 1 addition & 1 deletion packages/react-dev-utils/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"escape-string-regexp": "2.0.0",
"filesize": "6.1.0",
"find-up": "4.1.0",
"fork-ts-checker-webpack-plugin": "4.1.6",
"fork-ts-checker-webpack-plugin": "6.0.5",
"global-modules": "2.0.0",
"globby": "11.0.1",
"gzip-size": "5.1.1",
Expand Down
45 changes: 0 additions & 45 deletions packages/react-dev-utils/typescriptFormatter.js

This file was deleted.

3 changes: 1 addition & 2 deletions packages/react-error-overlay/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,7 @@
"rimraf": "^3.0.2",
"settle-promise": "1.0.0",
"source-map": "0.5.7",
"terser-webpack-plugin": "4.2.3",
"webpack": "^4.44.2"
"webpack": "^5.24.3"
},
"jest": {
"setupFiles": [
Expand Down
8 changes: 4 additions & 4 deletions packages/react-error-overlay/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ module.exports = {
alias: {
iframeScript$: path.resolve(__dirname, './lib/iframe-bundle.js'),
},
fallback: {
fs: false,
path: false,
},
},
optimization: {
nodeEnv: false,
},
node: {
fs: 'empty',
process: false,
},
performance: {
hints: false,
},
Expand Down
Loading