OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

import() uses relative path to load module the first time resulting in 404

  • Thread starter Thread starter Brian
  • Start date Start date
B

Brian

Guest
I have a Vue 3 app built with TypeScript. I am using import() to dynamically load modules based on a parameter, in this case a language code.

I only ever make one call to load the module, but the browser shows 2 requests for each file included in the module I am trying to load. The first request a is relative URL 'chunks/file.js', the second request uses an absolute URL '/app/chunks/file.js'.

The app works because the files get loaded the second time, but how can I prevent loading with the incorrect URL the first time?

More Info:

/src/languages/languagefeatures.ts:

Code:
    private featureTypes: any = {
        es: () => import('./es/LanguageFeaturesEs'),
        ja: () => 
            {
               console.log("import is being invoked: ./ja/LanguageFeaturesJa");
               return import('./ja/LanguageFeaturesJa');        
            }

Looking at the compiled code, this is generated:

Code:
constructor() {
    R(this, "featureTypes", {
        es: ()=>ks(()=>import("./LanguageFeaturesEs.js"), []),
        ja: ()=>(console.log("import is being invoked: ./ja/LanguageFeaturesJa"),
        ks(()=>import("./LanguageFeaturesJa.js"), ["chunks/LanguageFeaturesJa.js", "chunks/GlyphPitch.js"]))
    });
    R(this, "loadedFeatureTypes", {})
}

enter image description here

<p>I have a Vue 3 app built with TypeScript. I am using import() to dynamically load modules based on a parameter, in this case a language code.</p>
<p>I only ever make one call to load the module, but the browser shows 2 requests for each file included in the module I am trying to load. The first request a is relative URL <code>'chunks/file.js'</code>, the second request uses an absolute URL <code>'/app/chunks/file.js'</code>.</p>
<p><strong>The app works because the files get loaded the second time, but how can I prevent loading with the incorrect URL the first time?</strong></p>
<p>More Info:</p>
<p>/src/languages/languagefeatures.ts:</p>
<pre><code> private featureTypes: any = {
es: () => import('./es/LanguageFeaturesEs'),
ja: () =>
{
console.log("import is being invoked: ./ja/LanguageFeaturesJa");
return import('./ja/LanguageFeaturesJa');
}

</code></pre>
<p>Looking at the compiled code, this is generated:</p>
<pre><code>constructor() {
R(this, "featureTypes", {
es: ()=>ks(()=>import("./LanguageFeaturesEs.js"), []),
ja: ()=>(console.log("import is being invoked: ./ja/LanguageFeaturesJa"),
ks(()=>import("./LanguageFeaturesJa.js"), ["chunks/LanguageFeaturesJa.js", "chunks/GlyphPitch.js"]))
});
R(this, "loadedFeatureTypes", {})
}
</code></pre>
<p><a href="https://i.sstatic.net/eAJ4AeAv.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/eAJ4AeAv.png" alt="enter image description here" /></a></p>
 

Latest posts

A
Replies
0
Views
1
Alfredo Augusto Petri
A
Top