Menu
I'm getting started with web development and am having trouble importing modules that I've installed using npm i MODULE -S into a my .html within a script. My file structure resembles:
SETUP:
project
|_ node_modules
|_ public
| |_ css
| |_ js
| | |_ libs
| | |_ index.mjs
| |_ index.html
|_ server
|_ server.mjs
the index.html file is very simple and resembles:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSON and AJAX</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Objects</button>
</header>
<div id="animal-info"></div>
<script type="module" src="js/index.mjs"></script>
<div id="msgid"></div>
</body>
</html>
and the index.mjs file:
import $ from 'jquery';
and for completness the server.mjs file
// const path = require('path');
import path from 'path';
import express from 'express';
const app = express();
const __dirname = path.resolve();
const publicPath = path.join(__dirname, '/public');
app.use(express.static(publicPath));
const port = process.env.PORT || 8080;
app.set('port', port);
app.listen(app.get('port'), () => {
console.log(`listening on port ${port}`);
});
PROBELM
when I run node --experimental-modules server/server.mjs my page loads and I'm able to visit it in localhost:8080, but when I open the developer tools in chrome I'm presented with the following error:
Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".
Attempted resolution
1) I've changed to import statement in the index.mjs file to be:
import $ from '.jquery';
import $ from './jquery';
'import $ from '../../node_modules/jquery';
which output the following message:
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found)
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found)
GET http://localhost:49160/node_modules/jquery net::ERR_ABORTED 404 (Not Found)
2) I've attempted to copy the the jquery folder from the node_modules directory into the libs directory and rerun so that index.js only has the following code:
import $ from './libs/jquery';
but I get the following error:
GET http://localhost:49160/js/libs/jquery/ net::ERR_ABORTED 404 (Not Found)
EXTRA
When I follow the documentation on the Mozilla developer page and develop my own modules everything works fine, but when I try with thrid party modules I am presented with a series of errors.
255
TLDR;
import $ from '/js/libs/jquery/dist/jquery.js'
or
import $ from './libs/jquery/dist/jquery.js'
There are two different problems in your two attempts.
import $ from 'jquery';
This sort of import by name will not work because your browser doesn't know where to search for jquery. Depending on the browser, if you have a jquery.js file in the root (/public) of your server, it might work, but no guarantees.
import $ from '.jquery';
import $ from './jquery';
'import $ from '../../node_modules/jquery';
These are all, unfortunately, the wrong path. ES6 modules are loaded from the file, not from a directory, and package.json is ignored. So all of these would need dist/jquery.js on the end to stand a chance. Also, based on your directory structure, none are correct (assuming jquery dir is in /public/js/libs). The second one is the closes but is missing ./libs at the beginning.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
