I can't load `.ts` file in another `.ts` file.

[PublicWorld]

Hi Deluze I'm trying to build a second window(set show=false) to deal with the loading state when reading large files, which causes the interface to become unresponsive.

But now I try to load the corresponding ts (remote.ts) file in the html (remote.html) file of the second windows, and then encounter these errors when calling other custom files(cross-values.ts) in this remote.ts file, I don't know how to solve it, and I haven't found an effective way to check the information.

If I import the ts script this way, I get this error:

Option 1:

<script type="application/javascript" src="./../main/remote.ts"></script>

Option 2:

<script type="module">require("./../main/remote.ts")</script>

Option 3:

<script type="module" src="./../main/remote.ts"></script>

---

remote.ts

cross-values.ts

file list.

remote.html

I have not been able to find the answer to this question in Google, so I would like to ask if you have encountered any similar problems.

[Deluze]

The problem is that you're trying to import a module from the renderer that's defined in the main/electron part of your application. I recommend to put all the code referenced by the renderer in the renderer directory as these are bundled together, rule of thumb is that your front-end code (renderer process) shouldn't know about back-end code (main process) and vice-versa. Then, option 3 should work.

I've put some explanation as to why option 1 & 2 won't work, has nothing to do with the template and has everything to do with javascript. Let me know if you were able to fix it!

---

It's clear that option 1 won't ever work; your remote.ts is a module, so it needs to be specified as one.

Same is happening in option 2, sort of; you defined the script to be a module, but when you use require it assumes the target (remote.ts) is not a module. So the proper usage would be

<script type="module">
import ... from './../main/remote.ts'
</script>

I can't see what you're exporting in remote.ts, so replace the ... with whatever fits your code.

Although, fixing option 2 probably won't work out of the box.

[PublicWorld]

Hi Deluze, thanks for your response! I tried as you suggested, and put both remote.html and remote.ts in the renderer directory, and still got this error. I'm not sure what else could be the cause.

[Deluze]

Can you show me your build directory? Seems like your import is incorrect, as you have no default export you should import ZipCodeValidator with import { ZipCodeValidator } from './remote.ts'

Double check if all paths are as expected in build, and is this file being transpiled correctly? Maybe it's still trying to load the ts file from the HTML.

If all looks good, a reproduction repo would be appreciated, hard to tell what's the reason on why you can't import the script.

[PublicWorld]

@Deluze Hi Deluze, I just deleted the build folder, which is the newly compiled build directory, and it doesn't look like remote.js or remote.html.

When I moved remote.ts into the main folder, remote.js was generated, but now in the renderer directory, it is not generated. And even if remote.js is generated under the main folder, this error is still displayed.

[Deluze]

That's because electron-builder copies every file that's in the main directory and tell the ts compiler to transpile all js files. The renderer works a little bit different, as everything is done through Vite which is running the Vue plugin; it's an SPA and the entry point is only a single html file and ignores the others.

On the dev server, the remote.ts is not being transpiled by Vite and that's the reason for error (Vite can't serve you the file). You should be able to check the network log to see what Vite responded with.

I assumed you were transpiling the files already, you might want to look into creating a simple Vite plugin that will also transpile other html/ts files besides Vue, I assume such plugins already exist.

An easier solution might be to utilize Vue router and have your 2nd window load the same Vue app with a specific route.

[PublicWorld]

Thank you so much! I'm not a front-end engineer, so I lack understanding of many basic knowledge. Thank you again, based on this great information you told me, I tried to find this link, I will try to follow this configuration after dinner.

https://github.com/vitejs/vite/issues/257 https://stackoverflow.com/questions/68973043/how-to-create-multi-pages-with-vite-following-this-directory-structure