Skip to content

Commit 8137255

Browse files
erezrokahGatsbyJS Bot
erezrokah
authored and
GatsbyJS Bot
committed
fix(gatsby-plugin-netlify-cms): Mark relevant dependencies as externals (#19575)
* fix: load netlify dependencies as external ones * fix: force code splitting for netlify-identity-widget * fix: ignore netlify-identity-widget from build output when disabled * fix: use concat instead of flat to support node 10 * refactor: take react/react-dom dependencies from node_modules * fix: don't add optimization code during dev mode * refactor: use DefinePlugin instead of window.CMS_MANUAL_INIT * fix: register styles in development mode
1 parent 84b6b6b commit 8137255

File tree

5 files changed

+163
-27
lines changed

5 files changed

+163
-27
lines changed

‎packages/gatsby-plugin-netlify-cms/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
},
99
"dependencies": {
1010
"@pieh/friendly-errors-webpack-plugin": "1.7.0-chalk-2",
11+
"copy-webpack-plugin": "^5.0.5",
1112
"html-webpack-exclude-assets-plugin": "^0.0.7",
1213
"html-webpack-plugin": "^3.2.0",
14+
"html-webpack-tags-plugin": "^2.0.17",
1315
"lodash": "^4.17.15",
1416
"mini-css-extract-plugin": "^0.8.0",
1517
"netlify-identity-widget": "^1.5.5",

‎packages/gatsby-plugin-netlify-cms/src/cms-manual-init.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/gatsby-plugin-netlify-cms/src/cms.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,29 @@ import CMS from "netlify-cms-app"
33
/**
44
* Load Netlify CMS automatically if `window.CMS_MANUAL_INIT` is set.
55
*/
6-
if (!window.CMS_MANUAL_INIT) {
6+
// eslint-disable-next-line no-undef
7+
if (!CMS_MANUAL_INIT) {
78
CMS.init()
89
} else {
910
console.log(
10-
`\`window.CMS_MANUAL_INIT\` flag set, skipping automatic initialization.'`
11+
`\`CMS_MANUAL_INIT\` flag set, skipping automatic initialization.'`
1112
)
1213
}
1314

14-
/**
15-
* The stylesheet output from the modules at `modulePath` will be at `cms.css`.
16-
*/
17-
CMS.registerPreviewStyle(`cms.css`)
15+
// eslint-disable-next-line no-undef
16+
if (PRODUCTION) {
17+
/**
18+
* The stylesheet output from the modules at `modulePath` will be at `cms.css`.
19+
*/
20+
CMS.registerPreviewStyle(`cms.css`)
21+
} else {
22+
/**
23+
* In development styles are injected dynamically via the style-loader plugin
24+
*/
25+
window.addEventListener(`DOMContentLoaded`, event => {
26+
const list = document.querySelectorAll(`link[rel='stylesheet']`)
27+
list.forEach(({ href }) => {
28+
CMS.registerPreviewStyle(href)
29+
})
30+
})
31+
}

‎packages/gatsby-plugin-netlify-cms/src/gatsby-node.js

Lines changed: 102 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import HtmlWebpackExcludeAssetsPlugin from "html-webpack-exclude-assets-plugin"
66
import MiniCssExtractPlugin from "mini-css-extract-plugin"
77
// TODO: swap back when https://github.com/geowarin/friendly-errors-webpack-plugin/pull/86 lands
88
import FriendlyErrorsPlugin from "@pieh/friendly-errors-webpack-plugin"
9+
import CopyPlugin from "copy-webpack-plugin"
10+
import HtmlWebpackTagsPlugin from "html-webpack-tags-plugin"
911

1012
// Deep mapping function for plain objects and arrays. Allows any value,
1113
// including an object or array, to be transformed.
@@ -47,19 +49,6 @@ function replaceRule(value) {
4749
return null
4850
}
4951

50-
// Manually swap `style-loader` for `MiniCssExtractPlugin.loader`.
51-
// `style-loader` is only used in development, and doesn't allow us to pass
52-
// the `styles` entry css path to Netlify CMS.
53-
if (
54-
typeof value.loader === `string` &&
55-
value.loader.includes(`style-loader`)
56-
) {
57-
return {
58-
...value,
59-
loader: MiniCssExtractPlugin.loader,
60-
}
61-
}
62-
6352
return value
6453
}
6554

@@ -90,7 +79,7 @@ exports.onCreateDevServer = ({ app, store }, { publicPath = `admin` }) => {
9079
}
9180

9281
exports.onCreateWebpackConfig = (
93-
{ store, stage, getConfig, plugins, pathPrefix, loaders, rules },
82+
{ store, stage, getConfig, plugins, pathPrefix, loaders, rules, actions },
9483
{
9584
modulePath,
9685
customizeWebpackConfig,
@@ -108,13 +97,45 @@ exports.onCreateWebpackConfig = (
10897
const gatsbyConfig = getConfig()
10998
const { program } = store.getState()
11099
const publicPathClean = trim(publicPath, `/`)
100+
101+
const externals = [
102+
{
103+
name: `react`,
104+
global: `React`,
105+
assetDir: `umd`,
106+
assetName: `react.production.min.js`,
107+
},
108+
{
109+
name: `react-dom`,
110+
global: `ReactDOM`,
111+
assetDir: `umd`,
112+
assetName: `react-dom.production.min.js`,
113+
},
114+
{
115+
name: `netlify-cms-app`,
116+
global: `NetlifyCmsApp`,
117+
assetDir: `dist`,
118+
assetName: `netlify-cms-app.js`,
119+
sourceMap: `netlify-cms-app.js.map`,
120+
},
121+
]
122+
123+
if (enableIdentityWidget) {
124+
externals.unshift({
125+
name: `netlify-identity-widget`,
126+
global: `netlifyIdentity`,
127+
assetDir: `build`,
128+
assetName: `netlify-identity-widget.js`,
129+
sourceMap: `netlify-identity-widget.js.map`,
130+
})
131+
}
132+
111133
const config = {
112134
...gatsbyConfig,
113135
entry: {
114136
cms: [
115-
manualInit && `${__dirname}/cms-manual-init.js`,
116-
`${__dirname}/cms.js`,
117-
enableIdentityWidget && `${__dirname}/cms-identity.js`,
137+
path.join(__dirname, `cms.js`),
138+
enableIdentityWidget && path.join(__dirname, `cms-identity.js`),
118139
]
119140
.concat(modulePath)
120141
.filter(p => p),
@@ -153,9 +174,10 @@ exports.onCreateWebpackConfig = (
153174

154175
// Use a simple filename with no hash so we can access from source by
155176
// path.
156-
new MiniCssExtractPlugin({
157-
filename: `[name].css`,
158-
}),
177+
stage !== `develop` &&
178+
new MiniCssExtractPlugin({
179+
filename: `[name].css`,
180+
}),
159181

160182
// Auto generate CMS index.html page.
161183
new HtmlWebpackPlugin({
@@ -178,6 +200,34 @@ exports.onCreateWebpackConfig = (
178200
__PATH__PREFIX__: pathPrefix,
179201
CMS_PUBLIC_PATH: JSON.stringify(publicPath),
180202
}),
203+
204+
new CopyPlugin(
205+
[].concat.apply(
206+
[],
207+
externals.map(({ name, assetName, sourceMap, assetDir }) =>
208+
[
209+
{
210+
from: path.join(`node_modules`, name, assetDir, assetName),
211+
to: assetName,
212+
},
213+
sourceMap && {
214+
from: path.join(`node_modules`, name, assetDir, sourceMap),
215+
to: sourceMap,
216+
},
217+
].filter(item => item)
218+
)
219+
)
220+
),
221+
222+
new HtmlWebpackTagsPlugin({
223+
tags: externals.map(({ assetName }) => assetName),
224+
append: false,
225+
}),
226+
227+
new webpack.DefinePlugin({
228+
CMS_MANUAL_INIT: JSON.stringify(manualInit),
229+
PRODUCTION: JSON.stringify(stage !== `develop`),
230+
}),
181231
].filter(p => p),
182232

183233
// Remove common chunks style optimizations from Gatsby's default
@@ -189,6 +239,11 @@ exports.onCreateWebpackConfig = (
189239
minimizer: stage === `develop` ? [] : gatsbyConfig.optimization.minimizer,
190240
},
191241
devtool: stage === `develop` ? `cheap-module-source-map` : `source-map`,
242+
externals: externals.map(({ name, global }) => {
243+
return {
244+
[name]: global,
245+
}
246+
}),
192247
}
193248

194249
if (customizeWebpackConfig) {
@@ -203,6 +258,33 @@ exports.onCreateWebpackConfig = (
203258
})
204259
}
205260

261+
actions.setWebpackConfig({
262+
// force code splitting for netlify-identity-widget
263+
optimization:
264+
stage === `develop`
265+
? {}
266+
: {
267+
splitChunks: {
268+
cacheGroups: {
269+
"netlify-identity-widget": {
270+
test: /[\\/]node_modules[\\/](netlify-identity-widget)[\\/]/,
271+
name: `netlify-identity-widget`,
272+
chunks: `all`,
273+
enforce: true,
274+
},
275+
},
276+
},
277+
},
278+
// ignore netlify-identity-widget when not enabled
279+
plugins: enableIdentityWidget
280+
? []
281+
: [
282+
new webpack.IgnorePlugin({
283+
resourceRegExp: /^netlify-identity-widget$/,
284+
}),
285+
],
286+
})
287+
206288
return new Promise((resolve, reject) => {
207289
if (stage === `develop`) {
208290
webpack(config).watch({}, () => {})

‎yarn.lock

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7082,6 +7082,24 @@ copy-webpack-plugin@^5.0.0:
70827082
serialize-javascript "^1.7.0"
70837083
webpack-log "^2.0.0"
70847084

7085+
copy-webpack-plugin@^5.0.5:
7086+
version "5.0.5"
7087+
resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.5.tgz#731df6a837a2ef0f8f8e2345bdfe9b7c62a2da68"
7088+
integrity sha512-7N68eIoQTyudAuxkfPT7HzGoQ+TsmArN/I3HFwG+lVE3FNzqvZKIiaxtYh4o3BIznioxUvx9j26+Rtsc9htQUQ==
7089+
dependencies:
7090+
cacache "^12.0.3"
7091+
find-cache-dir "^2.1.0"
7092+
glob-parent "^3.1.0"
7093+
globby "^7.1.1"
7094+
is-glob "^4.0.1"
7095+
loader-utils "^1.2.3"
7096+
minimatch "^3.0.4"
7097+
normalize-path "^3.0.0"
7098+
p-limit "^2.2.1"
7099+
schema-utils "^1.0.0"
7100+
serialize-javascript "^2.1.0"
7101+
webpack-log "^2.0.0"
7102+
70857103
copyfiles@^2.1.1:
70867104
version "2.1.1"
70877105
resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.1.1.tgz#d430e122d7880f92c45d372208b0af03b0c39db6"
@@ -11471,6 +11489,15 @@ html-webpack-plugin@^3.2.0:
1147111489
toposort "^1.0.0"
1147211490
util.promisify "1.0.0"
1147311491

11492+
html-webpack-tags-plugin@^2.0.17:
11493+
version "2.0.17"
11494+
resolved "https://registry.yarnpkg.com/html-webpack-tags-plugin/-/html-webpack-tags-plugin-2.0.17.tgz#1143cb41fa895eca6bc45207d3aadd914cee8b55"
11495+
integrity sha512-TKT8hnumMni6ztKfWZpP+UBeA7+aUn+qQQ4c9wT/p1IGTO/QWoIc19E+ZrxCcToDMjBO1NMYWkUbW4c4NtlGvg==
11496+
dependencies:
11497+
glob "^7.1.4"
11498+
minimatch "^3.0.4"
11499+
slash "^3.0.0"
11500+
1147411501
htmlparser2@^3.10.0, htmlparser2@^3.9.1:
1147511502
version "3.10.1"
1147611503
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -16353,6 +16380,13 @@ p-limit@^2.0.0, p-limit@^2.1.0, p-limit@^2.2.0:
1635316380
dependencies:
1635416381
p-try "^2.0.0"
1635516382

16383+
p-limit@^2.2.1:
16384+
version "2.2.1"
16385+
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
16386+
integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
16387+
dependencies:
16388+
p-try "^2.0.0"
16389+
1635616390
p-locate@^2.0.0:
1635716391
version "2.0.0"
1635816392
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -19548,6 +19582,11 @@ serialize-javascript@^1.7.0:
1954819582
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
1954919583
integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
1955019584

19585+
serialize-javascript@^2.1.0:
19586+
version "2.1.0"
19587+
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.0.tgz#9310276819efd0eb128258bb341957f6eb2fc570"
19588+
integrity sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ==
19589+
1955119590
serve-index@^1.9.1:
1955219591
version "1.9.1"
1955319592
resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"

0 commit comments

Comments
 (0)