参考错误：找不到变量：在导入节点模块时需要<script> tag

Question

Having trouble importing a Node Module using the <script> tag from the HTML.

Folder structure:

.
├── dist/home.html
├── src/html/home.html
└── node_modules
    └── @group
        ├── sub1/...
        └── sub2/...
            └── src/MyModule.js

The module, "MyModule.js", uses other sub-packages (eg sub1) by using "require" like so:

const sub1 = require('@group/sub1/x')
...
class MyModule extends XX { ... }
module.exports = ...

I tried to import it manually like this:

<script type="module" src="/node_modules/@group/sub2/src/MyModule.js"></script>

But it results in ReferenceError: Can't find variable: require .

Is there a solution for this?

FYI :

• Gulp is used to build the /dist folder, but an error currently prevents compiling JS files. Using <script> is a temporary workaround.
• The module comes with an ES2015 precompiled version ( @group/sub2/dist/prebuilt.js ), if it helps.

Answer 1

I'm able to reproduce the error in the browser's console:

code

const sub1 = require('test')

error

Uncaught ReferenceError: require is not defined
    at <anonymous>:1:14

This error happens because require is only defined in node. https://nodejs.org/api/all.html#addons_loading_addons_using_require

The filename extension of the compiled Addon binary is .node (as opposed to .dll or .so). The require() function is written to look for files with the .node file extension and initialize those as dynamically-linked libraries.

When calling require(), the .node extension can usually be omitted and Node.js will still find and initialize the Addon. One caveat, however, is that Node.js will first attempt to locate and load modules or JavaScript files that happen to share the same base name. For instance, if there is a file addon.js in the same directory as the binary addon.node, then require('addon') will give precedence to the addon.js file and load it instead.

---

Here is a general example of how to load an external module in a browser https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Standard_Import

The module: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

The main program: main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });