Skip to content

Commit 9da2fc9

Browse files
CraigMacomberCraig Macomber
CraigMacomber
and
Craig Macomber
authored
Webpack 5 for client mono-repo (#10186)
* update client mono-repo to webpack 5 * fix spaces example * Fix spaces tests * use process polyfill * fix contact collection * Use contenthash * fix several tests by polyfilling process * fix remaining tests Co-authored-by: Craig Macomber <[email protected]>
1 parent 95e1bf2 commit 9da2fc9

File tree

70 files changed

+1298
-333
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1298
-333
lines changed

Diff for: ‎azure/packages/external-controller/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -73,17 +73,17 @@
7373
"eslint-plugin-react": "~7.28.0",
7474
"eslint-plugin-tsdoc": "~0.2.14",
7575
"eslint-plugin-unicorn": "~40.0.0",
76-
"html-webpack-plugin": "^4.5.2",
76+
"html-webpack-plugin": "^5.5.0",
7777
"jest": "^26.6.3",
7878
"jest-junit": "^10.0.0",
7979
"jest-puppeteer": "^4.3.0",
8080
"puppeteer": "^1.20.0",
8181
"rimraf": "^2.6.2",
8282
"ts-jest": "^26.4.4",
83-
"ts-loader": "^8.4.0",
83+
"ts-loader": "^9.3.0",
8484
"typescript": "~4.5.5",
8585
"typescript-formatter": "7.1.0",
86-
"webpack": "^4.46.0",
86+
"webpack": "^5.72.0",
8787
"webpack-cli": "^4.9.2",
8888
"webpack-dev-server": "4.0.0",
8989
"webpack-merge": "^5.8.0"

Diff for: ‎examples/apps/collaborative-textarea/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,18 @@
7878
"eslint-plugin-react": "~7.28.0",
7979
"eslint-plugin-tsdoc": "~0.2.14",
8080
"eslint-plugin-unicorn": "~40.0.0",
81-
"html-webpack-plugin": "^4.5.2",
81+
"html-webpack-plugin": "^5.5.0",
8282
"jest": "^26.6.3",
8383
"jest-junit": "^10.0.0",
8484
"jest-puppeteer": "^4.3.0",
85+
"process": "^0.11.10",
8586
"puppeteer": "^1.20.0",
8687
"rimraf": "^2.6.2",
8788
"ts-jest": "^26.4.4",
88-
"ts-loader": "^8.4.0",
89+
"ts-loader": "^9.3.0",
8990
"typescript": "~4.5.5",
9091
"typescript-formatter": "7.1.0",
91-
"webpack": "^4.46.0",
92+
"webpack": "^5.72.0",
9293
"webpack-cli": "^4.9.2",
9394
"webpack-dev-server": "4.0.0",
9495
"webpack-merge": "^5.8.0"

Diff for: ‎examples/apps/collaborative-textarea/webpack.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
const fluidRoute = require("@fluid-tools/webpack-fluid-loader");
77
const path = require("path");
88
const { merge } = require("webpack-merge");
9+
const webpack = require("webpack");
910

1011
module.exports = env => {
1112
const isProduction = env && env.production;
@@ -40,6 +41,11 @@ module.exports = env => {
4041
'Access-Control-Allow-Origin': '*'
4142
},
4243
},
44+
plugins: [
45+
new webpack.ProvidePlugin({
46+
process: 'process/browser'
47+
}),
48+
],
4349
// This impacts which files are watched by the dev server (and likely by webpack if watch is true).
4450
// This should be configurable under devServer.static.watch
4551
// (see https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md) but that does not seem to work.

Diff for: ‎examples/apps/collaborative-textarea/webpack.test.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
const path = require("path");
77
const HtmlWebpackPlugin = require("html-webpack-plugin");
8+
const webpack = require("webpack");
89

910
const pkg = require("./package.json");
1011
const componentName = pkg.name.slice(1);
@@ -42,6 +43,9 @@ module.exports = env => {
4243
}
4344
},
4445
plugins: [
46+
new webpack.ProvidePlugin({
47+
process: 'process/browser'
48+
}),
4549
new HtmlWebpackPlugin({
4650
template: "./tests/index.html",
4751
}),

Diff for: ‎examples/apps/contact-collection/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -75,17 +75,18 @@
7575
"eslint-plugin-react": "~7.28.0",
7676
"eslint-plugin-tsdoc": "~0.2.14",
7777
"eslint-plugin-unicorn": "~40.0.0",
78-
"html-webpack-plugin": "^4.5.2",
78+
"html-webpack-plugin": "^5.5.0",
7979
"jest": "^26.6.3",
8080
"jest-junit": "^10.0.0",
8181
"jest-puppeteer": "^4.3.0",
82+
"process": "^0.11.10",
8283
"puppeteer": "^1.20.0",
8384
"rimraf": "^2.6.2",
8485
"ts-jest": "^26.4.4",
85-
"ts-loader": "^8.4.0",
86+
"ts-loader": "^9.3.0",
8687
"typescript": "~4.5.5",
8788
"typescript-formatter": "7.1.0",
88-
"webpack": "^4.46.0",
89+
"webpack": "^5.72.0",
8990
"webpack-cli": "^4.9.2",
9091
"webpack-dev-server": "4.0.0",
9192
"webpack-merge": "^5.8.0"

Diff for: ‎examples/apps/contact-collection/webpack.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
const path = require("path");
77
const { merge } = require("webpack-merge");
8+
const webpack = require("webpack");
89
const HtmlWebpackPlugin = require("html-webpack-plugin");
910
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
1011

@@ -34,6 +35,9 @@ module.exports = env => {
3435
libraryTarget: "umd"
3536
},
3637
plugins: [
38+
new webpack.ProvidePlugin({
39+
process: 'process/browser'
40+
}),
3741
new HtmlWebpackPlugin({
3842
template: "./src/index.html",
3943
}),

Diff for: ‎examples/apps/contact-collection/webpack.test.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
const path = require("path");
77
const HtmlWebpackPlugin = require("html-webpack-plugin");
8+
const webpack = require("webpack");
89

910
module.exports = env => {
1011
return ({
@@ -39,6 +40,9 @@ module.exports = env => {
3940
}
4041
},
4142
plugins: [
43+
new webpack.ProvidePlugin({
44+
process: 'process/browser'
45+
}),
4246
new HtmlWebpackPlugin({
4347
template: "./tests/index.html",
4448
}),

Diff for: ‎examples/apps/spaces/package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -92,20 +92,21 @@
9292
"eslint-plugin-tsdoc": "~0.2.14",
9393
"eslint-plugin-unicorn": "~40.0.0",
9494
"html-loader": "^3.1.0",
95-
"html-webpack-plugin": "^4.5.2",
95+
"html-webpack-plugin": "^5.5.0",
9696
"jest": "^26.6.3",
9797
"jest-junit": "^10.0.0",
9898
"jest-puppeteer": "^4.3.0",
99+
"process": "^0.11.10",
99100
"puppeteer": "^1.20.0",
100101
"rimraf": "^2.6.2",
101102
"sass-loader": "^7.1.0",
102-
"source-map-loader": "^1.1.3",
103+
"source-map-loader": "^2.0.0",
103104
"style-loader": "^1.0.0",
104-
"ts-loader": "^8.4.0",
105+
"ts-loader": "^9.3.0",
105106
"typescript": "~4.5.5",
106107
"typescript-formatter": "7.1.0",
107108
"url-loader": "^2.1.0",
108-
"webpack": "^4.46.0",
109+
"webpack": "^5.72.0",
109110
"webpack-cli": "^4.9.2",
110111
"webpack-dev-server": "4.0.0",
111112
"webpack-merge": "^5.8.0"

Diff for: ‎examples/apps/spaces/webpack.config.js

+16-7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
const path = require("path");
77
const { merge } = require("webpack-merge");
88
const HtmlWebpackPlugin = require("html-webpack-plugin");
9+
const webpack = require("webpack");
910

1011
const pkg = require("./package.json");
1112
const componentName = pkg.name.slice(1);
@@ -19,6 +20,13 @@ module.exports = (env) => {
1920
},
2021
resolve: {
2122
extensions: [".ts", ".tsx", ".js"],
23+
fallback: {
24+
dgram: false,
25+
fs: false,
26+
net: false,
27+
tls: false,
28+
child_process: false,
29+
}
2230
},
2331
module: {
2432
rules: [
@@ -35,13 +43,6 @@ module.exports = (env) => {
3543
},
3644
],
3745
},
38-
node: {
39-
dgram: "empty",
40-
fs: "empty",
41-
net: "empty",
42-
tls: "empty",
43-
child_process: "empty",
44-
},
4546
output: {
4647
filename: "[name].bundle.js",
4748
path: path.resolve(__dirname, "dist"),
@@ -52,6 +53,14 @@ module.exports = (env) => {
5253
libraryTarget: "umd",
5354
},
5455
plugins: [
56+
// As of webpack 5, we no longer automatically get node polyfills.
57+
// We do however transitively depend on the `util` npm package (node_modules/util/util.js) which requires `process.env` to be defined.
58+
// We can explicitly load the polyfill for process to make this work:
59+
// https://github.com/browserify/node-util/issues/57#issuecomment-764436352
60+
// Note that using DefinePlugin with `process.env.NODE_DEBUG': undefined` would also handle this case.
61+
new webpack.ProvidePlugin({
62+
process: 'process/browser'
63+
}),
5564
new HtmlWebpackPlugin({
5665
template: "./public/index.html",
5766
}),

Diff for: ‎examples/apps/spaces/webpack.test.js

+7-29
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,25 @@
66
const path = require("path");
77
const HtmlWebpackPlugin = require("html-webpack-plugin");
88

9-
const pkg = require("./package.json");
10-
const componentName = pkg.name.slice(1);
11-
129
module.exports = env => {
13-
return ({
10+
const config = require("./webpack.config")(env);
11+
return {
12+
...config,
1413
entry: {
1514
app: "./tests/index.ts"
1615
},
17-
resolve: {
18-
extensions: [".ts", ".tsx", ".js"],
19-
},
20-
module: {
21-
rules: [{
22-
test: /\.tsx?$/,
23-
loader: require.resolve("ts-loader")
24-
},
25-
{
26-
test: /\.css$/i,
27-
use: [require.resolve('style-loader'), require.resolve('css-loader')],
28-
}]
29-
},
30-
output: {
31-
filename: "[name].bundle.js",
32-
path: path.resolve(__dirname, "dist"),
33-
library: "[name]",
34-
// https://github.com/webpack/webpack/issues/5767
35-
// https://github.com/webpack/webpack/issues/7939
36-
devtoolNamespace: componentName,
37-
libraryTarget: "umd"
38-
},
16+
mode: "development",
17+
devtool: "inline-source-map",
3918
devServer: {
4019
static: {
4120
directory: path.join(__dirname, 'tests')
4221
}
4322
},
4423
plugins: [
24+
config.plugins[0],
4525
new HtmlWebpackPlugin({
4626
template: "./tests/index.html",
4727
}),
4828
],
49-
mode: "development",
50-
devtool: "inline-source-map"
51-
});
29+
}
5230
};

Diff for: ‎examples/apps/view-framework-sampler/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,18 @@
7272
"eslint-plugin-react": "~7.28.0",
7373
"eslint-plugin-tsdoc": "~0.2.14",
7474
"eslint-plugin-unicorn": "~40.0.0",
75-
"html-webpack-plugin": "^4.5.2",
75+
"html-webpack-plugin": "^5.5.0",
7676
"jest": "^26.6.3",
7777
"jest-junit": "^10.0.0",
7878
"jest-puppeteer": "^4.3.0",
79+
"process": "^0.11.10",
7980
"puppeteer": "^1.20.0",
8081
"rimraf": "^2.6.2",
8182
"ts-jest": "^26.4.4",
82-
"ts-loader": "^8.4.0",
83+
"ts-loader": "^9.3.0",
8384
"typescript": "~4.5.5",
8485
"typescript-formatter": "7.1.0",
85-
"webpack": "^4.46.0",
86+
"webpack": "^5.72.0",
8687
"webpack-cli": "^4.9.2",
8788
"webpack-dev-server": "4.0.0",
8889
"webpack-merge": "^5.8.0"

Diff for: ‎examples/apps/view-framework-sampler/webpack.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
const path = require("path");
77
const { merge } = require("webpack-merge");
88
const HtmlWebpackPlugin = require("html-webpack-plugin");
9+
const webpack = require("webpack");
910
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
1011

1112
module.exports = env => {
@@ -34,6 +35,9 @@ module.exports = env => {
3435
libraryTarget: "umd"
3536
},
3637
plugins: [
38+
new webpack.ProvidePlugin({
39+
process: 'process/browser'
40+
}),
3741
new HtmlWebpackPlugin({
3842
template: "./src/index.html",
3943
}),

Diff for: ‎examples/apps/view-framework-sampler/webpack.test.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
const path = require("path");
77
const HtmlWebpackPlugin = require("html-webpack-plugin");
8+
const webpack = require("webpack");
89

910
module.exports = env => {
1011
return ({
@@ -39,6 +40,9 @@ module.exports = env => {
3940
}
4041
},
4142
plugins: [
43+
new webpack.ProvidePlugin({
44+
process: 'process/browser'
45+
}),
4246
new HtmlWebpackPlugin({
4347
template: "./tests/index.html",
4448
}),

Diff for: ‎examples/data-objects/canvas/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,11 @@
8484
"puppeteer": "^1.20.0",
8585
"rimraf": "^2.6.2",
8686
"style-loader": "^1.0.0",
87-
"ts-loader": "^8.4.0",
87+
"ts-loader": "^9.3.0",
8888
"typescript": "~4.5.5",
8989
"typescript-formatter": "7.1.0",
9090
"url-loader": "^2.1.0",
91-
"webpack": "^4.46.0",
91+
"webpack": "^5.72.0",
9292
"webpack-cli": "^4.9.2",
9393
"webpack-dev-server": "4.0.0",
9494
"webpack-merge": "^5.8.0"

Diff for: ‎examples/data-objects/canvas/webpack.config.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ module.exports = env => {
1717
entry: {
1818
main: "./src/index.ts"
1919
},
20-
node: {
21-
dgram: 'empty',
22-
fs: 'empty',
23-
net: 'empty',
24-
tls: 'empty',
25-
child_process: 'empty',
26-
},
2720
resolve: {
2821
extensions: [".ts", ".tsx", ".js"],
22+
fallback: {
23+
dgram: false,
24+
fs: false,
25+
net: false,
26+
tls: false,
27+
child_process: false,
28+
}
2929
},
3030
module: {
3131
rules: [{

Diff for: ‎examples/data-objects/clicker/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,10 @@
8484
"puppeteer": "^1.20.0",
8585
"rimraf": "^2.6.2",
8686
"ts-jest": "^26.4.4",
87-
"ts-loader": "^8.4.0",
87+
"ts-loader": "^9.3.0",
8888
"typescript": "~4.5.5",
8989
"typescript-formatter": "7.1.0",
90-
"webpack": "^4.46.0",
90+
"webpack": "^5.72.0",
9191
"webpack-cli": "^4.9.2",
9292
"webpack-dev-server": "4.0.0",
9393
"webpack-merge": "^5.8.0"

Diff for: ‎examples/data-objects/codemirror/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,10 @@
8181
"eslint-plugin-unicorn": "~40.0.0",
8282
"rimraf": "^2.6.2",
8383
"style-loader": "^1.0.0",
84-
"ts-loader": "^8.4.0",
84+
"ts-loader": "^9.3.0",
8585
"typescript": "~4.5.5",
8686
"typescript-formatter": "7.1.0",
87-
"webpack": "^4.46.0",
87+
"webpack": "^5.72.0",
8888
"webpack-cli": "^4.9.2",
8989
"webpack-dev-server": "4.0.0",
9090
"webpack-merge": "^5.8.0"

0 commit comments

Comments
 (0)