-1

I'm new to node js so please forgive me if I say something wrong. I want to create a project and test it locally. So I've created a node js project with (in same directory):

  1. app.js --> where I create the localhost:8080
  2. index.html --> my html main page
    • within this, I've a call to test.js script

Those are my files:

app.js

const express = require('express');
const app = express();

port = 8080;
app.use(express.static(__dirname));
app.listen(port, function(){
    console.log('Server in ' + port);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="test.js"> </script>
</body>
</html>

test.js

import axios from 'axios'

// Non important stuff

But when I try to import npm libraries to test.js script, as shown right above, I get this error

Uncaught TypeError: Failed to resolve module specifier "express".
 Relative references must start with either "/", "./", or "../".

And if I try to use require, it shows me this error:

// test.js:1 ==> const axios = require('axios')

Uncaught ReferenceError: require is not defined
    at test.js:1
(anonymous) @ test.js:1

EDIT CHANGED MY DIRECTORY My folder is this:

project

I've changed my directory but still remains the same problem

Previous question: Why is showing me that error? What am I doing wrong?

Omar
  • 1,029
  • 2
  • 13
  • 33
  • Did you install the Axios package? – MikeMapanare Sep 22 '21 at 12:15
  • @MikeMapanare yes i did with ´npm i axios´ – Omar Sep 22 '21 at 12:20
  • Could you add your package.json file – Mythos Sep 22 '21 at 12:30
  • Oi hol'up... you're importing your npm packages into your browser? You're not supposed to do that! – Mythos Sep 22 '21 at 12:32
  • suggestion: don't serve pages out of the same folder your server is in. Your node modules and `app.js` are "server side" and `index.html` should be "client side". At the moment the html page has access to node modules (and `app.js`) directly which might lead to a lot of confusion about what goes where. Create a subfolder called 'public' (say) and get express.static to only serve pubic pages. – traktor Sep 22 '21 at 12:33
  • if you want to test the node js app use Postman to test it. If you want to call the api from frontend you can use [httprequests](https://www.w3schools.com/xml/ajax_xmlhttprequest_create.asp) in javascript – Tharunkumar Sep 22 '21 at 12:49
  • @traktor sorry for bothering you, but how can i use `axios` library in `test.js` if I can import in it? – Omar Sep 22 '21 at 15:06
  • The simplest is to follow the answer from @Mythos - include `axios.min.js` from a CDN in `index.html` and place script tags to include `test.js` (which imports axios) after it. Theoretically you could extend the _server_ code to support serving axios from `serverPath/node_modules/axios/dist/axios.min.js` but I'm not sure it's the greatest idea and suggest proceeding further along your learning curve without it at this stage. – traktor Sep 23 '21 at 02:56

1 Answers1

1

require is not a built-in javascript function. It is provided by node.js which is server-side runtime environment for javascript. You are not supposed to load npm packages directly into a browser.

If you want to use axios package in a browser environment, you can load it from CDN (or download it and host it locally with a script tag).

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Mythos
  • 1,378
  • 1
  • 8
  • 21
  • how could I use a library in the client side then? only with this format? – Omar Sep 22 '21 at 15:27
  • I told you how to use `axios`. It is available as npm package and for browser both. If you want to use a library that's only available as npm package, you can try something like [Browserify](https://browserify.org/). See this [SO question](https://stackoverflow.com/questions/35071937/use-npm-package-on-client-side) – Mythos Sep 22 '21 at 20:26