webdiscus / pug-loader

Pug loader for Webpack renders pug to HTML or template function
https://webdiscus.github.io/pug-loader/pug-filters
ISC License
72 stars 5 forks source link

Failed to build when webpack alias for asset is an array of paths instead of a single path #10

Closed Rush closed 2 years ago

Rush commented 2 years ago

See my full repro here: https://github.com/Rush/webdiscus-repro and run npm run reproduce.

Or to reproduce by hand, setup the resolve alias as a list of paths, instead of a single path

resolve: {
  alias: {
    assets: [ assetPath1, assetPath2 ]

and then require the asset from pug

Module not found: Error: Can't resolve '/code/webdiscus-pug-node-example/assets,/code/webdiscus-pug-node-example/assets2/fonts/ibm-plex-sans-v7-latin-regular.woff2' in '/code/webdiscus-pug-node-example/server/views'

Requiring same asset from JS/TS works fine via:

require('assets/fonts/ibm-plex-sans-v7-latin-regular.woff2');
Rush commented 2 years ago

Thanks for adding it to the "in development" milestone. :) I hope I will not have to wait for long as I'm slightly blocked, but not too worry too much :)

webdiscus commented 2 years ago

hallo @Rush

thank you for very important issue. I have enhanced the resolving of alias for array.

You can see possible usage cases in the fixture and resolve.alias for compile method.

⚠️ Limitation for compile method and alias as an array

Usage of a variable in request don't work if alias is an array:

resolve: {
  alias: {
     Images: ['/path_1/', '/path_2/'],     
  }
}
- var basename = 'logo';
img(src=require('Images/' + basename + '-c1.jpeg')) <-- does not work

img(src=require('Images/logo.jpeg')) <-- works

This is limitation of webpack compiler self, webpack don't recognize an asset request contained a variable. But the webpack resolver resolve this assets correct. This limitation does not affect the render and html methods.

New version is 1.7.1

Rush commented 2 years ago

Awesome! THe workaround for not using variables in the require expression is simply to prepare utility data structures. Such as:

- const statusIcons = { draft: require('images/status/draft.png'), reject: require('images/status/reject.png'), review: require('images/status/review.png'), approve: require('images/status/review.png') };
webdiscus commented 2 years ago

Awesome! The workaround for not using variables in the require expression is simply to prepare utility data structures. Such as:

- const statusIcons = { draft: require('images/status/draft.png'), reject: require('images/status/reject.png'), review: require('images/status/review.png'), approve: require('images/status/review.png') };

Thanks, it works too :-)

Rush commented 2 years ago

Fixed, works great now. Thank you!