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
1 Like
That makes sense. I guess I need to follow along more closely here 
@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.
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

1 Like
@anon74414410 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 
For the moment is running ‘only’ locally.
Thanks for following up.