[webpack-dev-server]

Developers Motoko
1

Hello everyone,

I am using Motoko I did see in some documentation that they had deprecated the local check I am not sure if this is related to my problem another thought I had was maybe switching over to Rust let me know what you guys think or how I can possibly get this going

terminal says

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/v2/status to localhost:4943/api/v2/status [EHOSTUNREACH] (Errors | Node.js v20.3.1 Documentation)

my HAR console says

index.js:265 GET http://localhost:8080/api/v2/status 500 (Internal Server Error)
status @ index.js:265
fetchRootKey @ index.js:276
createActor @ index.js:20
./src/declarations/token/index.js @ index.js:38
webpack_require @ bootstrap:24
fn @ hot module replacement:61
./src/token_assets/src/components/Balance.jsx @ App.jsx:13
webpack_require @ bootstrap:24
fn @ hot module replacement:61
./src/token_assets/src/components/App.jsx @ value.js:388
webpack_require @ bootstrap:24
fn @ hot module replacement:61
./src/token_assets/src/index.jsx @ Transfer.jsx:20
webpack_require @ bootstrap:24
(anonymous) @ startup:6
(anonymous) @ startup:6
index.js:551 [webpack-dev-server] Hot Module Replacement enabled.
index.js:21 Unable to fetch root key. Check to ensure that your local replica is running
(anonymous) @ index.js:21
Promise.catch (async)
createActor @ index.js:20
./src/declarations/token/index.js @ index.js:38
webpack_require @ bootstrap:24
fn @ hot module replacement:61
./src/token_assets/src/components/Balance.jsx @ App.jsx:13
webpack_require @ bootstrap:24
fn @ hot module replacement:61
./src/token_assets/src/components/App.jsx @ value.js:388
webpack_require @ bootstrap:24
fn @ hot module replacement:61
./src/token_assets/src/index.jsx @ Transfer.jsx:20
webpack_require @ bootstrap:24
(anonymous) @ startup:6
(anonymous) @ startup:6
index.js:22 Error: Server returned an error:
Code: 500 (Internal Server Error)
Body: Error occurred while trying to proxy: localhost:8080/api/v2/status

at HttpAgent.status (index.js:267:1)
at async HttpAgent.fetchRootKey (index.js:276:1)
2

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8081/api/v2/status to http://localhost:8080/ [ECONNREFUSED] (Errors | Node.js v20.3.1 Documentation)

3

Does anything happen if you visit http://localhost:4943? If not, you replica may not be running or may be running on a different port.

Also, make sure that your webpack config is proxying to http:/127.0.0.1:4943 instead of localhost. There are problems with the dev server localhost alias in recent versions of node.js

4

As of right now when I visit http://localhost:4943](http://localhost:4943 I get back this site can not be loaded

I also have a quick clarification question would I add [http://localhost:4943 ] to bind inside my dfx.json file
after adding http:/127.0.0.1:4943

my terminal throws:
icastillo@mba-013949 token % dfx deploy
Cannot parse provider URL.

icastillo@mba-013949 token % dfx canister create --all
Cannot parse provider URL.

icastillo@mba-013949 token % dfx start --emulator
Cannot parse provider URL.
:disappointed_relieved::disappointed_relieved:

5

inside my HAR

Uncaught TypeError: interfaceFactory is not a function
at Actor.createActorClass (actor.js:107:1)
at Actor.createActor (actor.js:125:1)
at createActor (index.js:27:10)
at ./src/declarations/token/index.js (index.js:38:9)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:61:1)
at ./src/token_assets/src/components/Balance.jsx (App.jsx:13:20)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:61:1)
at ./src/token_assets/src/components/App.jsx (value.js:388:1)

index.js:22 Error: Server returned an error:
Code: 504 (Gateway Timeout)
Body: Error occurred while trying to proxy: localhost:8080/api/v2/status

at HttpAgent.status (index.js:267:1)
at async HttpAgent.fetchRootKey (index.js:276:1)

Screen Shot 2023-07-11 at 4.12.21 PM
Screen Shot 2023-07-11 at 4.12.21 PM1920×1200 210 KB

6

