Despite declaring a default export, the code does not include one

Software decays over time. After making a small modification to a GitHub project that was three years old, the rebuild failed due to automatic security patches. I managed to fix everything except for an issue with a default import.

The specific error message is:

ERROR in ./src/HeatMapTable.js 340:20-27
export 'default' (imported as 'HeatMap') was not found in 'jsheatmap' (module has no exports)

Here is the relevant code snippet:

Main.js

import HeatMap, { Style } from "jsheatmap";  //eslint-disable-line no-unused-vars

Jsheatmap, index.ts

class Sterno {...}
...
export { Style, Sterno as default }

When looking at the jsheatmap/lib/index.js file in node-modules, it shows:

var Sterno = /** @class */ (function () {...}
...
exports.default = Sterno;

Based on my knowledge of CommonJS, this export should be compatible with the ECMAScript import used in Main.js.

This is the content of my tsconfig.json file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "lib": [
            "es6",
            "dom"
        ],
        "outDir": "lib",
        "rootDir": "src",
        "strict": true,
        "esModuleInterop": true,
        "resolveJsonModule": true
    },
    "exclude": [
        "test"
    ]
}

Package.json


{
  "name": "jsheatmap",
  "version": "1.2.3",
  "description": "Generates heat map data",
  "main": "lib/index.js",
  "type": "module",
  "scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts",
    "test": "mocha -r ts-node/register test/**/*.ts"
  },...

Answer №1

Your most recent commit has been successfully deployed:

  • The package-lock.json file ensures precise NPM module versions are used from the time of the commit.
  • While your project is compatible with node 16, it is not compatible with node 18.

Steps to run your project locally:

git clone https://github.com/JeffML/pokermap.git
cd pokermap
npm ci      # Install module versions specified in package-lock.json
npm start   # Requires node version 16

Instructions for deploying your project:

Confirm that node version 16 is being utilized:

  • Adjust the node version in the "engines" section of the package.json file.
  • Vercel offers the option to configure the node version through its web settings interface.
  • It appears that Netlify no longer supports node version 16 as it has been deprecated.

Answer №2

If you're looking to experiment, consider utilizing

export default class Sterno {...}

For a comprehensive guide on various methods of importing and exporting in JavaScript, I suggest checking out this informative article

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

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

The issue with functions not executing when triggered by HammerJS

In my application, there is a component that displays information for different days as they are cycled through using the functions dayUp() and dayDown(). Here is an example of how these functions are structured: dayUp() { if (this.dayCount == 7) { ...

Error encountered in ngtsc(2345) where an argument of type 'Event' is being used instead of an expected parameter type of 'SortEvent'

I recently started using angular and encountered an issue while trying to sort columns. The error message I received was: Argument of type 'Event' is not assignable to parameter of type 'SortEvent'. Type 'Event' is missing t ...

Making an input field in Vue automatically read-only when a specific value is met

Is it possible to make an input field read-only in Vue.js based on data values? Here's a situation: <select class="form-control" id="selectCategory" :readonly="cat_id >= 1" name="cat_id"> I'm looking for a wa ...

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script

I've encountered an issue while posting a form to a PHP file using AJAX. Despite my efforts, the form is bypassing AJAX and posting directly to the PHP file. Here is my form: <form id="editform" name="editform" action="ajaxeditform.php" method= ...

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

Guide to integrating Webpack 3.8.1 into a Vue application

So I have this scaffold: https://github.com/vuejs/vue-cli Now, my goal is to integrate Webpack 3.8.1 into it. There's an existing "build" folder with numerous webpack files in it : https://i.stack.imgur.com/MJ3JP.png However, when I try running "w ...

JavaScript does not allow executing methods on imported arrays and maps

In my coding project, I created a map named queue in FILE 1. This map was fully built up with values and keys within FILE 1, and then exported to FILE 2 using module.exports.queue = (queue). Here is the code from FILE 1: let queue = new.Map() let key = &q ...

Interpolation is not available for my Angular application

I am having trouble with using interpolation on my input in this code. I tried setting the value of the input to be the same as the User's username, but it doesn't seem to work. <ion-header> <ion-toolbar> <ion-buttons slot=&q ...

Utilizing JSON API filtering within a Next.js application

Recently delving into the world of coding, I've embarked on a personal project that has presented me with a bit of a challenge regarding API filtering. My goal is to render data only if it contains a specific word, like "known_for_department==Directin ...

Improving conditional rendering in Mui <Cards> component by fixing state behavior

I have a situation where I want to display a Floating Action Button inside each Mui card when hovered over. However, I'm running into an issue with the hover state affecting all cards instead of just the one being interacted with. How can I ensure tha ...

Formatting HTTP HTML response in Vue.js can be achieved by utilizing various methods and techniques

I have a WordPress site and I'm trying to fetch a specific post by its ID. Currently, the content is being displayed successfully, but it's also showing HTML tags in the main output. Here is an example: https://i.stack.imgur.com/f3pdq.png Code ...

Encountering an ETIMEDOUT error while sending out large (10k) post requests with axios.all in a Node

I have implemented axios.all to make simultaneous post calls. Below is the code snippet: let postUrls = []; data.forEach(item => { const itemData = { stream: stream_name, key: item.serialNumber, addr ...

Vue's push() method is replacing existing data in the array

I'm currently facing an issue where I am transferring data from a child component, Form, to its parent component, App. The data transfer is functioning correctly, however, when attempting to add this data to the existing array within the App component ...

Explore the functionality of Typescript unit testing in debug mode with the assistance of VSCode

I'm looking to debug my Typescript spec.ts file using vs-code. Typically, I run it from the terminal like this: npm run test:unit -- page.spec.ts But I want to add some console.log statements for debugging. Is there a way to do this in vs-code? When ...

Storing cookies is not supported when using jQuery for authentication with Passport.JS

My software setup includes an Electron app for the frontend and a Node backend. After clicking the login button, the app sends an Ajax POST request to the backend, which confirms successful authentication. However, when checking if the user is authentica ...

On-page refresh triggering HTTP 404 error in Vue3 routing situation

Issue Upon reloading a route, such as /installer, in Vue3.js, I encounter the following error: https://i.sstatic.net/UKxdk.png Code Snippet I am utilizing the Router with the setup below: const router = createRouter({ history: createWebHistory(proces ...

Error: Combining objects that are not defined is not allowed

While running $ quasar dev on my Vue project, I encountered the following error: ~/project/node_modules/webpack-merge/dist/index.js:63 throw new TypeError("Merging undefined is not supported"); ^ [ TypeError: Mer ...

In TypeScript, leveraging the spread operator to determine the largest value in an array containing nullable numbers

Having an array of nullable numbers presented in the following way: let myArray : Array<number | null> = [1,2,null,4,null,5]; let maximumOfMyArray = Math.max(...myArray); // Type null is not assignable to type number I am content with JavaScript tre ...

Is there a neat method in React and Material UI for de-structuring the props that I am passing to useStyles?

When passing props to useStyles based on the Material docs, our code looks like this: const useStyles = makeStyles({ // style rule foo: props => ({ backgroundColor: props.backgroundColor, }), bar: { // CSS property color: props => ...