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
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!
first you'll need to install this package to devDependencies:
npm i -D file-loader
yarn add -D file-loader
then you'll need to add the following to "rules" inside the webpack.config :
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},