web-dev-qa-db-fra.com

Client sur le noeud: Uncaught ReferenceError: require n'est pas défini

Donc, j'écris une application avec le combo noeud/express + jade.

J'ai client.js, qui est chargé sur le client. Dans ce fichier, j'ai un code qui appelle des fonctions d'autres fichiers JavaScript. Ma tentative était d'utiliser

var m = require('./messages');

afin de charger le contenu de messages.js (comme je le fais du côté serveur) et plus tard, appeler des fonctions à partir de ce fichier. Cependant, require n'est pas défini du côté client et génère une erreur de la forme Uncaught ReferenceError: require is not defined.

Ces autres fichiers JS sont également chargés au moment de l'exécution sur le client, car je place les liens dans l'en-tête de la page Web. Le client connaît donc toutes les fonctions exportées de ces autres fichiers.

Comment appeler ces fonctions à partir de ces autres fichiers JS (tels que messages.js) dans le fichier client.js principal qui ouvre le socket sur le serveur?

javascriptnode.jssocketsexpresspug
221
MightyMouse

En effet, require() n'existe pas dans le navigateur JavaScript/côté client.

Vous allez maintenant devoir faire des choix concernant la gestion de votre script JavaScript côté client.

Vous avez trois options:

  1. Utilisez la balise <script>.
  2. Utilisez une implémentation CommonJS . Dépendances synchrones comme Node.js 
  3. Utilisez une implémentation AMD . 

Les implémentations côté client CommonJS incluent:

(la plupart d'entre eux nécessitent une étape de compilation avant de déployer)

  1. Browserify - Vous pouvez utiliser la plupart des modules Node.js du navigateur. Ceci est mon préféré.
  2. Webpack - Fait tout (regroupe JS, CSS, etc.). Rendu populaire par la vague de React.js. Notorious pour sa courbe d'apprentissage difficile.
  3. Rollup _ - Nouveau candidat. Utilise les modules ES6. Inclut la capacité de secouer les arbres (supprime le code inutilisé).

Vous pouvez en savoir plus sur ma comparaison de Browserify vs Component . 

Les implémentations de AMD incluent:

  1. RequireJS - Très populaire parmi les développeurs JavaScript côté client. Ce n'est pas mon goût à cause de sa nature asynchrone.

Notez que dans votre recherche pour choisir lequel aller avec, vous allez lire à propos de Bower . Bower ne concerne que les dépendances de packages et n'est pas associé aux définitions de module telles que CommonJS et AMD. 

J'espère que cela aide certains. 

338
JP Richardson

ES6: Dans HTML, incluez le fichier js principal en utilisant l'attribut type="module" ( support du navigateur ):

<script type="module" src="script.js"></script>

Et dans le fichier script.js, incluez un autre fichier comme celui-ci:

import { hello } from './module.js';
...
// alert(hello());

Dans 'module.js', vous devez exporter une fonction/une classe que vous importerez

export function hello() {
    return "Hello World";
}

Travailler exemple ici .

10
Kamil Kiełczewski

Dans mon cas, j'ai utilisé une autre solution.

Comme le projet ne nécessite pas de CommonJs et qu'il doit être compatible ES3 (modules non pris en charge), vous n'avez besoin que de supprimer toutes les instructions export et import de votre code, car votre tsconfig ne contient pas

"module": "commonjs"

Mais utilisez les instructions d'importation et d'exportation dans vos fichiers référencés

import { Utils } from "./utils"
export interface Actions {}

Le code final généré aura toujours (au moins pour TypeScript 3.0) de telles lignes 

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();
1
ydanila

Même si cela ne fonctionne pas, je pense que la meilleure solution est browserify:

-common.js-
module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();
0
Wael Chorfan

Je viens d'un environnement électronique, où j'ai besoin de IPC communication entre un processus de rendu et le processus principal. Le processus de rendu se trouve dans un fichier HTML entre les balises de script et génère la même erreur. La ligne

const {ipcRenderer} = require('electron')

émet le Uncaught ReferenceError: require n'est pas défini

J'ai pu contourner ce problème en spécifiant l'intégration de nœud comme étant vraie lorsque la fenêtre du navigateur (dans laquelle ce fichier HTML est incorporé) a été créée à l'origine dans le processus principal.

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

Cela a résolu le problème pour moi. La solution a été proposée ici . J'espère que cela aide quelqu'un d'autre. À votre santé.

0
Kibonge Murphy