Issue with DFX 0.8.0

I did this upgrade and also upgraded new packages via NPM.
@dfinity/agent - npm 0.9.3 looks in .dfx/local/canisters/CANISTERNAME/CANISTERNAME.js

But it seems that 0.8.0 builds .dfx/local/canisters/CANISTERNAME/index.js, which results in @dfinity/agent not being able to find CANISTERNAME.js . Which is a build error.

Confirmed. By going back to 0.7.2 all issues are resolved. @dfinity/agent finds CANISTERNAME.js file and builds work normally again.

I think either the Dfinity agent or DFX needs to be changed to find the correct files.

Dfx >= 0.7.7 need some changes on the frontend side

See these posts:

1 Like

That makes sense. I guess I need to follow along more closely here :grinning:

@peterparker That actually does not resolve it. The issue I am having is with the Node module @dfinity/agent . My code is not having an issue with the upgrade, the imported module is.

It should be updated so it works with 0.8.0. So if I do ‘npm install @dfinity/agent’ on a brand new project created using dfx 0.8.0, currently it will throw an error because it is looking in the wrong place.

rm -r .dfx && dfx start --background && dfx deploy maybe?

Rebuilding the project does not change the Node.js module that looks in the wrong location.

Mmmh ok sorry no other idea spontaneously. I’m on @dfinity/... v0.9.2 and dfx v0.8.0.

1 Like

Do you mind sharing the dependencies on your package.json? Maybe it is because I am loading the modules separately and they are not being updated.

Sure here my app/repo/branch: deckdeckgo/studio at feat/internet-computer · deckgo/deckdeckgo · GitHub

1 Like

I was able to resolve this in my buildpack. I am using Vite which was importing but not aiming at did.js but rather NAME.js which no longer existed.

Also if you are using Vite you will need to roll-in Buffer like the bottom example here. How to shim Buffer and crypto? · Discussion #3126 · vitejs/vite · GitHub

1 Like

Hey @apotheosis I’m having the same issue when I try to upgrade to 8.0.0.

I’m using Vite. Can you post the steps to solve the issues?

Thanks

Sure. I used this for project setup a few months ago → https://github.com/MioQuispe/create-ic-app

In Vite.config.js I needed to add the .did. portion.

// List of all aliases for canisters
const aliases = Object.entries(dfxJson.canisters).reduce(
  (acc, [name, _value]) => {
    // Get the network name, or `local` by default.
    const networkName = process.env["DFX_NETWORK"] || "local"
    const outputRoot = path.join(
      __dirname,
      ".dfx",
      networkName,
      "canisters",
      name,
    )

    return {
      ...acc,
      ["dfx-generated/" + name]: path.join(outputRoot, name + ".did.js"),
    }
  },
  {},
)

I am using Node v16.6.1.
Some of the Dfinity packages use Buffer. This exists in Node but does not work well with Vite.

Buffer is undefined error.

I added this into my agent.js so Buffer would be defined.

import { Buffer } from 'buffer';
window.Buffer = Buffer;

@apotheosis thanks for the info.

I used the same starter and I have the same node version. I did the steps you mentioned. However, it looks like we are missing the canisterId when the exports occurs.

Any idea what is going on?

'canisterId' is not exported by .dfx/local/canisters/counter/counter.did.js, imported by src/agent.js
file: /home/fer/Projects/pro/overchute-app/src/agent.js:6:2
4: import {
5:   idlFactory as counter_idl,
6:   canisterId as counter_id,
     ^
7: } from "dfx-generated/counter"
error during build:
Error: 'canisterId' is not exported by .dfx/local/canisters/counter/counter.did.js, imported by src/agent.js
    at error (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:151:30)
    at Module.error (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:10044:16)
    at Module.traceVariable (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:10429:29)
    at ModuleScope.findVariable (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:9200:39)
    at Identifier.bind (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:4572:40)
    at Property.bind (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:2886:23)
    at ObjectExpression.bind (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:2882:31)
    at CallExpression.bind (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:2882:31)
    at CallExpression.bind (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:7133:15)
    at VariableDeclarator.bind (/home/fer/Projects/pro/overchute-app/node_modules/rollup/dist/shared/rollup.js:2886:23)

Remove the .did.js and you will be importing out of /<canister-name>/index.js which exports both. You will need to make sure that you have string replacement for process.env.<CANISTER_NAME>_CANISTER_ID though.

See Highlights of what’s new in 0.8.0 :: Internet Computer

image

1 Like

@kpeacock thanks …it worked!!!

I will post my steps here in case somebody else needs it.

Modify the dfx-generated line as follows in vite.config.js

["dfx-generated/" + name]: path.join(outputRoot),

I modified also agent.js. Here it is

import { Actor, HttpAgent } from "@dfinity/agent"
import { idlFactory as counter_idl } from "dfx-generated/counter/counter.did.js"
import canisterIds from "../.dfx/local/canister_ids.json"

const counter_id =
  new URLSearchParams(window.location.search).get("counterId") ||
  canisterIds.counter.local

const agentOptions = {
  host: "http://localhost:8000",
}

const agent = new HttpAgent(agentOptions)
const counter = Actor.createActor(counter_idl, {
  agent,
  canisterId: counter_id,
})

export { counter }

I also deleted the previous .dfx folder just in case something was wrong with there.

Finally I ran the following commands (make sure you are already running dfx start ):

dfx canister create --all
dfx canister install --all
dfx build
dfx deploy

// Start your your front end
npm run dev 

Good luck!!!

I also changed my agent.js to have them there. It is a bit different since I use hot reload with Vite serve while coding. So I have the different ids based on port.

What happens when you post yours live??

I will post this issue in the builder from Github.

@apotheosis

I haven’t deployed the app live. I might need your input when I do :rofl:

For the moment is running ‘only’ locally.

Thanks for following up.