Hi, I build my front for many days with Svelte and now, I was trying to implement this Svelte version in ICP. So, I downloaded the SVELTE based samples project in Sample Code | Internet Computer
Stderr:
(node:24818) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to “.mjs”, set “type”: “module” in your package.json file or pass the “–bundleConfigAsCjs” flag.
Original error: Cannot use import statement outside a module
/Users/passio/Downloads/examples-master/svelte-starter/src/frontend/rollup.config.js:1
import svelte from “rollup-plugin-svelte”;
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1088:15)
at Module._compile (node:internal/modules/cjs/loader:1123:27)
at Module._extensions…js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
According to the warning, I tried to solve the problem, but impossible. I think I will never be able to solve it myself an would appreciate some help. Maybe the sample are outdated, i don’t know, but they are very usefull and deserve to be updated.
From the error I would bet it’s a NodeJS version issue or dependencies issue. What version of NodeJS are you using? Did you install exactly the dependencies as pinned (npm ci not npm i)?
I tried again with my normal projet and I dont get these errors. I am completely unable to solve such technical problems…
Should I start my project again without svelte ?
I learned and used svelte because I saw it recommended in many examples and tutorials… Does the team plan to update these example then svelve can become a support of developement on ICP ?
I am suprised to hear this because the sveltekit-starter is recent, have been tested by few developers of the community and I just tested it again with success.
Can you please provide the exact command and steps you have performed?
I did following:
git clone https://github.com/dfinity/examples
cd examples/svelte/sveltekit-starter
npm ci
dfx start --background
dfx deploy
Note: if you don’t want to use sveltekit but a rollup based project as the svelte-starter or svelte-motoko-starter, no problem, just let me know the exact command sequences you ran so that I can try to replicate
And it works now… I always used the old url version and never had issue. I I could never have found without your help. Infinite thanks.
I copy here the console error for referencing the problem : (It’s different from the first time, i restarded the computer because I didn’t for 10 days where I learned dfx, nodejs, svelte, npm, and tried many command during these days…
failed to load resource the server responded with a status of 404 (bad request)
Glad to hear it worked out. So the SvelteKit version is enough for you - you don’t need the other startes right?
Regarding the url canister-id.localhost:8000. It’s needed when you use an application that loads the script with ES modules - i.e. a modern JavaScrip approach .
However it is worth to note that such an url does not work in Safari and with curl.
But it can help also avoid some caveat while developing, so you can probably see it as a glass half empty or half full.
Thank you for the explanation. I’m a bit of a beginner and these things are really hard for me. Every time I understand one thing, there is a door to 3 other things that I don’t understand when the first one had already exhausted all my mental resources.
I changed a little the structure of my main file to integrate them easily in the example. Disabled all the component, activate them 1 by 1 solving the errors… After 3 hours to do all this, nearly all works. I only have a problem with a the module “svelte-quill”. I spend a lot of time only for this error but I can’t solve it. It works in my Svelte-project outside of IC-project. However, I have these error in the IC version, I hope you could help me :
In my Post_message.svelte component, I have this error :
I tried many solution that I found on internet but It doesn’t work. As you’re experienced in the domain, maybe it’s an easy issue for you. I think the first screen give a good explanation of what I should do, but I’m not sure about where I should put this .d.ts file, and not sure about what I should write inside… I continue my tries.
You are not the only one, that sums up my day too.
As you are using TypeScript in your project, to use library it needs some type definition. These are use for compilation purpose but also by your editor to give you some hints, like autocomplete. Some libraries, or most libraries e.g. agent-js comes with built-in types. However it seems that svelte-quill has not such types per default - i.e. is not compatible out of the box with typescript. Your editor is suggesting to install external types npm i -D @types/svelte-quill but I am not sure these types exists. So if you want to use that lib, either you should have a project where you don’t use typescript or find types for the library or write your own types. Does that make sense?
Here it’s a lack of typing issue. As you are using TypeScript, you enforce type declaration in your project, therefore the editor warns you that e has not type or that no type can automatically be interfered and therefore can be anything.
I recommend you to dig a bit into TypeScript if you wish to use it in your project. Alternatively, if you rather like to not to and not use types, you can setup your project to use JavaScript only.
As I said in my above post, if you rather like to not use SvelteKit but one of the other samples, svelte-starter or svelte-starter-motoko, let me know.
I had previously use the npm install rollup from the svelte-motoko-starter and I was trying to use npm run dev from this root path… That’s what was causing the error.
I just see it was mentioned after the local internet Identity installation part in the readme… I probably confused with path of execution of this command between different projets and it was the first time I used npm…
in the internet-identity folder and get the issue :
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at BulkUpdateDecorator.hashFactory (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/util/createHash.js:145:18)
at BulkUpdateDecorator.update (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/util/createHash.js:46:50)
at RawSource.updateHash (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack-sources/lib/RawSource.js:64:8)
at NormalModule._initBuildHash (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:868:17)
at handleParseResult (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:934:10)
at /Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:1026:4
at processResult (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:743:11)
at /Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:807:5
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at BulkUpdateDecorator.hashFactory (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/util/createHash.js:145:18)
at BulkUpdateDecorator.update (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/util/createHash.js:46:50)
at RawSource.updateHash (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack-sources/lib/RawSource.js:64:8)
at NormalModule._initBuildHash (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:868:17)
at handleParseResult (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:934:10)
at /Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:1026:4
at processResult (/Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:743:11)
at /Users/passio/examples/svelte/svelte-motoko-starter/internet-identity/node_modules/webpack/lib/NormalModule.js:807:5 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
Failed to build call canisters.
Failed while trying to build all canisters.
The build step failed for canister 'rkp4c-7iaaa-aaaaa-aaaca-cai' (internet_identity) with an embedded error: Failed to build custom canister internet_identity.: Failed to run scripts/build.: The custom tool failed.
I fixed it by using node js 16 instead of node JS 18.12.1
Then use : nvm install 16 nvm use 16
Before this, if you are on mac, you have to install brew and after cmake in order to be able to follow the readme.
About the Internet Identity, I was also unable to create an anchor… After 1h30 more, I solved it by using npm ci inside the internet Identity folder… And before that I did many things… Like running dfx with : dfx start --host 127.0.0.1:8000
I don’t know exactly what solved it better.
This day was the worst programming day of my life… If it was not for ICP, I would have abandoned. But well, thanks to all this, everything seems a little less obscure to me.
.
But well, thanks to all this, everything seems a little less obscure to me.
), I recently wrote a blog post about it