Must use import to load ES Module
#1928
Comments
|
@lucasfernog Forgot to mention, this does work, as mentioned on this reddit thread: I couldn't find anything in the first conversation that fixes it, and the second one was mentioned by Rich Harris in sveltejs/kit#779, but it requires code like this: <script lang="ts">
import { onMount } from 'svelte'
onMount(async () => {
const { invoke } = await import('@tauri-apps/api/tauri')
invoke('whatever')
})
</script>As Rich Harris said in sveltejs/kit#779 (comment):
|
|
We have an {
"name": "@tauri-apps/api",
"version": "1.0.0-beta.4",
"description": "Tauri API definitions",
"type": "module",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/tauri"
},
"exports": {
"./app": {
"import": "./app.js",
"require": "./app.cjs"
},
"./bundle": {
"import": "./bundle.js",
"require": "./bundle.cjs"
},
"./cli": {
"import": "./cli.js",
"require": "./cli.cjs"
},
"./clipboard": {
"import": "./clipboard.js",
"require": "./clipboard.cjs"
},
"./dialog": {
"import": "./dialog.js",
"require": "./dialog.cjs"
},
"./event": {
"import": "./event.js",
"require": "./event.cjs"
},
"./fs": {
"import": "./fs.js",
"require": "./fs.cjs"
},
"./globalShortcut": {
"import": "./globalShortcut.js",
"require": "./globalShortcut.cjs"
},
"./helpers": {
"import": "./helpers.js",
"require": "./helpers.cjs"
},
"./http": {
"import": "./http.js",
"require": "./http.cjs"
},
".": {
"import": "./index.js",
"require": "./index.cjs"
},
"./notification": {
"import": "./notification.js",
"require": "./notification.cjs"
},
"./path": {
"import": "./path.js",
"require": "./path.cjs"
},
"./process": {
"import": "./process.js",
"require": "./process.cjs"
},
"./shell": {
"import": "./shell.js",
"require": "./shell.cjs"
},
"./tauri": {
"import": "./tauri.js",
"require": "./tauri.cjs"
},
"./updater": {
"import": "./updater.js",
"require": "./updater.cjs"
},
"./window": {
"import": "./window.js",
"require": "./window.cjs"
},
"./package.json": "./package.json"
},
"scripts": {
"build": "rimraf ./dist && rollup -c --silent && node ./scripts/after-build.cjs",
"npm-pack": "yarn build && cd ./dist && npm pack",
"npm-publish": "yarn build && cd ./dist && yarn publish --access public --loglevel silly",
"lint": "eslint --ext ts \"./src/**/*.ts\"",
"lint-fix": "eslint --fix --ext ts \"./src/**/*.ts\"",
"lint:lockfile": "lockfile-lint --path yarn.lock --type yarn --validate-https --allowed-hosts npm yarn",
"format": "prettier --write --end-of-line=auto \"./**/*.{js,jsx,ts,tsx,html,css,json}\" --ignore-path .gitignore",
"format:check": "prettier --check --end-of-line=auto \"./**/*.{js,jsx,ts,tsx,html,css,json}\" --ignore-path .gitignore"
},
"repository": {
"type": "git",
"url": "git+https://github.com/tauri-apps/tauri.git"
},
"contributors": [
"Tauri Programme within The Commons Conservancy"
],
"license": "Apache-2.0 OR MIT",
"bugs": {
"url": "https://github.com/tauri-apps/tauri/issues"
},
"homepage": "https://github.com/tauri-apps/tauri#readme",
"publishConfig": {
"access": "public"
},
"engines": {
"node": ">= 12.13.0",
"npm": ">= 6.6.0",
"yarn": ">= 1.19.1"
},
"devDependencies": {
"@babel/core": "7.14.6",
"@babel/preset-env": "7.14.7",
"@babel/preset-typescript": "7.14.5",
"@rollup/plugin-babel": "5.3.0",
"@rollup/plugin-commonjs": "19.0.0",
"@rollup/plugin-node-resolve": "13.0.0",
"@rollup/plugin-sucrase": "3.1.0",
"@rollup/plugin-typescript": "8.2.1",
"@typescript-eslint/eslint-plugin": "4.28.0",
"@typescript-eslint/parser": "4.28.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-config-standard-with-typescript": "20.0.0",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "5.1.0",
"eslint-plugin-security": "1.4.0",
"fs-extra": "10.0.0",
"lockfile-lint": "4.6.2",
"prettier": "2.3.1",
"regenerator-runtime": "0.13.7",
"rimraf": "3.0.2",
"rollup": "2.52.2",
"rollup-plugin-terser": "7.0.2",
"tslib": "2.3.0",
"typedoc": "0.21.0",
"typedoc-plugin-markdown": "3.10.1",
"typescript": "4.3.4"
}
} |
|
Ah, looks like this issue is sveltejs/kit#1549 / vitejs/vite#2393. Hopefully not tauri related afterall then |
|
Disabling SSR fixed the issue for me when rendering, but doesn't make the error message go away. I ended up proxying the invoke method so that I didn't have to dynamically import in every place I would invoke: // eslint-disable-next-line @typescript-eslint/no-explicit-any
async function invoke(cmd: string, args?: InvokeArgs): Promise<any> {
const { invoke: tauri_invoke } = await import('@tauri-apps/api/tauri');
return tauri_invoke(cmd, args);
}And my code can look like this: async function create(title: string): Promise<Todo> {
const todo: string = await invoke('create_todo', { title });
return JSON.parse(todo);
} |
|
I think the issue might actually be this one, not what I mentioned earlier: What I ended up doing is this (the error message is still there, but seems to work): import { event } from '../../node_modules/@tauri-apps/api/index.js' |
Importing
@tauri-apps/api/tauriin SvelteKit with SSR disabled results in the following error:Related SvelteKit issue: sveltejs/kit#779
To Reproduce
Use the reproduction repo: https://github.com/probablykasper/tauri-sveltekit-esmodule-bug
Platform and Versions
OS: macOS 10.15.7 x64
Node: 14.16.0
npm: 6.14.11
rustc: 1.52.1
The text was updated successfully, but these errors were encountered: