CODEWITHSUNDEEP
javascripthtmltypescript
Lyror
Lyror

Reputation: 964

The requested module does not provide an export named

I'm translating this javascript project (https://github.com/Legorin/satisfactory-calculator) to typescript.

I'm getting an error when I import the transpiled typescript file in a html script tag.

<script>
  var handlers = {}
</script>
<script type="module">
  import { Initilatizion } from "./init.js";
  handlers.init = Initilatizion.init;
</script>

The error is: Uncaught SyntaxError: The requested module './init.js' does not provide an export named 'Initilatizion'

Here is my init.ts file

import { Belt } from "./belt";
import { Building } from "./building";
import { FactorySpecification } from "./factorySpecification";
import { Fragment } from "./fragment";
import { Item } from "./item";
import { Recipe } from "./recipe";
import { Settings } from "./settings";
// tslint:disable-next-line: no-var-requires
const d3 = require("../third_party/d3.min.js");

export class Initilatizion {
    public static loadData(settings) {
        const spec: FactorySpecification = FactorySpecification.getInstance();
        d3.json("data/data.json").then((data) => {
            const items = Item.getItems(data);
            const recipes = Recipe.getRecipes(data, items);
            const buildings = Building.getBuildings(data);
            const belts = Belt.getBelts(data);
            spec.setData(items, recipes, buildings, belts);

            Settings.renderSettings(settings);

            spec.updateSolution();
        });
    }

    public static init() {
        const settings = Fragment.loadSettings(window.location.hash);
        this.loadData(settings);
    }
}

Here is my tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "sourceRoot": "src",
  },
}

Where is my mistake?

Upvotes: 4

Views: 30615

Answers (1)

Max
Max

Reputation: 1025

You declared the wrong module type in your tsconfig.json!

By setting module to "commonjs" you tell typescript to generate a JavaScript file that uses the commonjs import/export syntax used by nodejs and others. You however, use the "new" ES6-module import/export syntax in your HTML and therefore have to set module to "esnext" or "es6"!

Related documentation

Note: You shared an invalid tsconfig.json file, I fixed it below

Example tsconfig.json:

{
  "compilerOptions": {
    "module": "es6",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "sourceRoot": "src"
  },
}

Upvotes: 5

Related Questions