The module specifier "tslib" could not be resolved due to a TypeError. It is necessary for relative references to begin with either "/", "./", or "../"

Hey there, I recently started learning npm. I'm trying to install "@fullcalendar" and use it, but I keep getting this error message: "Uncaught TypeError: Failed to resolve module specifier "tslib". Relative references must start with either "/", "./", or "../"."

Here is the structure of my files: www/templates/node_modules/ www/templates/assets/calendar.js

This is the beginning of my calendar.js file:

import {Calendar} from '../node_modules/@fullcalendar/core/main.js';
dayGridPlugin from '../node_modules/@fullcalendar/daygrid/main.js';
timeGridPlugin from '../node_modules/@fullcalendar/timegrid/main.js';
listPlugin from '../node_modules/@fullcalendar/list/main.js';

other code

The error occurs when importing {Calendar}. Looking at @fullcalendar/core/main.js, I see:

import './vdom';
import { __extends, __assign } from 'tslib';
import { render, createElement, CalendarRoot, CustomContentRenderContext, CalendarContent, flushToDom, DelayedRunner, CalendarDataManager, isArraysEqual, applyStyleProp, CalendarApi } from '@fullcalendar/common';
export * from '@fullcalendar/common';

I believe the path to tslib (and other imported libraries) is incorrect. However, tslib is located in the directory www/templates/node_modules/tslib. I don't want to edit the installed package directly as I don't think that's the right approach. Is there a way to set the path in the npm config? Or what would be the best course of action?

Thank you, A.

Answer №1

It appears that the way you are importing your modules is incorrect. You do not have to include the entire path to your node modules. Instead, you can simply import them like this:

    import Calendar from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import listPlugin from '@fullcalendar/list';

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

The React hook is activated each time a key is pressed, but it should ideally only be triggered when there is

I have created a hook for my Formik form that should be called whenever a specific field's Selection option is chosen. However, I am facing an issue where the hook is being triggered on every key press in every form field. I am not sure what mistake ...

Error with JavaScript callback functions

After creating a POST route, I encountered unexpected behavior in the code below. The message variable does not display the expected output. app.post("/", function (req, res, error) { var message = ""; tableSvc.createTable("tableName", function (error ...

What is the best way to save a string for future use in Angular after receiving it from a POST request API?

I have been assigned to a project involving javascript/typescript/angular, even though I have limited experience with these technologies. As a result, please bear with me as I may lack some knowledge in this area. In the scenario where a user logs in, ther ...

When utilizing React, I generated an HTML page with a distinct .js file, however, encountered two unexpected errors

Update : Gratitude to everyone who has helped me in tackling this issue. One user suggested using a web server, but my intention was to find a solution using just a single HTML and JS file. Even though I tried following the steps from a similar question o ...

"Trouble arises when dealing with nested object arrays in Formik and handling changes in a child

I am struggling with passing a value to handleChange in formik validation. To address this issue, I created a component whose quantity is dynamically added based on the number of numChild. My goal is to allow users to click an icon and add any number of sk ...

transform a JSON object into a targeted JSON array

Looking to transform a JSON object into an array format, like so: [ { "name": "Batting" ,"data": [10,20,30,40]} , { "name": "Bowling" ,"data": [10,30,50,70] },{ "name": "Fielding" ,"data": [20,40,50,70]}] While I can create JSON objects for each index, I ...

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Recently, I launched my new website and encountered a peculiar issue. Upon clicking on Pickup Date & Time, a bootstrap datepicker pops up like it should. However, the problem arises when viewing the website on mobile devices - the datepicker appears offsc ...

What is the best way to send a string parameter from an Angular UI to a Node.js backend?

My goal is to transfer a string value from an Angular UI to a Node.js backend API, which will then search in MongoDB using the provided string value as shown below. I am attempting to receive input in enteredValue and pass it on to the http.get call as pa ...

The browser is preventing a cross origin request in Fetch

Currently, I am utilizing node, express, and react to build a sign-in portal. In the frontend, I have created app.js and signin.js files. The partial code snippet in the signin.js file looks like this: onSubmitSignIn = () => { fetch("http://localhost:3 ...

Creating a cron job that can be rescheduled using Node.js

I am utilizing the node-schedule package from GitHub to create cron jobs. While I have successfully created a basic scheduler, my goal is to make it reschedulable. Within my application, users can initiate tasks for specific dates. This can be easily achi ...

nguniversal is flagging errors in my schema

ng add @nguniversal/express-engine --clientProject cookbook Whenever I try to run this command for making my application angular universal, it throws errors stating that the schema is not valid. Error Message from Console gettingstarted@gettingstarted:~/ ...

What could be the reason for meteor not injecting the text from my template helpers?

My goal is to dynamically generate a table displaying two different sets of data. Despite having verified returns from my database, the rendered page does not show the corresponding HTML elements as expected. Here is the template and HTML code: <templ ...

The project is not being recognized by 'webpack' when running within it

Every time I attempt to execute 'webpack' in my project, the command line shows me this error message: 'webpack' is not recognized as an internal or external command, operable program or batch file. I have installed webpack using th ...

CSS and Javascript functioning correctly within internal server, but encountering issues when accessed externally

I am in the process of creating a website for a friend. The goal is to have a flashy animated style website that functions well on IOS and allows him to make changes easily. To achieve this, I am utilizing JQuery, my own javascript, and multiple css files. ...

Exploring the functionality of JavaScript's concat method

I am trying to retrieve value1, value2, value3... but I am encountering an issue. Why am I getting this error message - "can't access property "concat", texto1 is undefined"? Please assist me! Here is the HTML code snippet: <div id=ite ...

An issue in Node.js NPM PDFkit arises when generating PDF tables with Voilab pdf table, leading to paragraph errors in the resulting

Greetings everyone, I appreciate you taking the time to visit. I am currently facing some challenges with Voilab PDF Kit, a library for PDFkit that is designed to assist in organizing tables for NPM Pdfkit. After successfully generating a table, I attemp ...

Is there a way to create a function that is able to return both a value and a promise

Assume I need to fetch a value only if an object is already present in my model. Otherwise, I should retrieve the output of an endpoint service: model.getDoohkyById = function( id ){ if( this.data ) { if( this.data.length > 0) { ...

What is the procedure for transferring the inputted data from an HTML file to its corresponding TS file and subsequently to a different component file?

I have created two components, a login and a home-page. I am attempting to capture user input from the login template, pass it to the login component, and then display it on the home-page template using the home-page component. What is the best approach to ...

The fitBounds and panToBounds functions in react-google-maps fail to properly adjust the map's size

const Map = withGoogleMap(props => { const { activeMarker, zoom, center, showInfoWindow, products } = props; const [selectedPlace, setSelectedPlace] = useState(null); // Code to iterate through items and adjust map size, center, and zoom to inclu ...

Is there a way to apply styles to a checkbox's child element depending on the checkbox's state without relying on ternary operators within Styled Components?

I am currently working on styling this component using Styled Components, but I feel like my current approach is a bit of a hack. What would be the best practice for incorporating Styled Components to style this component effectively? If I were to use Pla ...