javascript - ES6 Importing npm module

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=".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 pletness 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.

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./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 pletness 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

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.

Share Improve this question asked Feb 10, 2019 at 23:57 Lukasz 2,61611 gold badges42 silver badges58 bronze badges

HTTP 404 has nothing to do with modules - your file is not available by the path you're trying to load from. – zerkms Commented Feb 11, 2019 at 0:01
Seeing you are very new to web development why are you wasting your time learning a legacy library like jQuery? You should be spending your time learning a modern web development framework like Angular, React or Vue. Do not waste your time learning such an outdated method. – Adrian Brand Commented Feb 11, 2019 at 1:00
@Adran Brand, the goal is to learn React. I've just picked jQuery as an example module thinking it would make the above explanation easier, but I'm unable to import any other thrid party module that I install using npm install. – Lukasz Commented Feb 11, 2019 at 1:28

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

CDN

<script src="https://code.jquery./jquery-3.5.1.min.js"></script>

NPM type installation

npm install @types/jquery --save-dev

TypeScript reference

/// <reference types="jquery" />

The key is to realize, that jQuery is accessible through global scope https://www.typescriptlang/docs/handbook/declaration-files/library-structures.html#global-libraries

and can be referenced via reference keyword instead of import https://www.typescriptlang/docs/handbook/declaration-files/library-structures.html#dependencies-on-global-libraries

TLDR;

import $ from '/js/libs/jquery/dist/jquery.js'

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.

The correct import is

import * as $ from 'jquery';

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - ES6 Importing npm module - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)