pgaultier / yii2-webpack

Yii2 Webpack2 asset management
Other
106 stars 17 forks source link

Stock webpack.config.js triggers error #8

Open beowulfenator opened 5 years ago

beowulfenator commented 5 years ago

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?

pgaultier commented 5 years ago

I'm facing the same problem, I'm working on a fix for that.

pgaultier commented 5 years ago

can you try latest release ? Thank you

beowulfenator commented 5 years ago

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?

pgaultier commented 5 years ago

Can you create a sample project with the error, this way I could check it and fix it