Next js Dynamic Import for Multi tanant application

[Ramprasadya]

Summary

I am create a multi tanant next js application that help me to create multiple site into one single app but different builds file

now i just wanted to know - if under the folder router i have imported a component and under the fist site it working but for second site its not becouse in second site that component not exist .

So i am searching how can i show 404 page insted of throwing error

here is my code

this is for first site

import { ConatctUS } from '@/config/site'
import NotFound from 'app/not-found'
import React from 'react'

const page = () => {
    
  return (
    <>
   { ConatctUS ? <ConatctUS />: <NotFound/>}
    </>
  )
}

export default page

getting error

Module '"@/config/site"' has no exported member 'ConatctUS'. Did you mean to use 'import ConatctUS from "@/config/site"' instead?

so please help me to fix this- your one reply can help me alot

Additional information

root/
│
├── app/
│
├── config/
│   ├── site.capturetrip.ts
│   ├── site.holiday2cherish.ts
│   └── site.ts
│
├── hooks/
│
├── lib/
│
├── node_modules/
│
├── scripts/
│   ├── select-site.js
│   └── verify-build-isolation.js
│
├── shared/
│
├── sites/
│   ├── capturetrip/
│   └── holiday2cherish/
│
├── src/
│
├── utils/
│
└── .gitignore

folder structure

Example

No response

[icyJoseph]

Do you mean like, you wanna check if the config does indeed include the ContactUs, otherwise render NotFound? I guess dynamic import via import("path-to-the-config") could work? or something like this:

https://github.com/vercel/swr/blob/acd241eb66d2a4381afe1d51a977809079f4c67a/src/_internal/utils/env.ts#L1C1-L5C1

import React, { useEffect, useLayoutEffect } from 'react'
import { hasRequestAnimationFrame, isLegacyDeno, isWindowDefined } from './helper'

export const IS_REACT_LEGACY = !React.useId