Skip to content

Commit 3499c5d

Browse files
chore: Partial webpack 5 support (#1707)
Refs #1703 * Inline loaders and ! prefixes should not be used as they are non-standard. They may be used by loader generated code. https://webpack.js.org/configuration/module/#ruleenforce * Adds support for both Webpack 4 and 5 in StyleguidistOptionsPlugin * Updates dependencies in Webpack example (easier to test against) * Because automatic polyfilling is switched off in 5, assert was brought in as a dependency (it's used by Doctrine, see below) ## Upstream issues Both issues below are tied to facebook/create-react-app#7929: * Process is not defined - The page still builds but this error will show in the console. I can't seem to polyfill this if anyone else can that would be great, then I think we're done. * TypeError: message.split is not a function - you may not get this error, but if you do it's related to facebook/create-react-app#7929. The quick fix is to go into node_modules/react-dev-utils/formatWebpackMessages.js:19 and add the code from facebook/create-react-app#7929 (comment) ## Not needed for this but nice to have. Doctrine should be replaced with another JSDoc parser. Doctrine is end of life and no longer supported. It causes problems with Webpack 5 because it pulls in assert which WP5 does not polyfill. For now, we can fix it by adding those polyfills (assert) but a more stable solution should be found. The issue raised: #1708
1 parent 669a917 commit 3499c5d

19 files changed

+7286
-7599
lines changed

docs/API.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,15 @@ const styleguide = styleguidist({
2727
},
2828
{
2929
test: /\.css$/,
30-
loader: 'style-loader!css-loader?modules'
30+
use: [
31+
'style-loader',
32+
{
33+
loader: 'css-loader',
34+
options: {
35+
modules: true
36+
}
37+
}
38+
]
3139
}
3240
]
3341
}

examples/basic/styleguide.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module.exports = {
2121
},
2222
{
2323
test: /\.css$/,
24-
loader: 'style-loader!css-loader',
24+
use: ['style-loader', 'css-loader'],
2525
},
2626
],
2727
},

examples/customised/styleguide.config.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,15 @@ module.exports = {
5959
},
6060
{
6161
test: /\.css$/,
62-
loader: 'style-loader!css-loader?modules',
62+
use: [
63+
'style-loader',
64+
{
65+
loader: 'css-loader',
66+
options: {
67+
modules: true,
68+
},
69+
},
70+
],
6371
},
6472
{
6573
test: /\.svg$/,

examples/express/styleguide.config.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,15 @@ module.exports = {
1111
},
1212
{
1313
test: /\.css$/,
14-
loader: 'style-loader!css-loader?modules',
14+
use: [
15+
'style-loader',
16+
{
17+
loader: 'css-loader',
18+
options: {
19+
modules: true,
20+
},
21+
},
22+
],
1523
},
1624
],
1725
},

examples/preact/styleguide.config.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ module.exports = {
1717
},
1818
{
1919
test: /\.css$/,
20-
loader: 'style-loader!css-loader?modules',
20+
use: [
21+
'style-loader',
22+
{
23+
loader: 'css-loader',
24+
options: {
25+
modules: true,
26+
},
27+
},
28+
],
2129
},
2230
],
2331
},

examples/sections/styleguide.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ module.exports = {
8080
},
8181
{
8282
test: /\.css$/,
83-
loader: 'style-loader!css-loader',
83+
use: ['style-loader', 'css-loader'],
8484
},
8585
],
8686
},

examples/themed/styleguide.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = {
2323
},
2424
{
2525
test: /\.css$/,
26-
loader: 'style-loader!css-loader',
26+
use: ['style-loader', 'css-loader'],
2727
},
2828
],
2929
},

examples/webpack/babel.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
module.exports = {
22
presets: [
33
[
4-
'@babel/env',
4+
'@babel/preset-env',
55
{
6-
debug: true,
76
modules: false,
87
useBuiltIns: 'usage',
8+
corejs: 3,
99
},
1010
],
1111
'@babel/react',

0 commit comments

Comments
 (0)