Es posible que el módulo que está intentando implementar no deba ejecutarse en un navegador. Es decir, es solo del lado del servidor.

fs , path u otros módulos nativos del nodo solo se pueden usar dentro del código del lado del servidor, como las funciones "getServerSide". Si intenta usarlo en el cliente, obtiene un error incluso si solo consola.regístrelo. Ese console.log también debería ejecutarse dentro de las funciones del lado del servidor.

Cuando importa "fs" y lo usa en el lado del servidor, next.js es lo suficientemente inteligente como para ver que lo usa en el lado del servidor, por lo que no agregará esa importación al paquete del cliente.

Uno de los paquetes que utilicé me estaba dando este error, lo arreglé con

 module.exports = { webpack: (config, { isServer }) => { if (!isServer) { config.resolve.fallback.fs = false } return config }, }

pero esto estaba lanzando una advertencia en la terminal:

 "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"

Luego traté de cargar el módulo de nodo en el navegador. Copié el "min.js" del módulo de nodo de node_modules y lo coloqué en "public/js/myPackage.js" y lo cargué con Script

 export default function BaseLayout({children}) { return ( <> <Script // this in public folder src="/js/myPackage.js" // this means this script will be loaded first strategy="beforeInteractive" /> </> ) }

Este paquete se adjuntó al objeto de window y en index.js del código fuente de node_modules:

 if (typeof window !== "undefined") { window.TruffleContract = contract; }

Entonces pude acceder a este script como window.TruffleContract . PERO esta no era una manera eficiente.

Si trato de usar fs-extra en Next.js, esto funcionó para mí

 module.exports = { webpack: (config) => { config.resolve.fallback = { fs: false, path: false, stream: false, constants: false }; } }

Pasé horas en esto y la solución también está aquí en Stackoverflow pero en un problema diferente -> https://stackoverflow.com/a/67478653/17562602

Por la presente, pedí permiso a MOD para volver a compartir esto, ya que este problema es el primero que aparece en Google y probablemente más y más personas tropiecen con el mismo problema que yo, así que intentaré ahorrarles algo de sudor.

Entonces, debe agregar esto en su next.config.js

 module.exports = { future: { webpack5: true, // by default, if you customize webpack config, they switch back to version 4. // Looks like backward compatibility approach. }, webpack(config) { config.resolve.fallback = { ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified // by next.js will be dropped. Doesn't make much sense, but how it is fs: false, // the solution }; return config; }, };

Funciona como un encanto para mí.

Recibí este error en mi aplicación NextJS porque me faltaba export en

 export function getStaticProps()

Tuve el mismo problema cuando estaba tratando de usar babel.

Para mí esto funcionó:

#agregue un archivo .babelrc a la raíz del proyecto y defina ajustes preestablecidos y complementos (en mi caso, tuve algunos problemas con las macros de babel, así que las definí)

 { "presets": ["next/babel"], "plugins": ["macros"] }

después de eso, apague su servidor y ejecútelo de nuevo

Tuve este problema exacto. Mi problema era que estaba importando tipos que había declarado en un archivo types.d.ts .

Lo estaba importando así, gracias al autocompletado proporcionado por VSCode.

 import {CUSTOM_TYPE} from './types'

Debería haber sido así:

 import {CUSTOM_TYPE} from './types.d'

En mi caso, creo que el .d era innecesario, así que terminé eliminándolo por completo y cambié el nombre de mi archivo a types.ts .

Por extraño que parezca, se estaba importando directamente a index.tsx sin problemas, pero cualquier archivo/función de ayuda dentro del directorio src me daría errores.

Para mí, el problema era la versión anterior de node.js instalada. Requiere node.js versión 14 y superior. La solución fue ir a la página web de node.js, descargar la última versión y simplemente instalarla. Y luego vuelva a ejecutar el proyecto. ¡Todo funcionó!

Si usa fs , asegúrese de que sea solo dentro de getInitialProps o getServerSideProps . (cualquier cosa incluye renderizado del lado del servidor).

Es posible que también deba crear un archivo next.config.js con el siguiente contenido para que se cree el paquete del cliente:

Para webpack4

 module.exports = { webpack: (config, { isServer }) => { // Fixes npm packages that depend on `fs` module if (!isServer) { config.node = { fs: 'empty' } } return config } }

Para webpack5

 module.exports = { webpack5: true, webpack: (config) => { config.resolve.fallback = { fs: false }; return config; }, };

Nota: para otros módulos como path , puede agregar múltiples argumentos como

 { fs: false, path: false }

Para mí, borrando el caché npm cache clean -f

y luego la actualización de la versión del nodo a la última versión estable (14.17.0) funcionó