Tengo un monorepo que tiene un proyecto NextJS y una biblioteca React. Quiero importar componentes del proyecto de reacción al proyecto nextjs. Hasta ahora todo bien... pero cuando trato de importar un componente que tiene una imagen local, aparece el siguiente error:
PublicPath automático no es compatible con este navegador
Entiendo que tengo que poner la ruta de los activos en el archivo de configuración del paquete web, pero incluso haciendo eso, NextJS no puede resolver las imágenes. ¿Qué me estoy perdiendo?
He replicado el error en un repositorio público para que puedas ver lo que sucede.
Biblioteca de componentes:
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 importando el componente:
import TestComponent from "react-project"; export default function Home() { return ( <div> <TestComponent /> </div> ); }El proyecto tiene la siguiente estructura -- paquetes -- nextjs-project -- react-project -- package.json
Solo necesita instalar las dependencias con yarn (o npm si lo desea) y compilar la biblioteca de reacción con webpack (construcción de hilo).
Sé que me falta algo de teoría sobre las imágenes en NextJS. ¡Gracias!
primero deberá instalar este paquete en devDependencies:
npm i -D file-loader yarn add -D file-loaderentonces deberá agregar lo siguiente a las "reglas" dentro de webpack.config:
{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], },