Issue with imports in required scripts

webdiscus / pug-plugin

Renders Pug template to HTML or template function. Resolves source files of scripts, styles, images in Pug . Uses Pug template as entry point.

https://webdiscus.github.io/pug-plugin/hello-world

ISC License

74 stars 8 forks source link

Issue with imports in required scripts #91

Closed ghost closed 6 months ago

ghost commented 10 months ago

I posted this issue in the webpack repo but I was wondering if this has something to do with the PugPlugin, any clue?

Original text from https://github.com/webpack/webpack/issues/17832

When I start webpack in watch mode the first time it compiles everything goes fine but when I try to edit an imported module in a script I use in one of my templates I get a strange error in console and in the browser overlay. When I edit an imported module (external file) webpack shouldn't show any errors and just trigger a reload.

webdiscus commented 10 months ago

Hello @racc-ode,

please close the issue by Webpack, because you use the Pug Plugin. Can you please create a small repo with reproducible issue, then I can help you.

ghost commented 10 months ago

@webdiscus

Here it goes: https://api.raccode.com/gitea/raccode/proximojs, thanks in advance!

webdiscus commented 10 months ago

@racc-ode

yes, I can reproduce the issue if I edit the src/lib/GlobalState.js file. I try to research the problem.

ghost commented 10 months ago

Sure @webdiscus, thanks mate.

It isn't a critical problem, only slows down a bit development.

I appreciate it, good job with the plugin and thanks again!

webdiscus commented 10 months ago

@racc-ode

I'm currently working on the next-gen version which will be based on the very powerful universal my other html-bundler-webpack-plugin. The new pug-plugin 5 will have all features of the html-bundler-webpack-plugin where as the defaults preprocessor will be used the Pug.

New features will be available in the Pug Plugin 5:

importing style files in JavaScript (useful for components)
resolves source asset files (scripts, styles, images) in Pug attributes w/o using require()
inline CSS in HTML
inline JavaScript in HTML
auto generation of <link rel="preload"> tags to preload assets
auto processing multiple Pug templates using the entry path
pass local data to a template
dynamically loading template variables using the data option, change data w/o restarting
supports the integrity attribute in the link and script tags
generates favicons of different sizes for various platforms and injects them into HTML

webdiscus commented 10 months ago

@racc-ode

I have tested this use case with html-bundler-webpack-plugin . After changes in the imported JS file, It works w/o error. Therefore, this issue will be fixed in the next major version v5, because the code base of the next version will be switched on the bundler plugin to improve the pug plugin.

webdiscus commented 6 months ago

@racc-ode

the new pug plugin v5.0.0 is released and based on the html-bundler-webpack-plugin

The issue should be fixed automatically with the release v5.0.0.