I am building a 3D multiplatform electron app bundled around photoshop with vscode, electron, typescript,electron packager,npm, threejs on windows.
Unfortunately, Typescript works a little against me. Whenever I compile to js it replaces import {x} from "./y" with an unnecessary require(y) and some export stuff above it.
This is the index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv= "Content-Security-Policy" content="script-src 'nonce-a1b2c3d4'"/>
<style>body {margin: 0;overflow: hidden;} </style>
<title>CGVERSE 3D</title>
</head>
<body>
<script nonce="a1b2c3d4" type="module" src="./dist/renderer.js"></script>
</body>
</html>
the tsconfig.json:
{
"compilerOptions": {
"module": "CommonJS",
"target": "ES5",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"outDir": "dist",
"baseUrl": ".",
},
"include": [ ".node_modules/three/src/**/*.ts","src/**/*","./src/**/*.ts" ]
}
the import part of the typescript renderer.ts:
import * as THREE from "../node_modules/three/src/Three.js";
the import part of the compiled renderer.js:
"use strict";
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var THREE = require("../node_modules/three/src/Three.js");
package.json adding "type":"module" here did not work.:
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "./dist/main.js",
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"lint": "tslint -c tslint.json -p tsconfig.json",
"start": "npm run build && electron ./dist/main.js",
"launch": "npx tsc && electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.1.1",
"electron-packager": "^15.0.0",
"ts-node": "^8.10.2",
"typescript": "^3.9.7"
},
"dependencies": {
"dat.gui": "^0.7.7",
"javascript-state-machine": "^3.1.0",
"require": "^2.4.20",
"three": "^0.118.3"
}
}
on a side note, all of it works perfectly if I copy-paste the import from renderer.ts and get rid of all the unnecessary require and export stuff, which I absolutely do not want at all.
To the question. How can I force Typescript to not use requires in modules used in index.html and just use the original typescript import?
Things I tried already after a lot of research on articles, StackOverflow and git repos
-type: module in package.json
-tsconfig.json ES5, ES6, commonJS, ES3, etc all combinations.
-require the compiled .js in the .html with no type="module"
-nodeIntegration: true