yii2-webpack
yii2-webpack copied to clipboard
Stock webpack.config.js triggers error
After upgrading node, I'm having the following issue. The webpack.config.js
file generated by the console command webpack/generate-webpack
triggers an error. The error has to do with assets-webpack-plugin
.
In my case assets plugin generates something like this:
{ manifest: { js: 'manifest.js' },
charts: { js: 'charts.js', css: '../css/charts.css' },
main: { js: 'main.js', css: '../css/main.css' },
admin: { js: 'admin.js', css: '../css/admin.css' },
'':
{ eot:
[ '../fonts/example/example.eot',
'../_/node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot' ],
ttf:
[ '../fonts/example/example.ttf',
'../_/node_modules/bootstrap/fonts/glyphicons-halflings-regular.ttf' ],
woff:
[ '../fonts/example/example.woff',
'../_/node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff' ],
svg:
[ '../_/node_modules/bootstrap/fonts/glyphicons-halflings-regular.svg',
'../fonts/example/example.svg' ],
woff2: '../_/node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2',
gz:
[ 'admin.js.gz',
'manifest.js.gz',
'../css/charts.css.gz',
'../css/admin.css.gz',
'../css/main.css.gz',
'charts.js.gz',
'main.js.gz' ] } }
Whether using the empty string as the array key is a valid practice is up to debate (it is briefly mentioned in an issue for the plugin itself), this kind of data triggers an error in the following code:
processOutput: function (assets) {
var i;
var j;
for (i in assets) {
if(assets.hasOwnProperty(i)) {
for (j in assets[i]) {
if (assets[i].hasOwnProperty(j)) {
assets[i][j] = path.join(config.assets.scripts, assets[i][j]).replace('\\', '/');
}
}
}
}
return JSON.stringify(assets, null, this.prettyPrint ? 2 : null);
}
When assets[i][j]
is an array, not a string, path.join
fails with an error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
.
As a temporary solution, I've added a check (if (!Array.isArray(assets[i][j])) { ...
) which does solve the problem for now. What's the proper way of solving this?
I'm facing the same problem, I'm working on a fix for that.
can you try latest release ? Thank you
Still getting an error.
path.js:39
throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'path', 'string');
^
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
at assertPath (path.js:39:11)
at Object.join (path.js:1218:7)
at Object.processOutput (/home/ubuntu/projects/example/webpack/webpack.config.js:76:53)
at /home/ubuntu/projects/example/webpack/node_modules/assets-webpack-plugin/dist/lib/output/createOutputWriter.js:67:30
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3)
I don't think this problem is caused by how project paths are configured. It's a more general problem.
What is the intention of the processOutput
function? Is it supposed to take the object that contains a bunch of paths and prepend them with whatever is in config.assets.scripts
?
So that if config.assets.scripts
is /foo/bar/baz
, then
{"charts": {"js": "charts.js", "css": "../css/charts.css"}}`
becomes
{"charts": {"js": "/foo/bar/baz/charts.js", "css": "/foo/bar/css/charts.css"}}
?
If that is your intention, then the function does not work if the tree is deeper than two levels (as it is in my case). Also, replace('\\', '/')
looks like a windows-specific hack. Should I rewrite that function and submit a PR?
Can you create a sample project with the error, this way I could check it and fix it