First guess: bind does not need http://. This is enough: "bind": "127.0.0.1:4943". Also, in the snippet you show there is only one /. Could be the forum being too smart or an error in the string

Otherwise can you share the full dfx.json and if you have the networks.json (you can find the location using dfx info networks-json-path)?

7

Thank you guys I appreciate the Dfinity Team taking time to help me out that was totally my mistake for missing a / and posting it hahaha.

when running the command mentioned above my terminal throws
icastillo@mba-013949 token % dfx config networks.json_path

Config path does not exist at ‘/networks/json_path’.

I believe I do not have a networks.json file. After trouble shooting some of the steps you mentioned I did make some breakthroughs :slight_smile: . Also got a new error haha. When checking the balance of my principal token using the front end this happens. I have no idea why its still talking to port 8080 as I switched them to the ones mentioned above.

HAR capture
Uncaught (in promise) Error: Server returned an error:
Code: 500 (Internal Server Error)
Body: Error occurred while trying to proxy: localhost:8080/api/v2/canister/rrkah-fqaaa-aaaaa-aaaaq-cai/query

at HttpAgent.query (index.js:220:1)
at async caller (actor.js:155:1)
at async handleClick (Balance.jsx:10:1)

Screen Shot 2023-07-12 at 10.48.58 AM
Screen Shot 2023-07-12 at 10.48.58 AM2880×1800 505 KB

this is my dfx.json file

8

Typo again, please try again with the command in my previous answer :wink:

About the other error: did you restart the replica, rebuild the frontend, and reload the page? I’d start with these steps

9

Hey thank you once again I appreciate the help from @Severin :pray:
I am going to document the steps I took above for a better understanding for anyone that faces this issue above they had mentioned to use the command

dfx info networks-json-path
I did use it at first but I would get this error in the terminal

icastillo@mba-013949 token % dfx info networks-json-path
error: Found argument ‘info’ which wasn’t expected, or isn’t valid in this context

If you tried to supply info as a PATTERN use -- info

USAGE:
dfx [FLAGS] [OPTIONS]

For more information try --help

So in search of trying to get a different result I used this command

dfx config networks.json_path

which threw this
Config path does not exist at ‘/networks/json_path’.

to Fix the terminal error Above i ran the command

dfx upgrade

and made changes to files that had any dfx version outdated

Now after those changes I ran

icastillo@mba-013949 token % dfx info networks-json-path
/Users/icastillo/.config/dfx/networks.json
icastillo@mba-013949 token % dfx build
Building canisters…
Building frontend…

which is working good now

However now when I run these commands this is what populates inside my terminal


 icastillo@mba-013949 token % dfx canister create -all

Error: Failed to get wallet canister caller for identity ‘default’ on network ‘local’.
Caused by: Failed to get wallet canister caller for identity ‘default’ on network ‘local’.
Failed to construct wallet canister caller: The replica returned a replica error: Replica Error: reject code DestinationInvalid, reject message canister does not exist: rwlgt-iiaaa-aaaaa-aaaaa-cai, error code Some(“ICHS0000”)


icastillo@mba-013949 token % dfx deploy

Deploying all canisters.
All canisters have already been created.
Building canisters…
Building frontend…
Installing canisters…
Installing code for canister token, with canister ID rrkah-fqaaa-aaaaa-aaaaq-cai
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
Failed while trying to install all canisters.
Failed to install wasm module to canister ‘token’.
Failed during wasm installation call: The replica returned an HTTP Error: Http Error: status 400 Bad Request, content type “text/plain”, content: canister does not exist: rrkah-fqaaa-aaaaa-aaaaq-cai

icastillo@mba-013949 token % dfx start --emulator
Running dfx start for version 0.14.2
Using project-specific network 'local' defined in /Users/icastillo/Downloads/token/dfx.json
WARN: Project-specific networks are deprecated and will be removed after February 2023.
  Version v0.14.2 installed successfully.
Starting ic-ref...
Running at http://127.0.0.1:53036/

Once again I appreciate anyone of you that has taken time to help out :pray:

10

After running dfx upgrade you should restart the local replica with --clean. Otherwise a bunch of assumptions break. Can you try again after dfx start --clean? That should fix all your errors

