Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript require doesn't work inside html

I'm writing html code that involves js code. Below a simple example:

<!DOCTYPE html PUBLIC >
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
    var net     = require('net');
    var sleep   = require('sleep');
    var element = document.getElementById("demo");
    element.innerHTML = "Hello JavaScript!";
    sleep(1)
</script> 

Unfortunately "Hello JavaScript!" doesn't appear when I browse the above file with my browser. Looking inside the debug console I can see the folowing message:

ReferenceError: require is not defined

So it seems that require is not defined inside the html code but I've written a small test.js file as below:

var net = require('net');
var sleep = require('sleep');
sleep.sleep(1)

and then I run it with

node test.js.

No errors, everything works fine, require is available and sleep and net as well. Why the code inside html file doesn't work?

like image 365
dzuliani Avatar asked Apr 24 '18 21:04

dzuliani


People also ask

Can we use require in HTML?

To include the Require. js file, you need to add the script tag in the html file. Within the script tag, add the data-main attribute to load the module. This can be taken as the main entry point to your application.

Why require is not working in JavaScript?

This usually happens because your JavaScript environment doesn't understand how to handle the call to require() function you defined in your code. Here are some known causes for this error: Using require() in a browser without RequireJS.

Can you put JavaScript inside HTML?

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.

Can you use require in browser JavaScript?

Inside your main-module (and any sub-module, of course) you can use require() as you know it from CommonJS/NodeJS. The complete docs and the code can be found on GitHub. how you use a function that is in main.


2 Answers

Javascript is not the same as node.js

require() is not a part of JavaScript standard and is not supported by browsers out of the box, it is the node.js module system.

You might need to directly include the modules; some of the modules might not work in the browser sandbox context.

Also, tools such as http://browserify.org/ might be useful.

like image 167
Peteris Avatar answered Oct 11 '22 15:10

Peteris


The reason you are getting ReferenceError: require is not defined is because nowhere in your html page is Require included. Require does not come with your standard JavaScript library. You must include the file on your page so it can be loaded and used.

This can be done by simply adding <script src="myJS.js"></script> in the <head> or <body> tags. The myJS.js file will, of course, be replaced by the require.js file.

The reason it works when you run with node is because Node already has its own module loader.

like image 43
cela Avatar answered Oct 11 '22 13:10

cela