i’ve been trying to build a production verison but getting errors with this new next.js loader
yarn build
yarn run v1.22.11
$ next build
info - Using webpack 5. Reason: Enabled by default <https://nextjs.org/docs/messages/webpack5>
info - Checking validity of types
./pages/home.js
23:6 Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
info - Need to disable some ESLint rules? Learn more here: <https://nextjs.org/docs/basic-features/eslint#disabling-rules>
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data ..USING cache /Users/komocode/Resilio Sync/Workspace/cedar-frontend/.next/.plasmic/plasmic-dqrDa2vAu4Y4gxvh2NoZGS@-preview-cache.json
USING cache /Users/komocode/Resilio Sync/Workspace/cedar-frontend/.next/.plasmic/plasmic-dqrDa2vAu4Y4gxvh2NoZGS@-preview-cache.json
USING cache /Users/komocode/Resilio Sync/Workspace/cedar-frontend/.next/.plasmic/plasmic-dqrDa2vAu4Y4gxvh2NoZGS@-preview-cache.json
USING cache /Users/komocode/Resilio Sync/Workspace/cedar-frontend/.next/.plasmic/plasmic-dqrDa2vAu4Y4gxvh2NoZGS@-preview-cache.json
PlasmicLoader: doing a fresh fetch...
info - Collecting page data
error - Conflicting paths returned from getStaticPaths, paths must unique per page.
See more info here: <https://nextjs.org/docs/messages/conflicting-ssg-paths>
path: "/home" from page: "/[[...plasmicLoaderPage]]" conflicts with path: "/home"
path: "/main" from page: "/[[...plasmicLoaderPage]]" conflicts with path: "/main"
error Command failed with exit code 1.
info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.
//plasmic-init.js
import {
initPlasmicLoader
} from "@plasmicapp/loader-nextjs";
import Home from "./pages/home"
import Main from "./pages/main"
export const PLASMIC = initPlasmicLoader({
projects: [{
//....
}, ],
preview: true
});
PLASMIC.substituteComponent(Home, "Home")
PLASMIC.substituteComponent(Main, "Main")
//[..catchall].jsx
import * as React from 'react';
import { PlasmicComponent, ComponentRenderData, PlasmicRootProvider, initPlasmicLoader } from '@plasmicapp/loader-nextjs';
import { GetStaticPaths, GetStaticProps } from 'next';
import Error from 'next/error';
import { PLASMIC } from '../plasmic-init';
/**
* Use fetchPages() to fetch list of pages that have been created in Plasmic
*/
export const getStaticPaths = async () => {
const pages = await PLASMIC.fetchPages();
return {
paths: pages.map((page) => ({
params: { catchall: page.path.substring(1).split('/') }
})),
fallback: false
};
};
/**
* For each page, pre-fetch the data we need to render it
*/
export const getStaticProps = async (context) => {
const { catchall } = context.params ?? {};
// Convert the catchall param into a path string
const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
if (plasmicData) {
// This is a path that Plasmic knows about; pass the data
// in as props
return {
props: { plasmicData }
};
} else {
// This is some non-Plasmic catch-all page
return {
props: {}
};
}
};
/**
* Actually render the page!
*/
export default function CatchallPage(props) {
const { plasmicData } = props;
if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
return <Error statusCode={404} />;
}
return (
// Pass in the data fetched in getStaticProps as prefetchedData
<PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
{
// plasmicData.entryCompMetas[0].name contains the name
// of the component you fetched.
}
<PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
</PlasmicRootProvider>
);
}
//home.js
import { PlasmicRootProvider, PlasmicComponent} from '@plasmicapp/loader-nextjs'
import { PLASMIC } from '../plasmic-init'
import useTransformValue from '../hooks/useTransformValue'
// import Layout from '../components/Layout'
import { useRouter } from "next/router"
import { useState, useEffect } from 'react'
// export const getStaticProps = async () => {
// const plasmicData = await PLASMIC.fetchComponentData('Home')
// return {
// props: {
// plasmicData
// }
// }
// }
export default function Page(props) {
const router = useRouter()
const transformValue = useTransformValue()
const [showTransition, setShowTransition] = useState(false)
useEffect(() => {
router.prefetch('/main')
}, [])
return (
<PlasmicRootProvider loader={PLASMIC} prefetchedData={props.plasmicData}>
<PlasmicComponent
component="Home"
forceOriginal
componentProps={{
stage: {
style: { transform: transformValue, WebkitBackfaceVisibility: "hidden", MozBackfaceVisibility: "hidden", msBackfaceVisibility: "hidden" }
},
transitionBox: {
props: {
children:
<>
{showTransition ? <video onEnded={() => router.push("/main")} autoPlay className="overlayTest" muted width="100%" height="100%" src={"<https://twcdn.s3.us-west-2.amazonaws.com/cedar/assets/videos/entrancestage.mp4>"}/> : null}
</>
}
},
nextButton: {
props: {
onClick: (e) => {
// console.log("next")
setShowTransition(true)
// setTimeout(() => {
// console.log("timedout")
// }, 5000);
}
}
}
}}/>
</PlasmicRootProvider>
)
}
// Page.getLayout = function getLayout(page) {
// return (
// <Layout>
// {page}
// </Layout>
// )
// }
Hi! The new loader no longer detect whether there’s a conflicting path (between your own /main and the one defined in Plasmic). In the catch all page, in getStaticPaths, just filter out the paths that you have a conflict for (/main and /home)