Webpack error when trying to use a component that statically imports an image

[michaeloliverx]

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  

> [email protected] 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!