The requested module does not provide an export named

Question

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?

Solution

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"
  },
}

Comments

[Max]

Can you share your tsconfig.json?

[Lyror]

sure. I updated my post

[Lyror]

thanks it works now. My next problem is that I want to include a pure javascript file (here is the file hastebin.com/okocoxazep.js). I remember that I used to do it with this (const bigInt = require("../third_party/BigInteger.min.js");), but unfortunately this is not correct. I got this error "require is not defined". Do you know a fix for this?

[Max]

In your html (prior to your other code): <script src="filepathhere"></script>. The bigInt variable should be globally available. require() dod not work because a) the browsers do not support commonjs modules (at least not out of the box) and b) the file is no commonjs module l but rather good plain old Javascript.