Importing TypeScript modules broke

Developers JavaScript
1

The Internet Identity canister runs on http://localhost:8000/?canisterId=br5f7-7uaaa-aaaaa-qaaca-cai#authorize

When the window with this URL opens, it tries to read http://localhost:8000/spa.js instead of http://localhost:8000/spa.js?canisterId=br5f7-7uaaa-aaaaa-qaaca-cai and loading fails, so making my dapp unusable.

Previously, it worked, but stopped to work at some point. Please, help to solve this issue.

Also, I have this in tsconfig.json:

{
    "compilerOptions": {
      "target": "es2018",        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
      "lib": ["ES2018", "DOM"],  /* Specify library files to be included in the compilation. */
      "allowJs": true,           /* Allow javascript files to be compiled. */
      "jsx": "react",            /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
      "moduleResolution": "nodenext",
      "module": "nodenext",
      "skipLibCheck": true,
    },
    // TODO: ./src/custom.d.ts does not work :-~
    "include": ["src/**/*.ts", "./src/custom.d.ts"],
}
2

If you need dfx.json (the canister that broke is internet_identity):

{
  "canisters": {
    "main": {
      "main": "src/backend/main.mo",
      "type": "motoko",
      "dependencies": [
        "order",
        "payments",
        "CanDBIndex",
        "NacDBIndex",
        "internet_identity"
      ]
    },
    "order": {
      "main": "src/backend/order.mo",
      "type": "motoko"
    },
    "frontend": {
      "frontend": {
        "entrypoint": "src/frontend/src/index.html"
      },
      "dependencies": [
        "main"
      ],
      "source": [
        "src/frontend/assets",
        "dist/frontend/"
      ],
      "type": "assets"
    },
    "payments": {
      "main": "src/backend/payments.mo",
      "type": "motoko",
      "dependencies": [
        "pst"
      ]
    },
    "pst": {
      "main": "src/backend/pst.mo",
      "type": "motoko"
    },
    "CanDBIndex": {
      "main": "src/storage/CanDBIndex.mo",
      "type": "motoko"
    },
    "NacDBIndex": {
      "main": "src/storage/NacDBIndex.mo",
      "type": "motoko"
    },
    "CanDBPartition": {
      "main": "src/storage/CanDBPartition.mo",
      "type": "motoko"
    },
    "NacDBPartition": {
      "main": "src/storage/NacDBPartition.mo",
      "type": "motoko"
    },
    "internet_identity": {
      "type": "custom",
      "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
      "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
      "shrink": false,
      "remote": {
        "candid": "internet_identity.did",
        "id": {
          "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
        }
      }
    }
  },
  "defaults": {
    "build": {
      "args": "-fshared-code",
      "packtool": "vessel sources"
    }
  },
  "output_env_file": ".env",
  "version": 1,
  "networks": {
    "local": {
      "bind": "localhost:8000",
      "type": "ephemeral"
    }
  }
}
3

Can you use <canister id>.localhost:8000 instead? It works on almost all browsers

4

Yes, it works that way.