Quick start guide npm error

Hello, I am trying to get the quick start “Hello World” Dapp working and so far have got the canisters built and deployed locally (I have also deployed to the IC a different frontend only Dapp to the IC). I can see the frontend canister is working by putting into my browser but when I try to run npm start I am hit with errors. The output from the terminal is:

explore_hello_frontend@0.1.0 prestart /mnt/d/Videos/Documents/test/explore_hello
npm run copy:types

explore_hello_frontend@0.1.0 copy:types /mnt/d/Videos/Documents/test/explore_hello
rsync -avr .dfx/$(echo ${DFX_NETWORK:-‘'})/canisters/ --exclude=‘assets/’ --exclude=‘idl/’ --exclude=’.wasm’
.most’ --delete src/declarations

sending incremental file listexplore_hello_backend/

sent 4,352 bytes received 62 bytes 8,828.00 bytes/sec
total size is 23,469 speedup is 5.32

explore_hello_frontend@0.1.0 start /mnt/d/Videos/Documents/test/explore_hello
webpack serve --mode development --env development

No production canister_ids.json found. Continuing with local
[webpack-cli] /mnt/d/Videos/Documents/test/explore_hello/node_modules/webpack-dev-server/lib/getPort.js:13
const maxPort = 65_535;

SyntaxError: Invalid or unexpected token
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Function.getFreePort (/mnt/d/Videos/Documents/test/explore_hello/node_modules/webpack-dev-server/lib/Server.js:397:21)
at Server.start (/mnt/d/Videos/Documents/test/explore_hello/node_modules/webpack-dev-server/lib/Server.js:3245:40)
at process._tickCallback
npm ERR! errno 2
npm ERR! explore_hello_frontend@0.1.0 start: webpack serve --mode development --env development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the explore_hello_frontend@0.1.0 start
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/milo_welch/.npm/_logs/2022-11-07T20_52_47_491Z-debug.log

Any ideas as to how to fix this? Thanks

It sounds like it’s the keyword const that is throwing the error? That’s wild. What version of Node are you running?

I am running v16.17.0

Could you provide more context by providing snippet of package.json and webpack configurations?

my webpack.configjs looks as follows

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

function initCanisterEnv() {
  let localCanisters, prodCanisters;
  try {
    localCanisters = require(path.resolve(
  } catch (error) {
    console.log("No local canister_ids.json found. Continuing production");
  try {
    prodCanisters = require(path.resolve("canister_ids.json"));
  } catch (error) {
    console.log("No production canister_ids.json found. Continuing with local");

  const network =
    process.env.DFX_NETWORK ||
    (process.env.NODE_ENV === "production" ? "ic" : "local");

  const canisterConfig = network === "local" ? localCanisters : prodCanisters;

  return Object.entries(canisterConfig).reduce((prev, current) => {
    const [canisterName, canisterDetails] = current;
    prev[canisterName.toUpperCase() + "_CANISTER_ID"] =
    return prev;
  }, {});
const canisterEnvVariables = initCanisterEnv();

const isDevelopment = process.env.NODE_ENV !== "production";

const frontendDirectory = "hello_frontend";

const frontend_entry = path.join("src", frontendDirectory, "src", "index.html");

module.exports = {
  target: "web",
  mode: isDevelopment ? "development" : "production",
  entry: {
    // The frontend.entrypoint points to the HTML file for this build, so we need
    // to replace the extension to `.js`.
    index: path.join(__dirname, frontend_entry).replace(/\.html$/, ".js"),
  devtool: isDevelopment ? "source-map" : false,
  optimization: {
    minimize: !isDevelopment,
    minimizer: [new TerserPlugin()],
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx"],
    fallback: {
      assert: require.resolve("assert/"),
      buffer: require.resolve("buffer/"),
      events: require.resolve("events/"),
      stream: require.resolve("stream-browserify/"),
      util: require.resolve("util/"),
  output: {
    filename: "index.js",
    path: path.join(__dirname, "dist", frontendDirectory),

  // Depending in the language or framework you are using for
  // front-end development, add module loaders to the default
  // webpack configuration. For example, if you are using React
  // modules and CSS as described in the "Adding a stylesheet"
  // tutorial, uncomment the following lines:
  // module: {
  //  rules: [
  //    { test: /\.(ts|tsx|jsx)$/, loader: "ts-loader" },
  //    { test: /\.css$/, use: ['style-loader','css-loader'] }
  //  ]
  // },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, frontend_entry),
      cache: false,
    new webpack.EnvironmentPlugin({
      NODE_ENV: "development",
    new webpack.ProvidePlugin({
      Buffer: [require.resolve("buffer/"), "Buffer"],
      process: require.resolve("process/browser"),
  // proxy /api to port 8000 during development
  devServer: {
    proxy: {
      "/api": {
        target: "",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api",
    static: path.resolve(__dirname, "src", frontendDirectory, "assets"),
    hot: true,
    watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
    liveReload: true,

and this is my package.json

  "name": "hello_frontend",
  "version": "0.1.0",
  "description": "Internet Computer starter application",
  "keywords": [
    "Internet Computer",
  "scripts": {
    "build": "webpack",
    "prebuild": "npm run copy:types",
    "start": "webpack serve --mode development --env development",
    "prestart": "npm run copy:types",
    "copy:types": "rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --exclude='*.most' --delete src/declarations"
  "devDependencies": {
    "@dfinity/agent": "0.14.1",
    "@dfinity/candid": "0.14.1",
    "@dfinity/principal": "0.14.1",
    "assert": "2.0.0",
    "buffer": "6.0.3",
    "events": "3.3.0",
    "html-webpack-plugin": "5.5.0",
    "process": "0.11.10",
    "stream-browserify": "3.0.0",
    "terser-webpack-plugin": "^5.3.3",
    "util": "0.12.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.8.1"
  "engines": {
    "node": "^12 || ^14 || ^16 || ^18"
  "browserslist": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 2 safari version",
    "last 2 edge version"

This both were set up via >>dfx new hello
It should be noted that I have to run >> dfx start --emulator rather than dfx start because otherwise on >> dfx deploy I get this error

Error: Failed to get wallet canister caller for identity ‘default’ on network ‘local’.

But I found a work around to this in another post

1 Like

It should be noted that I have to run >> dfx start --emulator rather than dfx start because otherwise on >> dfx deploy I get this error
Error: Failed to get wallet canister caller for identity ‘default’ on network ‘local’.

When switching between dfx start and dfx start --emulator, it’s necessary to use --clean, otherwise this wallet canister lookup will fail.

1 Like