Custom domain on react-vite

Developers
1

I am trying to setup a custom domain to my react-vite project, following this guide here.

I am having a problem at this stage:

curl -sLv -X POST \
    -H 'Content-Type: application/json' \
    https://icp0.io/registrations \
    --data @- <<EOF
{
    "name": "CUSTOM_DOMAIN"
}
EOF

I am getting the : Domain is missing from list of known domains error.

I also can’t download the ic-domain file from my canister with curl CANISTER_ID.icp0.io/.well-known/ic-domains or through going to the url.

I think my .well-known directory in my assets is not being accessed at all, maybe my vite config is not working properly.

Here is my vite-confing:

/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import environment from 'vite-plugin-environment';
import topLevelAwait from "vite-plugin-top-level-await";
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:4943',
        changeOrigin: true,
      },
    },
  },
  plugins: [
    react(),
    environment('all'),
    topLevelAwait({
      promiseExportName: "__tla",
      promiseImportName: i => `__tla_${i}`
    })
  ],
  test: {
    environment: 'jsdom',
    cache: { dir: '../node_modules/.vitest' },
  },
});

Thank you!

@NathanosDev , @kpeacock

2

I tried modifying the vite-config based on this one, so that maybe it can read the .ic-assets.json.

I modified it to this:

/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import environment from 'vite-plugin-environment';
import topLevelAwait from "vite-plugin-top-level-await";
import { viteStaticCopy } from 'vite-plugin-static-copy';
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:4943',
        changeOrigin: true,
      },
    },
  },
  plugins: [
    react(),
    environment('all'),
    topLevelAwait({
      promiseExportName: "__tla",
      promiseImportName: i => `__tla_${i}`
    }),
    viteStaticCopy({
      targets: [
        {
          src: 'src/assets/.ic-assets.json5',
          dest: '.',
        },
      ],
    }),
  ],
  test: {
    environment: 'jsdom',
    cache: { dir: '../node_modules/.vitest' },
  },
});

But now when I run the project I am getting this error:


✘ [ERROR] "vite-plugin-static-copy" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

    node_modules/esbuild/lib/main.js:1374:27:
      1374 │         let result = await callback({


The plugin "externalize-deps" was triggered by this import

    vite.config.ts:6:31:
      6 │ import { viteStaticCopy } from 'vite-plugin-static-copy';
        ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from /home/enoch/aworkspace/fun/IC-ToDo/mytodo/vite.config.ts
error when starting dev server:
Error: Build failed with 1 error:
3

Did you already try the suggestions here? Troubleshooting | Vite

There can be a few reasons why this error message happens. If the suggestions in the link do not work, then it’s worth checking your tsconfig.json too. Mine for example looks like this:

{
  "compilerOptions": {
    // compilation
    "target": "ESNext",
    "module": "ESNext",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "jsx": "react-jsx",
    "noEmit": true,
    "isolatedModules": true,
    "preserveConstEnums": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "outDir": "dist",
    // resolution
    "baseUrl": ".",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    // type checking
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

The config that I believe is most relevant here is this part:

    "target": "ESNext",
    "module": "ESNext",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],