Issue exporting function from typescript file

Question

I have this .ts file:

let animalTypes: string[] = ["MOOSE","COW","HORSE"];

function getNoise(animalTypes) {

    if (animalTypes === "MOOSE") {console.log("NEIIIIIIIGH whatever noise Moose make");}
    else if (animalTypes === "COW") {console.log("MOOOOOOOOOOO");}
    else if (animalTypes === "HORSE") {console.log("WHINNNNY");}

}

export {getNoise}

Which transpiles into this .js file:

"use strict";
exports.__esModule = true;
var animalTypes = ["MOOSE", "COW", "HORSE"];
exports.animalTypes = animalTypes;
function getNoise(animalTypes) {
    if (animalTypes === "MOOSE") {
        console.log("NEIIIIIIIGH whatever noise Moose make");
    }
    else if (animalTypes === "COW") {
        console.log("MOOOOOOOOOOO");
    }
    else if (animalTypes === "HORSE") {
        console.log("WHINNNNY");
    }
}
exports.getNoise = getNoise;

However, I'm receiving this error message when trying to load the .js file and import the functions directly into a block on my website:

Uncaught SyntaxError: The requested module './animals.js' does not provide an export named 'getNoise'

I'm copying an example from class so it's bewildering that it isn't working but there we have it.

Does anyone know what might be causing this SyntaxError?

Here is the relevant html, too:

import {getNoise, animalTypes} from "./animals.js";
document.getElementById("target").onclick = function() {
      getNoise(animalTypes[1]);
}

What module loader are you using to load JavaScript modules into the HTML file? — Shaun Luttin
– Shaun Luttin, Commented Mar 17, 2019 at 15:25

Shaun Luttin · Accepted Answer · 2019-03-17 15:58:58Z

1

It looks like you are loading modules into the HTML file using the ECMA6 module loader and compiling your TypeScript into CommonJS modules.

Those two module systems are not compatible.

Try changing your tsconfig.json file so that it builds ECMA6 modules instead.

{
  "compilerOptions": {
    "module": "es2015",
  },
}

Your HTML file would then look like this:

<script type="module">
    import { getNoise, animalTypes } from "./animals.js";
    const noise = getNoise(animalTypes[1]);
    console.log(noise);
</script>

Here is a demo for your on GitHub. Note also that you need to export animalTypes in addition to getNoise like this:

export {
  animalTypes,
  getNoise
}

edited Mar 17, 2019 at 15:58

answered Mar 17, 2019 at 15:30

Shaun Luttin

143k93 gold badges443 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Redcoatwright Over a year ago

Does the tsconfig.json file go in the same directory as where I'm running the tsc command to compile?

Redcoatwright Over a year ago

I did get it to work, actually but just by changing my .js file such that instead of doing exports.getNoise = getNoise, I did export {getNoise}. What is the different between those? I'll mark yours as the answer because looking at your repo helped me. Thanks!

Shaun Luttin Over a year ago

You asked, "What is the different between those?" The answer is that those are two different module export styles. Module export styles include AMD, CommonJS, ES6, UMD, and SystemJS. See also: typescriptlang.org/docs/handbook/…

Collectives™ on Stack Overflow

Issue exporting function from typescript file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related