Loading failed for <scripts> node js

Question

I try to use my Room.js in my index.html on the client side of my Node.js server(v10.15.0 + express, socket.io). I keep getting errors. When I load it via script tags in the index.html file, the console gives me a

Loading failed for "script" with .. "Room.js".
ReferenceError: Room is not defined

When I use require in the app.js like this:

const roomObj = require("./client/js/Room.js");
const Room = new roomObj();

I only get this Error

ReferenceError: Room is not defined

Room.js

module.exports = Room;
function Room(name, o, obs, ep){
 this.name = name;
 this.o = o;
 this.obs = obs;
 this.getSth = function(ep){}
 this.loadRoom = function(){}
}

index.html

<script src="./js/Room.js"></script> 
<script>
 function loadRoom(){
   let room = new Room(name, o, obs, ep);
   room.loadRoom();
 }
</script>

Update

Getting 404 Error for Room.js

When accessing localhost:2000/js/ and following subdirectories I got the

Cannot GET /js/ and the same result for every other Path

Solution: (from Comments in answer)
replaced line 5-7 in app.js with

app.use(express.static(__dirname + "/client"));

Answer 1

First, check if Room.js is in the same directory as index.html on the web server. From your first error, it looks like the script file was not found.

If not, move them to the same directory or correct script tag in inde.html. If this won't work, see below for another possible solution.

Update after comment:

If JS file is in ./js/Room.js, you need to point the script in HTML file to it.

<script src="./js/Room.js"></script> 
<script>
 function loadRoom(){
   let room = new Room(name, o, obs, ep);
   room.loadRoom();
 }
</script>

Update after discussion:

The server (Express) loaded index.html in root and client in the subdirectory of the web server.

You can remove lines 5-7 (from your link) and replace them with app.use(express.static(__dirname + "/client"));. This will load client to root of the web server.

Note that you would probably still get below error.

---

In the browsers, module is not defined, so module.exports would give the error and script will fail.

You should remove line module.exports = Room; from Room.js so the file will load correctly in the browser. But then it won't work in Node.js script, because function Room will not be exported from the file.

If you need to use the same file in Node.js and browser, I recommend you to use Gulp, Webpack, Browserify, Parcel or other web application bundler.