-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Default webpack.common.js generated using file-loader The src attr of image gonna be like '[object Module]' #11209
Comments
?? |
@opt-nc-dev Thanks for reporting this. Indeed we do not use relative urls in our frontend, so maybe we have a bug here. Would you mind doing a PR for this as it seems you already have a solution (which should not affect other parts as it seems). |
@opt-nc-dev, I did a quick check (using dev profile) and not able to reproduce. I tried with an Can you provide more detailed steps to reproduce? |
Adding the below to
Results in:
With the fix:
The fix works as expected, and is an improvement as now image references are hashed. The bundle sizes generated by webpack also don't change, so your fix looks good to me. @vishal423 I'm curious how you didn't end up reproducing the issue. |
Thanks @ruddell I tried against an old project generated with |
It seems the corresponding issue is fixed in the html-loader I see two immediate solutions, first one as suggested by @opt-nc-dev and the second one is to enable interpolation in html-loader and use require like { test: /\.html$/, loader: 'html-loader', options: { minimize: true, caseSensitive: true, removeAttributeQuotes: false, minifyJS: false, minifyCSS: false, interpolate: true, }, exclude: /(src\/main\/webapp\/index.html)/ },
Considering, it's an issue with html-loader, I tend to prefer the second approach and wait for the next |
I've never seen that approach for loading images. I think most developers would expect to be able to use:
instead of
We also don't have any example Aside from that, Is there a downside to setting |
My understanding is that the existing syntax should continue to work after a new release, however, I agree that the @opt-nc-dev, would you be able to create a PR with your suggested changes? |
Yes I can do that |
update webpack.common.js.ejs , add option esModule to false in loader: 'file-loader' see jhipster#11209 Fix jhipster#11209
Overview of the issue
Default webpack.common.js generated using file-loader The src attr of image gonna be like '[object Module]' and image is not loaded and does not appear
Motivation for or Use Case
In our company projects are generated by Jhipster, and to load a picture in html, we use a relative path to load resources in front-end as this example:
<img src="../../content/images/logo-OPT2.png">
We have a common generator-jhipster-custom, but we do not customized the default generated webpack.common.js so, that's why I am reporting the issue.
Suggest a Fix
To fix the issue you have to update webpack.common.js and in the folowing section:
You have to add
esModule:
false option to file-loader, and it works, the images are properly load in the browser.{ test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i, loader: 'file-loader', options: { digest: 'hex', hash: 'sha512', name: 'content/[hash].[ext]', **esModule: false** }
JHipster Version(s)
λ jhipster --version
INFO! Using JHipster version installed globally
6.6.0
** Which version of JHipster are you using, is it a regression?**
Webpack update, not regression.
λ jhipster --version
INFO! Using JHipster version installed globally
6.6.0
JHipster configuration
λ jhipster info
INFO! Using JHipster version installed globally
INFO! Executing jhipster:info
INFO! Options: from-cli: true
Welcome to the JHipster Information Sub-Generator
JHipster Version(s)
JHipster configuration, a
.yo-rc.json
file generated in the root folder.yo-rc.json file
JDL for the Entity configuration(s)
entityName.json
files generated in the.jhipster
directoryJDL entity definitions
Environment and Tools
java version "1.8.0_231"
Java(TM) SE Runtime Environment (build 1.8.0_231-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.231-b11, mixed mode)
git version 2.13.0.windows.1
node: v10.16.2
npm: 6.9.0
yeoman: 2.0.5
yarn: 1.15.2
Docker version 18.06.1-ce, build e68fc7a
docker-compose version 1.22.0, build f46880fe
Browsers and Operating System
OS : windows 10 pro
Browser: Chrome
The text was updated successfully, but these errors were encountered: