Estoy construyendo en la aplicación Next.js y cuando instalo / importo Plaiceholder (para generar imágenes de marcador de posición), aparece el siguiente error: Module not found: Can't resolve 'child_process'
Entiendo que este mensaje de error significa que webpack5 está intentando agrupar paquetes de nodos que no están disponibles para el cliente. Pero no tengo claro por qué está haciendo esto. No he personalizado ninguna de las configuraciones del paquete web, y no puedo encontrar ninguna mención de este problema en los documentos de Plaiceholder. ¿Cómo lo soluciono?
NOTA: Quiero que se cree la URL de datos base64 durante la compilación, de modo que esté disponible tan pronto como se cargue la página (no se obtenga de forma asíncrona en el tiempo de ejecución).
Aquí está mi next.config.js
module.exports = { reactStrictMode: true, }; Mi paquete.json solo tiene scripts , dependencies y devDependencies (nada para cambiar la resolución del módulo)
En caso de que sea relevante, aquí hay un ejemplo simplificado usando Plaiceholder:
import Image from "next/image"; import { getPlaiceholder } from "plaiceholder"; import React, { useState } from "react"; ... const { base64 } = await getPlaiceholder(imgUrl); ... return (<Image src={imgUrl} placeholder="blur" blurDataURL={base64} />);Parece que placeholder no es adecuado para la representación del lado del cliente. Creo que ese paquete es para el entorno Node.js. Es por eso que recibe este error cuando intenta renderizar su componente en el lado del cliente.
Para resolver este problema, debe mover import { getPlaiceholder } from 'plaiceholder' a la sección API de NextJS. Luego puede llamar a esa API con sus datos de URL en el cuerpo. Luego obtenga la base64.
/api/getBase64.js
import { getPlaiceholder } from "plaiceholder"; export default async (req, res) => { const { body } = req; const { url } = body; const { base64 } = getPlaiceholder(url); res.status(200).send(base64); };/componente.js
import Image from "next/image"; import React, { useState, useEffect } from "react"; const [base64, setBase64] = useState() useEffect(() => { (async () => { const _base64 = await fetch.post('/api/getBase64', {url: imgUrl}); // wrote for demonstration setBase64(_base64); })() }) return (<Image src={imgUrl} placeholder="blur" blurDataURL={base64} />); Sé que blurDataURL no estará definido hasta que obtenga los datos, pero esta es la forma en que puede usar la biblioteca plaiceholder para administrar sus imágenes. Debe importarse solo para el entorno NodeJS. Si no le gusta este enfoque, puede intentar encontrar otra biblioteca que también funcione para el entorno del navegador (cliente)
ACTUALIZADO según el comentario:
Si desea generar este base64 en el momento de la compilación, puede usar getStaticProps en las páginas que usan este componente de Image . NextJS es lo suficientemente inteligente como para comprender qué bibliotecas se utilizan en el lado del cliente o en el lado del servidor. Así que puedes hacer esto:
import { getPlaiceholder } from "plaiceholder"; // place it at the root of file. This will not be bundled inside of client-side code export async function getStaticProps(context) { const { base64 } = await getPlaiceholder(imgUrl); return { props: { base64 }, // will be passed to the page component as props } } De esta forma, al usar getStaticProps , la página se creará en el momento de la compilación. Puede obtener el accesorio base64 dentro de la página que usa el componente de imagen y pasar ese accesorio a blurDataURL . Además, también puede usar este enfoque con getServerSideProps .
Esto es del sitio web de NextJS:
Nota: Puede importar módulos en el ámbito de nivel superior para usarlos en getServerSideProps. Las importaciones utilizadas en getServerSideProps no se agruparán para el lado del cliente.
https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
Es necesario instalar el complemento para la dependencia de Next Js y configurar la siguiente configuración basada en Plaiceholder Docs para usar la función getPlaiceholder() en getStaticProps como la respuesta de @oakar.
npm i @plaiceholder/next const { withPlaiceholder } = require("@plaiceholder/next"); module.exports = withPlaiceholder({ // your Next.js config });