First off I don't know if this is the right place to open this issue, apologies if it isn't.
I am trying out React Server Components with Next.js v12.2.3. This is the workflow I am trying to do:
Directory structure:
// pages\blog\[slug].server.tsx
import type { GetStaticPropsContext } from "next";
import Image from "next/image";
import * as POST_1 from "../../content/post-1/index.server";
import * as POST_2 from "../../content/post-2/index.server";
const slugToModule = {
"post-1": POST_1,
"post-2": POST_2,
};
type Props = {
slug: string;
};
export default function BlogPostPage({ slug }: Props) {
// @ts-expect-error
const { default: MDXContent, meta } = slugToModule[slug];
return (
<main>
<h1>{meta.title}</h1>
{meta.coverImage && <Image src={meta.coverImage.src} alt={meta.coverImage.alt} />}
<MDXContent />
</main>
);
}
export async function getStaticPaths() {
const slugs = Object.keys(slugToModule);
return {
paths: slugs.map((slug) => ({
params: { slug },
})),
fallback: false,
};
}
type Params = {
slug: string;
};
export async function getStaticProps({ params }: GetStaticPropsContext<Params>) {
return {
props: { slug: params!.slug },
};
}
// content\post-1\index.server.tsx
import coverImage from "./cover-image.jpg";
export const meta = {
title: "Post 1",
coverImage: {
src: coverImage,
alt: "Alt description",
},
};
export default function Content() {
return (
<main>
<p>This is post 1 content.</p>
</main>
);
}
I am getting the following error:
❯ npm run build
> test-rsc-next-image@0.1.0 build
> next build
warn - You have enabled experimental features (runtime, serverComponents) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - SWC minify release candidate enabled. https://nextjs.link/swcmin
info - Linting and checking validity of types
warn - You are using the experimental Node.js Runtime with `experimental.runtime`.warn - You have experimental React Server Components enabled. Continue at your own risk.
info - Creating an optimized production build
Failed to compile.
C:Usersmiolivercodepersonal est-rsc-next-imagecontentpost-1cover-image.jpg
Module build failed: UnhandledSchemeError: Reading from "C:Usersmiolivercodepersonal est-rsc-next-imagecontentpost-1cover-image.jpg" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "c:" URIs.
at C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57269:25
at Hook.eval [as callAsync] (eval at create (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:23385:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:23187:14)
at Object.processResource (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57266:8)
at processResource (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:20797:11)
at iteratePitchingLoaders (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:20748:10)
at runLoaders (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:20974:2)
at NormalModule._doBuild (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57256:3)
at NormalModule.build (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57400:15)
at C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:31406:12
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=next%2Fimage&modules=C%3A%5CUsers%5Cmioliver%5Ccode%5Cpersonal%5Ctest-rsc-next-image%5Ccontent%5Cpost-1%5Ccover-image.jpg&runtime=nodejs&ssr=false&name=pages%2Fblog%2F%5Bslug%5D&server=true!
> Build failed because of webpack errors
If I remove the static image import/export from content\post-1\index.server.tsx tha it builds fine!
First off I don't know if this is the right place to open this issue, apologies if it isn't.
I am trying out React Server Components with Next.js
v12.2.3
. This is the workflow I am trying to do:Directory structure:
I am getting the following error:
If I remove the static image import/export from
content\post-1\index.server.tsx
tha it builds fine!