typescriptthree.jsblazorblazor-webassembly.net-8.0

Blazor using typescript and import three.js


I'm developing a Blazor WASM application where I make use of the Microsoft.TypeScript.MSBuild nuget package in order to use typescript for all related javascript code.

But when it comes to import and use an external js module like three I have no way to import or set it up and use it from my typescript code.

I've tried with several approaches, my last one, having it installed via npm, but still in my ts files there is a build error in the import, where 'three' is not recognized:

import * as THREE from 'three';

(TS) Cannot find module 'three'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

Changing this from the tsconfig.json (not in use anymore) does not result in this working.

Also I tried to use this from a JS file I've set just for this purpose and when it is being loaded by the browser, I get an error like this:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Unexpected identifier 'as' SyntaxError: Unexpected identifier 'as' Microsoft.JSInterop.JSException: Unexpected identifier 'as' SyntaxError: Unexpected identifier 'as' at Microsoft.JSInterop.JSRuntime.d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()

I'm out of ideas to keep trying. Also I don't find many things on the net, and all examples I found are using just one ts file, not importing a JS module.


Solution

  • I had to follow several steps, is not about code but about architecting the build and all the needed context software and configuration files. Here a fast description I followed to get it to work:

    1. Install nuget package Microsoft.Typescript.MSBuild. This should "transform" your ts files into js automatically. Maybe here you need to create and tweak the tsconfig.json or maybe you are fine what the project properties->Typescript section offers you.
    2. Install node.js. Follow instructions in their official webpage.
    3. Via cmd (in windows context) at root of your project or solution (as you prefer) install via npm desired modules, In my case I wanted to install THREE and THREE/Types. You can follow the instructions in the three documentation page. NOTE: Even they say there is no need anymore for the Types, I had to install them as well.
    4. Install via npm webpack, create a webpack.config.js at root of your project, this will bundle all your js (from the built typescript code) into one single main.bundle.js file which you should include in your index.html. Normally for the webpack to know what files to include you need a index.ts where you write for each file you want to include: import \'myTsClass.ts\'. NOTE: For webpack to work you need to run it manually via cmd->npx, for this to work automatically while you work on your favorite IDE, you can run in cmd: npx webpack --watch.

    That's pretty much all the way to go, or at least that was in my case.

    SPOILER: Maybe there are better ways, maybe there is no need to bundle it all in one file. Each step took me several hours. I had to investigate quite a lot because for me all this is quite new, which means probably there are better ways and more clever ways to achieve this, but I found nothing about the topic when it comes to typescript, blazor, importing modules and using them in a straight forward way.