I have a monorepo that has a NextJS project and a React library. I want to import components from the react project to the nextjs project. So far so good... but when I try to import a component that has a local image in it I get the following error:

Automatic publicPath is not supported in this browser

I understand that I have to put the path of the assets in the webpack config file, but even doing that NextJS can't resolve the images. What am i missing?

I've replicated the error in an public repository so you could see what's happening.

Component library:

import React from "react";

const TestComponent = () => (
  <div>
    <p>Test Component</p>
    <img src={require("./arrow-down.png").default} width="10px" height="10px" />
  </div>
);

export default TestComponent;

NextJS importing the component:

import TestComponent from "react-project";

export default function Home() {
  return (
    <div>
      <TestComponent />
    </div>
  );
}

The project has the following structure -- packages -- nextjs-project -- react-project -- package.json

public repository.

You only need to install the dependencies with yarn (or npm if you like) and build the react library with webpack (yarn build).

I know im missing some theory about images in NextJS. Thank you!