dynamically imported asset's published chunks path in imported compiled script

[shashank-brightness]

Hi, i am trying to import some html from template using dynamic import statement and hence webpack generates its chunk file in the output directory.

Let's say i am importing main.html as a promise and then pass this as parameter to some other function.

const loadMainHTML = () => import('./main.html');
import initHTML from '../../initHTML';
initHTML('main-component',loadMainHTML)

and for initHTML.js, this is how this promise is being used as loadComponentHTML which is this same function loadMainHTML which was passed

loadComponentHTML().then(function(componentHTML) {
    const newComponent = new DOMParser().parseFromString(
              componentHTML.default,
              'text/html'
            ).body.firstChild;
})

and everything is working nicely and webpack published this chunk to separate out html from main file as
src_components_main_main_html.js in the output directory. In my case public directory path is output instead of dist, so chunk is going there

But the thing is that when i try to use compiled output of mypackage to consumer side (where compiled script is imported), then it is not finding the chunk url path correctly.

I am using laravel mix plugin in the project and i need to assign publicPath for that one script to output directory inside my package.

How to set public path to the path of node_modules package file? so let's say if i import public-path.js before anything else i would like to set public path to one level up where output directory currently is.

something like __webpack_public_path__ = '../';
so when i import compiled file in consumer end, it points to output dir of package.

[alexander-akait]

Why you don't use publicPath: 'auto'?

[alexander-akait]

I need full path to node_modules where my package is but that should be relative to anywhere whether i am using script in my package or import compiled file at consumer.

For this we have publicPath: 'auto'

'http://localhost:5600/auto./src_components_main_main_html.js'

Sounds like you have a bug somewhere

Please create minimum reproducible test repo using github

[shashank-brightness]

@alexander-akait
I don't have bug anywhere but I need to access chunk from my parent app which i can't do right now due to it requiring the incorrect path.

If I use chunk from the package then i can use it within the package but on my parent app level, asset publishing directory is different than what is for package and I can not somehow access chunks which are generated from bundled file from node_modules/mypackage/output/js/my_chunk_generated_via_dynamic_imports.js.

I was earlier source file as main entry point of my package (src/index.js) in package.json but now i need to use bundled file which is in output/index.js so this creates the issue. I will create reproducible example and let you know.

[alexander-akait]

I will create reproducible example and let you know.

Feelf ree to ping me and I will show how you can try to solve it

[shashank-brightness]

I am not familiar with how to reproduce this with some online editor to give you example of why this is not working but i hope you already got idea about the problem.

[shashank-brightness]

I have created an example here as you can see it does not get path from locally installed test Package and rather displays "whatever" as webpack can not resolve the actual path for node_modules/test-package/output/images/SampleJPGImage_15mbmb.jpg because that package uses its bundled file as main entry point instead of source file in src folder. It tries to use https://359sqg-5600.csb.app/output/js/../images/SampleJPGImage_15mbmb.jpg url as per its own publicPath but that image is not showing because that is not available on consumer.

If you go in the tempPackage directory whose name in eco-system is test-package and run npm start there then it displays image correctly on its own server but this is not something where it is needed.

So inshort can't access any of node_modules/test-package/output directory assets like chunk, fonts etc... and not just image.

Hope it clears now!!