Siter Deployment error.

[Sunil Gupta]

Hi @jasondev01 i tried deploying the code to vercel but i recieved the below error can u help me in this matter.

Build error occurred
--
--Error: You cannot use different slug names for the same dynamic path ('episode' !== 'id').
--at handleSlug (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:94:31)
--at UrlNode._insert (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:131:17)
--at UrlNode._insert (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:142:40)
--at UrlNode._insert (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:142:40)
--at UrlNode._insert (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:142:40)
--at UrlNode.insert (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:13:14)
--at /vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:165:46
--at Array.forEach ()
--at getSortedRoutes (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:165:21)
--at /vercel/path0/node_modules/next/dist/build/index.js:616:65
--error Command failed with exit code 1.
--info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
----------Error: Command "yarn run build" exited with 1------------

[jason]

Hi, my bad. I should have not put the deployment button there since you need to configure first the NEXT_PUBLIC_URL on the environment variable. The best course of action you can do is clone the repo

1. git clone https://github.com/jasondev01/soma-v2.0.git
2. then yarn install or npm install (before you use this command, you need to delete/remove the yarn.lock first
3. rename .env.sample to .env
4. comment out every function calls from the pages that calls the utils functions that lets you connect to the api route handlers also comment out the components that receives data from that response from the function call
5. then commit/push this to your own repo (4 and 5 are the most cumbersome step, apologies again)
6. deploy and setup a domain name on the vercel settings
7. setup the environment variables to that same settings (refer to the .env)
8. uncomment everything you commented out, commit/push the changes and deploy.

Hope this helps.

[Sunil Gupta]

Hey @jasondev01 iam new to coding can you tell me which files i have to change cause according to step 4 i need to change something but i didn't get what i need to change can u elaborate pls.

also can u send the link to kevin.rocks api documentation.

[jason]

You have to navigate to

1. app > page.tsx
2. app > anime > [anime] > page.tsx
3. app > anime > 'watch' > [id] > page.tsx

comment all fetching there

[Sunil Gupta]

hey @jasondev01 after commenting out the fetching code the issue still presisits. deleted the yarn.lock file. commented out utils>getanimes the whole code i commented out the whole code in getanimes file. did the same with the above mentioned files to check if the still accours or not.
but the error is still the same.
what can i do next.

[jason]

Bro, you dont need to comment out the get-anime.ts just the components/pages that's calling for them. also after deleting the yarn.lock you need to run npm install and for commenting out the functions do it like this:

for example i have this:

`export default async function Home() {
const [ topAiring, recent, popular ] = await Promise.all([
getTopAiring(),
getRecent(),
getPopular()
])

return (
    <main>
        <Banner data={topAiring}/>
        <Watched />
        <Recent data={recent}/>
        <TopAiring data={topAiring}/>
        <Popular data={popular}/>
        <TopSeasonal />
    </main>
)

}`

just comment them like this:

`export default async function Home() {
// const [ topAiring, recent, popular ] = await Promise.all([
// getTopAiring(),
// getRecent(),
// getPopular()
// ])

return (
    <main>
        //<Banner data={topAiring}/>
        <Watched />
        // <Recent data={recent}/>
        // <TopAiring data={topAiring}/>
        // <Popular data={popular}/>
        // <TopSeasonal />
    </main>
)

}`

and do the same with

1. app > anime > [anime] > page.tsx
2. app > anime > watch > [id] > page.tsx

if this doesnt work for you either, you can directly contact me on discord @jiison