What are the steps to leverage npm installed packages in my .js files?

I'm new to web development and I'm trying to incorporate node packages into my workflow. Specifically, I'm attempting to test out the axios ajax library.

It seemed like this would be a simple task, but it's proving to be quite challenging.

In my folder, I have an index.html and an index.js file.

I used "npm init -y" to create a package.json file and then installed axios with "npm install axios --save". The package is now in the node_modules folder and listed as a dependency in package.json.

Now, how do I actually use this library in my index.js file?

I tried the following in my index.js file (on the first line):

import axios from "axios";

When I check in Chrome, I get: "Uncaught SyntaxError: Unexpected identifier", and in Firefox: "SyntaxError: import declarations may only appear at top level of a module".

Even when I try linking the index.js file with type="module" (as suggested in other discussions), it still doesn't work and I receive different errors.

What am I missing here?

Answer №1

In client-side JavaScript files, you cannot use the "import" keyword, as it is meant for Node.js files that run on the server side.

An easy way to use a Node module is by specifying the path.

<script src="/node_modules/path_to_dependency/dist"></script>

For more information, check out: How to include scripts located inside the node_modules folder?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

First render does not define useEffect

Why am I experiencing an issue here? Whenever I attempt to retrieve data from my API, it initially returns undefined during the first render, but subsequent renders work correctly. const [data, setData] = useState([]) useEffect(() => { const fe ...

Obtain additional information to address concerns related to onZoom and onPan issues on the line

Attempting to enhance my Chart.js line chart by fetching more data or utilizing cached backup data during onZoom/onPan events has proven quite challenging. The original code base is too intricate to share entirely, but I will outline the approaches I have ...

The error message "mapboxgl is not defined" indicates that the mapboxgl variable

I have been encountering the following error message in the console, and despite spending hours trying to troubleshoot it, I have been unsuccessful in resolving the issue. Could someone assist me in fixing this problem? error image I am having difficulty ...

Steps to display the leave site prompt during the beforeunload event once a function has finished running

While facing a challenge with executing synchronous Ajax methods in page dismissal events, I discovered that modern browsers no longer support this functionality in the "beforeunload" event. To work around this issue, I implemented a new promise that resol ...

How to unload and remove an object imported with OBJLoader in Three.js

I'm facing a small issue that I can't seem to figure out. I've successfully added an object to my scene using OBJLoader, but now I need to remove it. I've tried clearing the scene.children with code, but it doesn't delete the "flow ...

The discord.js argument for startsWith should not be a standard regular expression

What could be the reason behind this not working as expected? I am trying to check if a string starts with a number, and furthermore, I want it to handle multiple numbers. For instance, if the string starts with 1259823 then execute this code. I assume t ...

Issue with PHP form submission not functioning within a table when utilizing jQuery

I've created a function that retrieves user data. function returnChild(){ global $pdo; $stmt = $pdo->prepare("SELECT * FROM children INNER JOIN districts ON children.ch_district = districts.dst_id ...

Apply a border to the input field when the user enters or leaves the field, only if the value is

I am managing a few input fields and storing their information in an object. My goal is to click on an input field to focus on it, and if the field is empty or has a length greater than or equal to 0, I want it to display a red border. If I type somethin ...

Unable to start react-scripts due to event.js error at line 182

I recently copied a project from bitbucket, and encountered an issue when trying to run npm start. The error message I received was: events.js:182 throw er; // Unhandled 'error' event ^ Error: watch /var/www/html/eoffice-chat-web/p ...

Error: Module specifier "react-router-dom" could not be resolved. Relative references should start with either "/", "./", or "../"

I encountered an error message after executing the command npm run preview: Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../". ...

Retrieving Specific Text Data from Formik Dropdown<option>

I have implemented a reusable Material-UI select component in my project based on the code snippet provided in a tutorial. The SelectWrapper component is used to create a select dropdown with various options: import React from 'react'; import { T ...

Can someone guide me on how to access the release notes for an npm package prior to upgrading?

Is there a consistent way for npm registry to display release notes? I have noticed release notes being shown in various places: The README.md file On GitHub as a tagged release without a description On GitHub as a tagged release with a des ...

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

Navigating through directories (including nested ones) containing images in React Native; what's the best way to approach this

I am currently attempting to organize groups of images. Within the directory ./assets, there are several folders structured as follows: ./assets ├── 1x3 │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg └── 3x3 ├── 1. ...

Utilizing jQuery ajax to dynamically update map markers on Google Maps at intervals

I am currently working on a project that involves updating a Google map with a marker at regular intervals. I have an Ajax request that retrieves a single latitude and longitude coordinate, but I'm struggling to display it on the map. One option coul ...

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

What are the steps for establishing a connection to Heroku using node-mongodb-native?

I'm feeling lost when it comes to connecting to MongoLab on Heroku. I came across an example that was supposed to help, but it just left me more confused. You can check it out here. After looking at both the web.js and deep.js files, I noticed they b ...

A guide to setting defaultValue dynamically in React Hook Form

Presently, I am facing an issue with editing the Product page. The props values are fetched through an API and sent from the parent component. However, I am struggling to set this value to my Datepicker input. This is because the defaultValue function from ...

Accessing JSON data from a URL in AngularJS

Just dove into the world of fetching and displaying JSON data in my AngularJS app for the first time, but unfortunately, no data is showing up. Here's the code I have implemented: HTML <div ng-app="myApp" ng-controller="custom ...

Is there a similar alternative to {useLocation} provided by 'react-router-dom' that can be used in Next.js?

import { useLocation } from 'react-router-dom'; Currently utilizing Nextjs, I'm seeking assistance in finding an alternative for useLocation ` import Link from 'next/link'; import { FC } from 'react'; import {useRout ...