Module introuvable: Impossible de résoudre «FS» dans l'application Next.js

Il se peut que le module que vous essayez d'implémenter n'est pas censé s'exécuter dans un navigateur. C'est à dire. il est uniquement côté serveur.

fs , path ou d'autres modules natifs de nœud ne peuvent être utilisés que dans le code côté serveur, comme les fonctions "getServerside". Si vous essayez de l'utiliser dans le client, vous obtenez une erreur même, vous vous consolez simplement. , next.js est suffisamment intelligent pour voir que vous l'utilisez dans le côté du serveur, il n'ajoutait donc pas cette importation dans le bundle client

l'un des packages que j'ai utilisés me donnait cette erreur, j'ai corrigé ceci Avec

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

mais cela a lancé un avertissement sur le terminal:

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"
      />
    </>
  )
}

puis j'ai essayé de charger le module de nœud sur le navigateur . J'ai copié le "min.js" du module de nœud du node_modules et placé dans "public / js / mypackage.js" et le charger avec le script

"Critical dependency: require function is used in a way in which

 dependencies cannot be statically extracted"

Ce package était Jugé à Fenêtre Objet et dans Node_Modules Source Code's Index.js:

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

    return config
  },
  
}

afin que je puisse accéder à ce script en tant que window.truffleContract . Mais ce n'était pas un moyen efficace.

Pour moi, effacer le cache NPM Cache Clean -f

puis mise à jour de la version nœud à la dernière version stable (14.17.0) a fonctionné

Si vous utilisez fs , assurez-vous que ce n'est que dans getServersIDEPROPS . (Tout inclut le rendu côté serveur).

Vous devrez peut-être également créer un fichier next.config.js avec le contenu suivant pour obtenir le bundle client:

Pour webpack4

{
  fs: false,
  path: false
}

pour webpack5

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

    return config;
  },
};

Remarque : Pour d'autres modules tels que path , vous pouvez ajouter plusieurs arguments tels que

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

    return config
  }
}

Pour moi, le problème était l'ancienne version du Node.js installé. Il nécessite Node.js version 14 et supérieur. La solution consistait à accéder à la page Web Node.js, à télécharger la dernière version et à l'installer. Puis réécoute le projet. Tout a fonctionné!

J'ai eu le même problème lorsque j'essayais d'utiliser Babel.

Pour moi, cela a fonctionné:

#add a .babelrc et définir les préréglages et les plugins (Dans mon cas, j'ai eu quelques problèmes avec les macros de Babel, donc je les ai définis)

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

Après cela, arrêtez votre serveur et exécutez il encore

J'ai eu ce problème exact. Mon problème était que j'importais des types que j'avais déclarés dans un fichier Types.D.ts .

Je l'importais comme ça, grâce à l'autofill fourni par VScode.

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

Cela aurait dû être comme ceci:

import {CUSTOM_TYPE} from './types'

Dans mon cas, je pense que le .d était inutile, j'ai donc fini par le supprimer entièrement et renommé mon fichier dans types.ts .

Assez bizarre, il était importé directement dans index.tsx sans problème, mais les fichiers / fonctions d'assistance dans le répertoire src me donneraient des erreurs.

J'ai obtenu cette erreur dans mon application NextJS parce que je manquais export dans

export function getStaticProps()

Exemple reproductible minimal

Un exemple minimal propre sera bénéfique pour les débutants de Webpack car la division automatique en fonction de l'utilisation est si époustouflante.

Travailler bonjour bonjour de référence mondiale :

pages / index.js

// Server-only code.

const fs = require('fs')

export function makeGetStaticProps(isBlue) {
  return () => {
    return { props: {
      fs: Object.keys(fs).join(' '),
      isBlue,
    } }
  }
}

• front.js et front / * : fichiers frontaux + backend. Ceux-ci sont sûrs pour le frontend. Et le backend peut faire tout ce que le frontend peut faire (nous faisons SSR non?) Donc, ceux-ci sont également utilisables du backend.

  C'est peut-être l'idée derrière le dossier "Composants" conventionnel dans de nombreux exemples officiels. Mais c'est une mauvaise réputation, car ce dossier doit non seulement contenir des composants, mais aussi toutes les aides / constantes non composantes de la bibliothèque qui seront utilisées à partir du frontend.

• back.js et back / * (ou alternativement tout ce qui en dehors de front / * ): backend uniquement les fichiers. Ceux-ci ne peuvent être utilisés que par le backend, les importations sur Frontend entraînera l'erreur

Si vous essayez d'utiliser FS-Extra dans Next.js, cela a fonctionné pour moi

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

  }
}

J'ai passé des heures là-dessus et la solution est également là sur Stackoverflow mais sur différents problèmes -> https://stackoverflow.com/ A / 67478653/17562602

Par la présente, j'ai demandé l'autorisation de mod pour remodeler cela, car ce problème est le premier à apparaître sur Google et probablement de plus en plus de personnes trébucheraient sur le même problème que moi, Je vais donc essayer de leur sauver des sueurs

soo, vous devez l'ajouter dans votre prochain.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;
  },
};

Cela fonctionne comme Un charme pour moi

J'ai rencontré cela dans une application NextJS parce que j'avais défini une nouvelle fonction d'assistance directement en dessous de getServersIDEPROPS (), mais je n'avais pas encore appelé cette fonction à l'intérieur de getServersIDEPROPS ().

Je ne sais pas pourquoi cela a créé un problème, mais cela l'a fait. Je ne pouvais que le faire fonctionner en appelant cette fonction, en le supprimant ou en le commentant.