0

I'm not using WebPack or others, instead, trying to use the native browser ES-Module system(ESM).

In TypeScript, the coding the source refering the local NPM installed modules.

import * as React from "react";
import * as ReactDOM from "react-dom";

import { SubComponent } from './sub-component';

Then the transpiled JavaScript code is:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SubComponent } from './sub-component';

This is not good so far, because the actual path to refer on execution with the JavaScript code should be:

import * as React from "../esm/react.js";
import * as ReactDOM from "../esm/react-dom.js";

import { SubComponent } from "./sub-component.js";

(Note: I have a working react/react-dom ESM files in this code and path, so the transpiled output is required exactly to be this code.)

I've read https://www.typescriptlang.org/docs/handbook/module-resolution.html , but don't know exactly what to write to set the mapping.

tsconfig.json that doesn't work:

{
  "compilerOptions": { 
   //.........

    "baseUrl": ".",
    "paths": {
      "react": [
        "../esm/react.js"
      ],
      "react-dom": [
        "../esm/react-dom.js"
      ],
      "./sub-component": [
        "./sub-component.js"
      ],
    }
  }
}

What is the proper way? Thanks.

  • In your `tsconfig.json`, did you write those paths to the modules or were they auto-generated? – Turner Bass Aug 10 '18 at 15:20
  • @TurnerBass I wrote by myself on my purpose. I didn't know they can be auto-generated. –  Aug 10 '18 at 15:22
  • Ah I see. I think then that the transpiled JavaScript is correct, it is rather the relative links that are off. I would suggest looking again at where those modules are located relative to the baseUrl you have. You may have missed a directory somewhere. – Turner Bass Aug 10 '18 at 15:27
  • Also, this isn't quite the same issue, but may provide some insight. [Paths in tsconfig.json](https://stackoverflow.com/questions/43281741/how-to-use-paths-in-tsconfig-json) – Turner Bass Aug 10 '18 at 15:28
  • @TurnerBass Thanks, but what I ask is not to confirm the transpiled JavaScript is correct, but how to make the transpiled JavaScript tne desired way by configuring the tsconfig.json. I've read throught the linked Question, too. –  Aug 10 '18 at 15:36
  • Also, I just wonder if there is any situation the transpiled JavaScript is not correct according to the tsconfig.json except the compiler bug. –  Aug 10 '18 at 15:39
  • 1
    This is unfortunate, but here are two issues raised on GitHub with the TS team. [Issue 1](https://github.com/Microsoft/TypeScript/issues/16640) and [Issue 2](https://github.com/Microsoft/TypeScript/issues/10866) – Turner Bass Aug 10 '18 at 15:44
  • @TurnerBass Thanks a lot for the detailed info. Now I see the why, and probably I need to develop my own tool for this or maybe there are some neat libraries exist. –  Aug 11 '18 at 00:05

0 Answers0