Trying to import in typescript file. (export is not defined)

Question

Full error: Uncaught ReferenceError ReferenceError: exports is not defined at (c:\Users\user\Documents\vsCode\Slider\src\script.js:2:23) @ c:\Users\user\Documents\vsCode\Slider\src\script.js:2:23

I have spent around 3 hours searching for anything that might lead me in the right direction. I'm not very skilled in web development. I had this working in pure JavaScript but then decided to try and redo this in TypeScript. I don't know enough about TS to pinpoint the problem.

I have a typescript file where I have this:

import nouislider from "./nouislider";

//import * as nouiSlider from "./nouislider"
var dataElements = document.getElementsByClassName('data');

var coll = Array.from(dataElements);
coll.forEach(dataElement => InitializeSlider
  (dataElement));

 function InitializeSlider(data: Element) {}

I have a nouislider.d.ts file in the same folder. I imagine that it's importing that file.

I then run this task from within vsCode:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc build",
            "type": "shell",
            "command": "npx tsc",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

It then spits this out:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//import * as nouiSlider from "./nouislider"
var dataElements = document.getElementsByClassName('data');
var coll = Array.from(dataElements);
coll.forEach(dataElement => InitializeSlider(dataElement));
function InitializeSlider(data) { }

This is my project structure: project structure

Object.defineProperty(exports, "__esModule", { value: true }); is where the error happens. If I don't import nouislider then typescript complains that it can't find it. What am I missing? Is there a different way to import? Should I not be importing? Am I doing the compiling all wrong? HELP!

Answer 1

This is not how to program in Typescript.

nouislider.d.ts is only type definition file, it doesn't translate to javascript. The error says that you didn't export something what you are trying to import.

So, in order to make it work, I suggest to:

• rename nouslider.js to nouslider.ts
• remove nouslider.d.ts (because it is probably not needed)
• and finally call default export inside nouslider.ts (this will export the code as module)