11

@Severin thank you for your help :pray:

icastillo@mba-013949 token % dfx start --clean
Running dfx start for version 0.14.2
Using project-specific network 'local' defined in /Users/icastillo/Downloads/token/dfx.json
WARN: Project-specific networks are deprecated and will be removed after February 2023.
Initialized replica.
Dashboard: http://localhost:51281/_/dashboard```



```icastillo@mba-013949 token % dfx deploy
Deploying all canisters.
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "bnz7o-iuaaa-aaaaa-qaaaa-cai"
Creating canisters...
Creating canister token...
token canister created with canister id: bd3sg-teaaa-aaaaa-qaaba-cai
Creating canister token_assets...
token_assets canister created with canister id: be2us-64aaa-aaaaa-qaabq-cai
Building canisters...
Building frontend...
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
  Failed to build all canisters.
    Failed while trying to build all canisters.
      The post-build step failed for canister 'be2us-64aaa-aaaaa-qaabq-cai' (token_assets) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> faucet_assets@0.1.0 prebuild
> npm run copy:types


> faucet_assets@0.1.0 copy:types
> rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations

building file list ... done
deleting token/token.did.js
token/constructor.did
token/index.js
token/init_args.txt
token/service.did
token/service.did.d.ts
token/service.did.js
token/token.did
token/token.most
token_assets/
token_assets/assetstorage.wasm.gz
token_assets/index.js
token_assets/init_args.txt
token_assets/service.did
token_assets/service.did.d.ts
token_assets/service.did.js
token_assets/token_assets.wasm.gz

sent 874497 bytes  received 356 bytes  1749706.00 bytes/sec
total size is 886550  speedup is 1.01

> faucet_assets@0.1.0 build
> webpack

No production canister_ids.json found. Continuing with local
asset index.js 1.51 MiB [emitted] [compared for emit] (name: index) 1 related asset
asset favicon.ico 15 KiB [compared for emit] [from: src/token_assets/assets/favicon.ico] [copied]
asset main.css 2.95 KiB [compared for emit] [from: src/token_assets/assets/main.css] [copied]
asset index.html 605 bytes [compared for emit]
runtime modules 1.16 KiB 6 modules
modules by path ./node_modules/ 1.42 MiB 69 modules
modules by path ./src/ 5.74 KiB
  modules by path ./src/token_assets/src/components/*.jsx 3.62 KiB
    ./src/token_assets/src/components/App.jsx 430 bytes [built] [code generated]
    ./src/token_assets/src/components/Header.jsx 375 bytes [built] [code generated]
    ./src/token_assets/src/components/Faucet.jsx 644 bytes [built] [code generated]
    ./src/token_assets/src/components/Balance.jsx 1.19 KiB [built] [code generated]
    ./src/token_assets/src/components/Transfer.jsx 1.02 KiB [built] [code generated]
  ./src/token_assets/src/index.jsx 221 bytes [built] [code generated]
  ./src/declarations/token/index.js 1.9 KiB [built] [code generated]

ERROR in ./src/declarations/token/index.js 4:0-44
Module not found: Error: Can't resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
  using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token/token.did.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.tsx doesn't exist
      as directory
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
 @ ./src/token_assets/src/components/Balance.jsx 3:0-52 10:30-45
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

webpack 5.69.1 compiled with 1 error in 1298 ms


icastillo@mba-013949 token %  dfx canister create --all
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "bkyz2-fmaaa-aaaaa-qaaaq-cai"
Creating canister token...
token canister was already created and has canister id: bd3sg-teaaa-aaaaa-qaaba-cai
Creating canister token_assets...
token_assets canister created with canister id: br5f7-7uaaa-aaaaa-qaaca-cai

icastillo@mba-013949 token % dfx build
Building canisters...
Building frontend...
Error: Failed while trying to build all canisters.
Caused by: Failed while trying to build all canisters.
  The post-build step failed for canister 'br5f7-7uaaa-aaaaa-qaaca-cai' (token_assets) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> faucet_assets@0.1.0 prebuild
> npm run copy:types


> faucet_assets@0.1.0 copy:types
> rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations

building file list ... done
token/constructor.did
token/index.js
token/init_args.txt
token/service.did
token/service.did.d.ts
token/service.did.js
token/token.did
token/token.most
token_assets/
token_assets/assetstorage.wasm.gz
token_assets/index.js
token_assets/init_args.txt
token_assets/service.did
token_assets/service.did.d.ts
token_assets/service.did.js
token_assets/token_assets.wasm.gz

sent 874501 bytes  received 356 bytes  1749714.00 bytes/sec
total size is 886550  speedup is 1.01

> faucet_assets@0.1.0 build
> webpack

No production canister_ids.json found. Continuing with local
asset index.js 1.51 MiB [compared for emit] (name: index) 1 related asset
asset favicon.ico 15 KiB [compared for emit] [from: src/token_assets/assets/favicon.ico] [copied]
asset main.css 2.95 KiB [compared for emit] [from: src/token_assets/assets/main.css] [copied]
asset index.html 605 bytes [compared for emit]
runtime modules 1.16 KiB 6 modules
modules by path ./node_modules/ 1.42 MiB 69 modules
modules by path ./src/ 5.74 KiB
  modules by path ./src/token_assets/src/components/*.jsx 3.62 KiB
    ./src/token_assets/src/components/App.jsx 430 bytes [built] [code generated]
    ./src/token_assets/src/components/Header.jsx 375 bytes [built] [code generated]
    ./src/token_assets/src/components/Faucet.jsx 644 bytes [built] [code generated]
    ./src/token_assets/src/components/Balance.jsx 1.19 KiB [built] [code generated]
    ./src/token_assets/src/components/Transfer.jsx 1.02 KiB [built] [code generated]
  ./src/token_assets/src/index.jsx 221 bytes [built] [code generated]
  ./src/declarations/token/index.js 1.9 KiB [built] [code generated]

ERROR in ./src/declarations/token/index.js 4:0-44
Module not found: Error: Can't resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
  using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token/token.did.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.tsx doesn't exist
      as directory
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
 @ ./src/token_assets/src/components/Balance.jsx 3:0-52 10:30-45
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

webpack 5.69.1 compiled with 1 error in 1276 ms

Stderr:



icastillo@mba-013949 token % npm start

> faucet_assets@0.1.0 prestart
> npm run copy:types


> faucet_assets@0.1.0 copy:types
> rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations

building file list ... done

sent 503 bytes  received 20 bytes  1046.00 bytes/sec
total size is 886550  speedup is 1695.12

> faucet_assets@0.1.0 start
> webpack serve --mode development --env development

No production canister_ids.json found. Continuing with local
<i> [webpack-dev-server] [HPM] Proxy created: /api  -> 127.0.0.1:4943
<i> [webpack-dev-server] [HPM] Proxy rewrite rule created: "^/api" ~> "/api"
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.20.28.162:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/icastillo/Downloads/token/public' directory
asset index.js 1.72 MiB [emitted] (name: index) 1 related asset
asset favicon.ico 15 KiB [emitted] [from: src/token_assets/assets/favicon.ico] [copied]
asset main.css 2.95 KiB [emitted] [from: src/token_assets/assets/main.css] [copied]
asset index.html 605 bytes [emitted]
runtime modules 27.1 KiB 13 modules
modules by path ./node_modules/ 1.58 MiB 91 modules
modules by path ./src/ 5.74 KiB
  modules by path ./src/token_assets/src/components/*.jsx 3.62 KiB
    ./src/token_assets/src/components/App.jsx 430 bytes [built] [code generated]
    ./src/token_assets/src/components/Header.jsx 375 bytes [built] [code generated]
    ./src/token_assets/src/components/Faucet.jsx 644 bytes [built] [code generated]
    ./src/token_assets/src/components/Balance.jsx 1.19 KiB [built] [code generated]
    ./src/token_assets/src/components/Transfer.jsx 1.02 KiB [built] [code generated]
  ./src/token_assets/src/index.jsx 221 bytes [built] [code generated]
  ./src/declarations/token/index.js 1.9 KiB [built] [code generated]

ERROR in ./src/declarations/token/index.js 4:0-44
Module not found: Error: Can't resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
  using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token/token.did.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.tsx doesn't exist
      as directory
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
 @ ./src/token_assets/src/components/Balance.jsx 3:0-52 10:30-45
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

webpack 5.69.1 compiled with 1 error in 1373 ms

what jumps out to me is the terminal is talking about a token.did.js now
I do not see this file existing in the project what I do see is a token.did I am not to sure if these are the same files the terminal is looking for.
When trouble shooting I did change that files name to token.did.js to see if that would help using these same steps documented but it did not change the result.

Once again I want to thank you for your time helping me :muscle: :motoko_go:

12

Screenshot 2023-07-14 at 10.14.30 AM
Screenshot 2023-07-14 at 10.14.30 AM1920×1200 183 KB

13

Did you change anything manually in your webpack config? If no I’d try to replace it with the one from the default project in case anything changed. I can’t think of another way why the file names would be mixed up somehow… Another try is to run dfx generate, although I think that is run automatically anyways when building the canisters…

14

hey @Severin my default webpack config file had this block of code with local host pointing to 8000 one of the recommendations I got was to change this to target: "127.0.0.1:4943

 proxy: {
      "/api": {
        target: " target: "http://localhost:8000"",
        changeOrigin: true,
        secure: false,
  
        pathRewrite: {
          "^/api": "/api",
        },
      },
    },

when i ran dfx generate it did create a token.did.js file

icastillo@mba-013949 ~/Downloads/token (fixingCanisterIssue)$ dfx generate
Building canisters before generate for Motoko
Generating type declarations for canister token_assets:
  src/declarations/token_assets/token_assets.did.d.ts
  src/declarations/token_assets/token_assets.did.js
  src/declarations/token_assets/token_assets.did
Generating type declarations for canister token:
  src/declarations/token/token.did.d.ts
  src/declarations/token/token.did.js
  src/declarations/token/token.did

but this is what happens when i run other commands in my terminal

icastillo@mba-013949 token % dfx start --clean
Running dfx start for version 0.14.2
Using project-specific network 'local' defined in /Users/icastillo/Downloads/token/dfx.json
WARN: Project-specific networks are deprecated and will be removed after February 2023.
Initialized replica.
Dashboard: http://localhost:59654/_/dashboard


icastillo@mba-013949 token % dfx deploy
Deploying all canisters.
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "bnz7o-iuaaa-aaaaa-qaaaa-cai"
Creating canisters...
Creating canister token...
token canister created with canister id: bd3sg-teaaa-aaaaa-qaaba-cai
Creating canister token_assets...
token_assets canister created with canister id: be2us-64aaa-aaaaa-qaabq-cai
Building canisters...
Building frontend...
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
  Failed to build all canisters.
    Failed while trying to build all canisters.
      The post-build step failed for canister 'be2us-64aaa-aaaaa-qaabq-cai' (token_assets) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> faucet_assets@0.1.0 prebuild
> npm run copy:types


> faucet_assets@0.1.0 copy:types
> rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations

building file list ... done
deleting token/token.did.js
deleting token/token.did.d.ts
deleting token/index.d.ts
deleting token_assets/token_assets.did.js
deleting token_assets/token_assets.did.d.ts
deleting token_assets/token_assets.did
deleting token_assets/index.d.ts
token/
token/constructor.did
token/index.js
token/init_args.txt
token/service.did
token/service.did.d.ts
token/service.did.js
token/token.did
token/token.most
token_assets/
token_assets/assetstorage.did
token_assets/assetstorage.wasm.gz
token_assets/constructor.did
token_assets/index.js
token_assets/init_args.txt
token_assets/service.did
token_assets/service.did.d.ts
token_assets/service.did.js
token_assets/token_assets.wasm.gz

sent 887939 bytes  received 406 bytes  1776690.00 bytes/sec
total size is 886550  speedup is 1.00

> faucet_assets@0.1.0 build
> webpack

No production canister_ids.json found. Continuing with local
asset index.js 1.51 MiB [emitted] [compared for emit] (name: index) 1 related asset
asset favicon.ico 15 KiB [compared for emit] [from: src/token_assets/assets/favicon.ico] [copied]
asset main.css 2.95 KiB [compared for emit] [from: src/token_assets/assets/main.css] [copied]
asset index.html 605 bytes [compared for emit]
runtime modules 1.16 KiB 6 modules
modules by path ./node_modules/ 1.42 MiB 69 modules
modules by path ./src/ 5.74 KiB
  modules by path ./src/token_assets/src/components/*.jsx 3.62 KiB
    ./src/token_assets/src/components/App.jsx 430 bytes [built] [code generated]
    ./src/token_assets/src/components/Header.jsx 375 bytes [built] [code generated]
    ./src/token_assets/src/components/Faucet.jsx 644 bytes [built] [code generated]
    ./src/token_assets/src/components/Balance.jsx 1.19 KiB [built] [code generated]
    ./src/token_assets/src/components/Transfer.jsx 1.02 KiB [built] [code generated]
  ./src/token_assets/src/index.jsx 221 bytes [built] [code generated]
  ./src/declarations/token/index.js 1.9 KiB [built] [code generated]

ERROR in ./src/declarations/token/index.js 4:0-44
Module not found: Error: Can't resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
  using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token/token.did.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.tsx doesn't exist
      as directory
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
 @ ./src/token_assets/src/components/Balance.jsx 3:0-52 10:30-45
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

webpack 5.69.1 compiled with 1 error in 1516 ms

Stderr:

icastillo@mba-013949 token %  dfx canister create --all
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "bkyz2-fmaaa-aaaaa-qaaaq-cai"
Creating canister token...
token canister was already created and has canister id: bd3sg-teaaa-aaaaa-qaaba-cai
Creating canister token_assets...
token_assets canister created with canister id: br5f7-7uaaa-aaaaa-qaaca-cai

icastillo@mba-013949 token % dfx build
Building canisters...
Building frontend...
Error: Failed while trying to build all canisters.
Caused by: Failed while trying to build all canisters.
  The post-build step failed for canister 'be2us-64aaa-aaaaa-qaabq-cai' (token_assets) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> faucet_assets@0.1.0 prebuild
> npm run copy:types


> faucet_assets@0.1.0 copy:types
> rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations

building file list ... done
deleting token/token.did.js
deleting token/token.did.d.ts
deleting token/index.d.ts
deleting token_assets/token_assets.did.js
deleting token_assets/token_assets.did.d.ts
deleting token_assets/token_assets.did
deleting token_assets/index.d.ts
token/
token/constructor.did
token/index.js
token/init_args.txt
token/service.did
token/service.did.d.ts
token/service.did.js
token/token.did
token/token.most
token_assets/
token_assets/assetstorage.did
token_assets/assetstorage.wasm.gz
token_assets/constructor.did
token_assets/index.js
token_assets/init_args.txt
token_assets/service.did
token_assets/service.did.d.ts
token_assets/service.did.js
token_assets/token_assets.wasm.gz

sent 887943 bytes  received 406 bytes  1776698.00 bytes/sec
total size is 886550  speedup is 1.00

> faucet_assets@0.1.0 build
> webpack

No production canister_ids.json found. Continuing with local
asset index.js 1.51 MiB [emitted] (name: index) 1 related asset
asset favicon.ico 15 KiB [compared for emit] [from: src/token_assets/assets/favicon.ico] [copied]
asset main.css 2.95 KiB [compared for emit] [from: src/token_assets/assets/main.css] [copied]
asset index.html 605 bytes [compared for emit]
runtime modules 1.16 KiB 6 modules
modules by path ./node_modules/ 1.42 MiB 69 modules
modules by path ./src/ 5.81 KiB
  modules by path ./src/token_assets/src/components/*.jsx 3.69 KiB
    ./src/token_assets/src/components/App.jsx 430 bytes [built] [code generated]
    ./src/token_assets/src/components/Header.jsx 375 bytes [built] [code generated]
    ./src/token_assets/src/components/Faucet.jsx 644 bytes [built] [code generated]
    ./src/token_assets/src/components/Balance.jsx 1.25 KiB [built] [code generated]
    ./src/token_assets/src/components/Transfer.jsx 1.02 KiB [built] [code generated]
  ./src/token_assets/src/index.jsx 221 bytes [built] [code generated]
  ./src/declarations/token/index.js 1.9 KiB [built] [code generated]

WARNING in ./src/token_assets/src/components/Balance.jsx 11:30-45
export 'idlFactory' (imported as 'token') was not found in '../../../declarations/token' (possible exports: canisterId, createActor, token)
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

ERROR in ./src/declarations/token/index.js 4:0-44
Module not found: Error: Can't resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
  using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token/token.did.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.tsx doesn't exist
      as directory
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
 @ ./src/token_assets/src/components/Balance.jsx 4:0-66 11:30-45
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

webpack 5.69.1 compiled with 1 error and 1 warning in 1344 ms



icastillo@mba-013949 token % npm start

> faucet_assets@0.1.0 prestart
> npm run copy:types


> faucet_assets@0.1.0 copy:types
> rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations

building file list ... done

sent 503 bytes  received 20 bytes  1046.00 bytes/sec
total size is 886550  speedup is 1695.12

> faucet_assets@0.1.0 start
> webpack serve --mode development --env development

No production canister_ids.json found. Continuing with local
<i> [webpack-dev-server] [HPM] Proxy created: /api  -> 127.0.0.1:4943
<i> [webpack-dev-server] [HPM] Proxy rewrite rule created: "^/api" ~> "/api"
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.20.28.162:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/icastillo/Downloads/token/public' directory
asset index.js 1.72 MiB [emitted] (name: index) 1 related asset
asset favicon.ico 15 KiB [emitted] [from: src/token_assets/assets/favicon.ico] [copied]
asset main.css 2.95 KiB [emitted] [from: src/token_assets/assets/main.css] [copied]
asset index.html 605 bytes [emitted]
runtime modules 27.1 KiB 13 modules
modules by path ./node_modules/ 1.58 MiB 91 modules
modules by path ./src/ 5.81 KiB
  modules by path ./src/token_assets/src/components/*.jsx 3.69 KiB
    ./src/token_assets/src/components/App.jsx 430 bytes [built] [code generated]
    ./src/token_assets/src/components/Header.jsx 375 bytes [built] [code generated]
    ./src/token_assets/src/components/Faucet.jsx 644 bytes [built] [code generated]
    ./src/token_assets/src/components/Balance.jsx 1.25 KiB [built] [code generated]
    ./src/token_assets/src/components/Transfer.jsx 1.02 KiB [built] [code generated]
  ./src/token_assets/src/index.jsx 221 bytes [built] [code generated]
  ./src/declarations/token/index.js 1.9 KiB [built] [code generated]

ERROR in ./src/declarations/token/index.js 4:0-44
Module not found: Error: Can't resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
resolve './token.did.js' in '/Users/icastillo/Downloads/token/src/declarations/token'
  using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/icastillo/Downloads/token/package.json (relative path: ./src/declarations/token/token.did.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js.tsx doesn't exist
      as directory
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
 @ ./src/token_assets/src/components/Balance.jsx 3:0-52 11:30-45
 @ ./src/token_assets/src/components/App.jsx 4:0-32 10:28-35
 @ ./src/token_assets/src/index.jsx 3:0-35 5:40-43

webpack 5.69.1 compiled with 1 error in 1309 ms"

type or paste code here
``

Screenshot 2023-07-17 at 9.18.25 PM
Screenshot 2023-07-17 at 9.18.25 PM2880×1800 245 KB

15

It looks like your build script somehow deletes the file and then complains about it not being there… I really don’t know how to fix this, I think you’ll have to dive into the webpack config yourself

16

Just giving an update on this. What sticks out to me in the terminal is

   Field 'browser' doesn't contain a valid alias configuration
        /Users/icastillo/Downloads/token/src/declarations/token/token.did.js doesn't exist
      .js

However I do not know if this is related to my package structure organization

Screenshot 2023-07-19 at 1.28.21 PM
Screenshot 2023-07-19 at 1.28.21 PM1920×1200 179 KB

17

I also did a search for the word browser inside the project