I'm creating a Tauri app that uses Fable to compile F# to JS. And I want to use Svelte with it, too. So far, I have compiled my F# file to a .js file. I've created a .svelte file with the following contents (named App.svelte)
<script>
import './App.fs.js'
</script>
<main>
<p>{msg}</p>
</main>
<style></style>
My index.html:
<body>
<script src="main.mjs"></script>
</body>
And my main.mjs:
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
I run the program with npm run build. This compiles my F# files and they become ready.
I run npm run tauri build -- --debug to compile my whole Tauri app and open it.
I do this, and nothing shows on screen. But when I look at the console, it says main.mjs
cannot import.
Supposedly, I need to compile the Svelte files. But Svelte uses rollup and I think I need to use webpack to be compatible with Fable or Tauri.
All these files are in project/src.
I need to compile and use a Svelte file in an index.html
💡 You should give us a reproducible example to show us how you configured your project and what you've tried to get it working.
👉 I give you here in this answer a working example to study, more than answering your question as it miss a lot of details about your setup.
Basically, to npm run tauri build your app, you will want to configure your project in order to build the Fable code, then Svelte code and then bundle everything with Tauri.
Also, you are not required to use webpack. Rollup is good.
hint: if you really need webpack for some reason, just run it run it before rollup and you will find webpack svelte-loader on github
I published a working template project to answer your question that you could use/study to check what you are missing. It was just created by following this flow:
yarn create svelte-appyarn create tauri-appdotnet new --install Fable.Template
dotnet new fable
Then after that, it's just a mater of combining / merging everything, and adding Tauri to the Svelte app. Please check the project to see how I configured it
If you have more precise question, please make another question.