What could be causing the issue with the exports field in package.json not functioning properly within

Recently, I created an npm package that includes three js files. Now, in my current project, I am aiming to import these js files using the following syntax:

import MyButton from '@bslm/ui/MyButton'

To achieve this, I made sure to specify the exports field within my package.json, as illustrated below:

"type": "module",
"exports": {
  "./MyButton": "./dist/my-button.common.js",
  "./MyInput": "./dist/my-input.common.js",
  "./MyImage": "./dist/my-image.common.js",
}

However, upon attempting to execute the following import statement:

import MyButton from 'mypackage/MyButton'

An error message stating

These dependencies were not found
is displayed.

For context, my node version stands at 14.18.1 and npm version at 8.5.4.

Answer №1

To eliminate the '.' at the beginning, ensure that when using './' as identifiers, you utilize objects such as {"default":"./dist/my-button-common.js" } rather than just a basic name.

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

Error: Unable to establish connection with local host (::1) on port 50106

I am currently in the process of developing a Discord bot using Node.js and erela.js. However, I encountered an error when attempting to retrieve the server that handles erela: A node error occurred: connect ECONNREFUSED ::1:50106 2020-05-01T21:23:19.367 ...

PLupload does not support Flash runtime in Internet Explorer 8

I am facing a dilemma with a basic JavaScript function placed within the $(function() { ... }); block. var uploader = new plupload.Uploader({ runtimes: 'html5,flash,silverlight', browse_button: 'pickfiles', c ...

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

I am currently studying angular4 using the angular tutorial. Here is a function to retrieve a hero from a service: @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return new Promise(resolve => { // ...

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

Tips for remaining on the current page after sending a post request using Express

I have a simple question that I haven't been able to find a satisfactory solution for. I've created a post route using express, like this: app.post('/search', function(req, res){ // Code to extract data from req and save it to the d ...

Attempting to instruct my chrome extension to execute a click action on a specific element found within the webpage

I am currently working on developing a unique chrome extension that has the capability to download mp3s specifically from hiphopdx. I have discovered a potential solution, where once the play button on the website is clicked, it becomes possible to extract ...

Receiving JSON objects from Javascript in Django Views

When I attempt to pass a Json Object value from making an API call to my views.py in Django template, I encounter difficulty retrieving the value after an ajax call. let application = JSON.parse(sessionStorage.getItem("appId")); let kycStatus = a ...

The output paths for both JavaScript and Sass in Laravel-mix are generating incorrect paths

I am facing a strange issue with Laravel-Mix where mixing sass or js results in them being placed in incorrect directories. For instance: Below is my webpack.mix.js file: mix.js('resources/assets/js/app.js', 'public/js') .sass(&ap ...

Embedding HTML Tags within an array element

The task at hand involves adding an HTML element from Array Value to the Document Object Model template: { 0: { h1: '<h1>Hi</h1>' }, 1: { h2: '<h2>Hi</h2>' }, 2: { h3: &a ...

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

Acquire feedback from PHP using SweetAlert notifications

I need to update my HTML form to function like this: <script> function getName() { var name = $('#name').val(); var url_send = 'send.php'; $.ajax({ url: url_send, data: 'name=' + name, ...

Choose the list item below

I'm working on a website that includes a select list with images. Here's what I have so far: When I choose an image from the list, it should display below. <?php // Establish database connection $con=mysqli_connect("******","***","*** ...

What are the steps to successfully set up npm 3 beta on a Windows computer?

After attempting to upgrade my npm version to 3 using npm install npm@3 -g, I found that it is still on version 2.x: https://i.sstatic.net/NVOkB.png What steps should be taken to successfully install the latest beta release? ...

How can I adjust the time in a range slider using AngularJS?

Currently, I am utilizing a Slider with draggable range in angular js for time selection. The Slider can be found here: https://jsfiddle.net/ValentinH/954eve2L/. I aim to configure the time on this slider to span from 00.00 to 24.00, with a 10-minute inter ...

Is it possible to include a while loop for iteration inside a AJAX success function?

I'm currently working on dynamically creating an accordion and populating the content of each tab using AJAX. In my main HTML page, there is an empty div reserved for the accordion: <div id="accordion"></div> The desired outcome is to ha ...

Transmit information to the controller using jQuery in a C# MVC environment

Here is my jQuery script code snippet. The script works perfectly and stores the data array/object in a variable called dataBLL. var dataBLL = []; $('#mytable tr').each(function (i) { dataBLL.push({ id: $(this).find('td:eq(0)').text( ...

Using Ajax for updating table content on a JSP webpage section

I am working on implementing Ajax functionality for a table to enable partial updates every hour. Below is a snippet of my JSP code: < head > < meta http - equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" > < titl ...

Utilize the keyboard's vertical arrows to adjust values as needed

Implement the functionality to increase and decrease the value in a label or p tags using the onkeydown and onkeyup events, without requiring a textbox input. I have come across numerous examples, but they all rely on textboxes. I am looking for a soluti ...

Utilize React Native to showcase JSON data in a visually appealing way by organizing it into titles and corresponding lists for both

I created a live code on Expo.io to showcase JSON data categories as titles and the subs as a list. This code utilizes .map() to retrieve data from an array. import React, { useState } from 'react'; import { Text, View, StyleSheet, Button, FlatLi ...

What is the process for installing the rsuite npm dependency from a github repository?

I'm currently working with next js 11. I have a requirement to modify an rsuite component, which means I need to clone the dependency from https://github.com/rsuite/rsuite.git, make my changes in a separate branch, and then install it. The issue I&a ...