Issues with modules can't be recognized in package.json

Hi,

I am working with the LinkedUp example and tweaking it. I ran into the following issue when I was trying to use the main.js from it that has bootstrap included.

Child
    Hash: f3ed073ee7fd679f6bfa
    Time: 96ms
    Built at: 02/10/2020 11:43:01 PM
    Entrypoint main =
    [0] ./src/hello_location/profile/public/main.js + 2 modules 9.45 KiB {0} [built]
        | ./src/hello_location/profile/public/main.js 6.17 KiB [built]
        | ./src/hello_location/profile/public/templates.js 3.03 KiB [built]
        | ./src/hello_location/profile/public/utils.js 251 bytes [built]
    
    ERROR in ./src/hello_location/profile/public/main.js
    Module not found: Error: Can't resolve 'animate.css/animate.min.css' in '/Users/adam.tothfejel/Desktop/ProgrammableLoans/src/hello_location/profile/public'
     @ ./src/hello_location/profile/public/main.js 13:0-37
    
    ERROR in ./src/hello_location/profile/public/main.js
    Module not found: Error: Can't resolve 'bootstrap' in '/Users/adam.tothfejel/Desktop/ProgrammableLoans/src/hello_location/profile/public'
     @ ./src/hello_location/profile/public/main.js 4:0-19
    
    ERROR in ./src/hello_location/profile/public/main.js
    Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in '/Users/adam.tothfejel/Desktop/ProgrammableLoans/src/hello_location/profile/public'
     @ ./src/hello_location/profile/public/main.js 12:0-46
    
    ERROR in ./src/hello_location/profile/public/main.js
    Module not found: Error: Can't resolve 'ic:canisters/profile' in '/Users/adam.tothfejel/Desktop/ProgrammableLoans/src/hello_location/profile/public'
     @ ./src/hello_location/profile/public/main.js 7:0-43 18:0-7 89:29-36 92:33-40 104:27-34 109:10-17 110:10-17 129:37-44 139:32-39 153:16-23 154:16-23 180:27-34 237:6-13

Here is my package.json file:

{
“dependencies”: {
“animate.css”: “^3.7.2”,
“bootstrap”: “^4.3.1”,
“copy-webpack-plugin”: “^5.1.1”,
“font-awesome”: “^4.7.0”,
“jquery”: “^3.4.1”,
“popper.js”: “^1.16.0”,
“showdown”: “^1.9.1”,
“tweetnacl”: “^1.0.1”,
“typed.js”: “^2.0.11”,
“wowjs”: “^1.1.3”
},
“devDependencies”: {
“css-loader”: “^3.4.2”,
“style-loader”: “^1.1.2”,
“webpack”: “4.41.3”,
“webpack-cli”: “3.3.10”,
“terser-webpack-plugin”: “2.2.2”
},
“name”: “hello_location”,
“description”: “”,
“keywords”: ,
“scripts”: {
“build”: “webpack”
},
“version”: “0.1.0”

}

2 Likes

is this what you get after running dfx build?

seems like there are some resources missing, did you check if modules from the error codes exist under the specified paths?

if you’re using the linkedup repo, make sure you’re on the sj/inter-canister-calls branch and use dfx v0.5.0. you could use this to get everything up and running first

if you have your code on git feel free to share

Yes this is what I get after dfx build. I checked all modules existed in my package.json file just like the LinkedUp example. Here is my Github repo: https://github.com/adam0000345/TestProject.

2 Likes

@cryptoschindler I used your video to get 0.5.0 working and was using the inter-canister-calls branch.

3 Likes

i can build your project after modyfing
src/hello_location/profile/public/main.js

Change the import in line 6 to
import profile from 'ic:canisters/hello_location';

after that run dfx build again.

does that work for you?

1 Like

That worked for me, thank you very much. Question, when I build the project why can I do it with my internet on? I thought all network activity needed to be turned off during building as according to the tutorials? Additionally, how would I get the webpage to show up? I am going to this URL: http://localhost:8000/?canisterId=ic:6EDF27FC7ACF1176BD. Thank you.

1 Like

Glad it works! :seedling:
Can you post a link where you heard of that “network acitvity needs to be turned off”? This is the first time I hear about that.

You should be able to use the same commands we used in the linkedup tutorial, namely

ID=$(xxd -u -p canisters/profile/_canister.id)
CRC=$(python2 -c "import crc8;h=crc8.crc8();h.update('$ID'.decode('hex'));print(h.hexdigest())")
xdg-open "http://127.0.0.1:8000/?canisterId=ic:$ID$CRC"

Note: you need to replace the path from the first command if your canister is not called profile!

Make sure you reuse those commands after you ran dfx build to get the correct canister ID!

1 Like

Sorry I meant to say this: “You have stopped any network client processes running on the local computer.” I would assume this meant that I could not have internet on when building? https://sdk.dfinity.org/developers-guide/tutorials/hello-location.html. Ok will give that shot a thanks.

Pretty sure this relates to make sure that there is currently no instance of the local dfx network running, so make sure you run dfx stop before you start this tutorial

Question though, I have bits from hello location tutorial where I have accessed the URL as follows: Installing code for canister hello_location, with canister_id ic:E75C3765B661880C3E, using the URL format like above. What exactly does the above do? Would they conflict with each other if I merging things together?

Ah ok that makes much more sense. Thanks.

Also, would you happen to know why I might see a “Loading, please wait…” in my web browser by any chance?

Each time you run dfx build the newest version of your built canister will have a different ID, thats why you have to make sure you always use the newest ID. The above commands help doing that if you run them each time after you run dfx build. If you merge the code together and then run dfx build you will create new canisters with new IDs.

1 Like

From the output of dfx it looks like you might have an error in line 7 of your ‘main.mo’ file

Feb 11 17:45:37.521 WARN Could not perform query on canister: IC0503: Canister ic:0EE46DF4C7303EA281 trapped explicitly: assertion failed at /Users/moritz/projects/dfinity/TestProject/src/hello_location/main.mo-4452262913657323220:7.25-7.37, Application: Http Handler

But i don’t really know as i dont know what you have changed :slight_smile:

Ok that’s what I was thinking, thanks. Thanks for all the help. Completely new.

No problem, always feel free to ask questions :slight_smile: That’s what this place is for. I might be a bit overwhelming at the beginning, but there will be more and more examples, tutorials and documentation soon!

If you don’t mind, I did use the above:
ID=(xxd -u -p canisters/profile/_canister.id) CRC=(python2 -c “import crc8;h=crc8.crc8();h.update(’$ID’.decode(‘hex’));print(h.hexdigest())”)
xdg-open “http://127.0.0.1:8000/?canisterId=ic:$ID$CRC

I still get what you see in the picture.

I do not get the flash webpage that I want to edit.

can you run echo $ID and echo $CRC and post the results?

AdamT-F0122: adam.tothfejel$ echo $ID
6EDF27FC7ACF1176

AdamT-F0122 adam.tothfejel$ echo $CRC
bd