Error when deploying Svelte examples from DFINITY samples bank

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 Internet Computer Content Validation Bootstrap

svelte-app@1.0.0 build
rollup -c

(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

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 (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.

1 Like

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)?

Being said, the examples might be outdated, did not had a look to them. I recently provided a SvelteKit PR example if it could be useful feat: SvelteKit template by peterpeterparker · Pull Request #385 · dfinity/examples · GitHub.

1 Like

Hi peterparker and thank you for your answer. I tried again to follow all theses steps on :

I have to say, firstly, i get an error :
Caused by:
0: Failed to install binary cache for version ‘0.12.0’.
1: Unknown version ‘0.12.0’.

Then, i replaced 0.12.0 by 0.12.1 in dfx.json…

My node js in v18.12.0, it seems enough.

svelte-motoko-starter doesn’t work, no matter what I try, same error with rollup.
Same for svelte-starter, rollup error.

Then I tryed svelte/sveltekit-starter… used npm ci inside the folder.

however i get a blank page with this in the log :

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
cd examples/svelte/sveltekit-starter
npm ci
dfx start --background
dfx deploy

then opened my browser url http://ryjl3-tyaaa-aaaaa-aaaba-cai.localhost:8000/ and all good

1 Like

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

1 Like

Thank you, you solved my problem.

I changed the URL from
In : http://ryjl3-tyaaa-aaaaa-aaaba-cai.localhost:8000/

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)

GET net::ERR_ABORTED 400 (Bad Request) GET net::ERR_ABORTED 400 (Bad Request) GET net::ERR_ABORTED 400 (Bad Request) GET net::ERR_ABORTED 400 (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 :wink:.

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.

1 Like

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. :melting_face:

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 properly used :
npm i svelte-quill
In the project…

The dfx deploy error is :

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?

1 Like

Well, I even didn’t know what is typescript, but… Maybe your explanation help. Could it be linked with this “e” that I had forgotten ?

I understand your explanation… a little… But why was it working before to import it in Motoko example ?

After more hours trying to solve the svelte-quill issue… I found prerender = true in /+layout.server.ts breaks the route after deployment to netlify / vercel · Issue #6568 · sveltejs/kit · GitHub
I understand about nothing, but as a divine inspiration I change the variable :
export const prerender = true;

in → false…
And, now it works…

However, I have a hard time understanding what it means for the rest to change this value. Is it a problem to leave the value at false?

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.

1 Like

Turning true or false prerender is an option of SvelteKit documented there

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.

1 Like

Thank you very much for your explanations about ts and for this documentation Peterparler !

1 Like

After I lost my complete day, I finally found why I wasn’t able to run the svelte-motoko-starter… It was my fault.

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…


We’ve all been there so many times, glad to hear you solved the issue!

1 Like

I will not what I’ve done today, maybe it will be helpfull for others or me in future.

During this lost day, I also solved my problem to deploy the internet Identity canister. So, if like me when you use :

 II_ENV=development dfx deploy --no-wallet --argument '(null)'

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',
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

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. :exploding_head: But well, thanks to all this, everything seems a little less obscure to me.

Ah damn I did not knew you had issue deploying II (:disappointed:), I recently wrote a blog post about it

1 Like

Wow, nice. Thank you for this contribution.

1 Like

My pleasure! Please let me know if anything is incorrect.