wails
wails copied to clipboard
wailsapp
The front-end calls the function of the js file in the assets directory. The dev mode is normal, but the build mode does not work.
Description
A function in a local js file is called. The function works normally under dev, but in build mode, the function is displayed as undefined. Is there anything I need to pay attention to when using js files in the assets directory?
Import js files in index.html
<body>
<div id="root"></div>
<script src="./src/assets/script/config.es5.js" type="module"></script>
<script src="./src/main.tsx" type="module"></script>
</body>
Declare function
declare global {
interface Window {
GetEncryptParam: (params: string) => string;
}
}
Call functions
useEffect(() => {
EventsOn(EventName.Sign, (data: string) => {
if (data.length == 0) return;
let result = window.GetEncryptParam(data);
EventsEmit(EventName.SignResult, result);
});
return () => {
EventsOff(EventName.Sign);
}
}, []);
Everything is normal in dev, but an undefined function error occurs in build.
To Reproduce
None yet
Expected behaviour
it works in the build
Screenshots
Attempted Fixes
No response
System Details
PS F:\GolandProject\react-wails-demo> wails doctor
DEB | Using go webview2loader
Wails Doctor
# Wails
Version | v2.6.0
# System
┌────────────────────────────────────┐
| OS | Windows 10 Pro |
| Version | 2009 (Build: 22000) |
| ID | 21H2 |
| Go Version | go1.20.1 |
| Platform | windows |
| Architecture | amd64 |
└────────────────────────────────────┘
# Dependencies
┌───────────────────────────────────────────────────────┐
| Dependency | Package Name | Status | Version |
| WebView2 | N/A | Installed | 113.0.1774.50 |
| Nodejs | N/A | Installed | 18.16.0 |
| npm | N/A | Installed | 9.6.5 |
| *upx | N/A | Available | |
| *nsis | N/A | Available | |
└─────────────── * - Optional Dependency ───────────────┘
# Diagnosis
Optional package(s) installation details:
- upx : Available at https://upx.github.io/
- nsis : More info at https://wails.io/docs/guides/windows-installer/
SUCCESS Your system is ready for Wails development!
♥ If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony
Additional context
No response
I don't see any import or <script> tag for byted_acrawler.js, this is where I assume GetEncryptParam() is defined right?
Where is the function declared and where do you import it? and what do you have under dist?
I don't see any
importor<script>tag forbyted_acrawler.js, this is where I assumeGetEncryptParam()is defined right? Where is the function declared and where do you import it? and what do you have underdist?
Thank you for your reply. For the convenience of taking screenshots, I deleted the byted_acrawler.jsimport. It was actually imported inindex.html.
In addition, the function GetEncryptParam is exported in this way in config.es5.js. window.GetEncryptParam = _0x5a8f25;
config.es5.js is a js that has been obfuscated and encrypted. I want to know the difference between dev and build in processing js files in the assetsdirectory. The code runs normally in dev, but the function cannot be found in build mode; the dist directory is as follows:
I want to know the difference between dev and build in processing js files in the assets directory
wails dev runs the "frontend:dev:watcher" command configured in wails.json, If you're using default config this should be npm run dev, which is defined in your frontend package.json and the default is vite, while wails build uses the "frontend:build" command which defaults to npm run build which maps to vite build by default.
So :
wails dev=>npm run dev=>vitewails build=>npm run build=>vite build
As you can see, it's all frontend, wails got nothing to do with it, it might be a misconfiguration or misuse for vite, for example if you use a script without the type="module" attribute, in dev the script will get loaded but in build (which uses what's in dist) will not get loaded because vite wont bundle it and will try to find it under dist/src/assets and of course will not be there, so either use type="module" or use the public directory.
Anyways you can debug you frontend by directly using npm run dev and npm run build in your frontend directory and see what you get, you should get your function bundled in your dist index.*.js or another unbundled script and correctly linked in index.html.
Thanks for the clear explaination mmghv :)
I'm running into this now, too..
I've tried various ways but its not really working out :/
I tested it again and found that this problem will occur when using obfuscated creation. It does not affect all js files. If you only use wails build, you can avoid this problem.
For me it doesn't work with a regular wails build either. What version did you try it on @wxl2578 ?
@RobQuistNL v2.6.0, I think the main problem is the js file，the js files I use are copied from other websites
@RobQuistNL Vite works with type="module" scripts, if you have a normal script it will work in dev but not in build because vite won't copy or bundle it so it won't be found in the dist directory, if that's the issue you're having you will need to instruct vite to copy over such files on build, you do this by using the public directory, any files there will be copied over in build to the root directory and will be accessible in dev/build under the root absolute path e.g /my-script.js.