locked
Attempt to Use TS Modules Generating Error: The server responded with a non-JavaScript MIME type of "text/html" RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-343630552 posted

    I am trying to learn how to code a Blazor Wasm app that uses TS modules.  Right out of the gate, I'm getting this console error message:  Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.  I've created demo code to show what I am trying.  I'm hoping/thinking I'm missing something obvious.  The JS files compiled from the TS files are included as follows:

    <script type="module" src="js/ME Demo1.js"></script>
    <script type="module" src="js/ME Demo2.js"></script>

    I am developing in VS Community 2019 v16.6.2 with AspNetCore v3.2.0 and TypeScript v3.9 (NuGet) and targeting ESNext.

    // ME Demo1.ts
import { MyClass } from './ME Demo2';

function demoMethod()
{
    let x = new MyClass("any", 100);
} 

// ME Demo2.ts
export class MyClass
{
    Prop1: string;
    Prop2: number;

    constructor(p1, p2)
    {
        this.Prop1 = p1;
        this.Prop2 = p2;
    }
}

    Thursday, June 18, 2020 7:59 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    I don’t believe typescript supports browser modules, you need to use a module loader like require.js, the default for the typescript compiler is to produce a  single output file, which is not a module.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 19, 2020 1:26 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-343630552 posted

    Thanks again, Bruce.  I must confess to not understanding what you were suggesting in several respects.  For example, in order to keep the "from" files  from being flagged in your main.ts import statements, it looked like I needed to add export to every variable and function in the file.  But then I would need to import into main.ts each variable and function by name or use  "import * as X ..." (since there's no way I see to import everything from a file without giving hen an "as" name), which didn't seem right.  In short, I tried what you are suggesting a number of ways, without success.  I don't think I'm a dunce.  It just seems this whole TS modules thing is a mess.

    That said, your overall observation about my SPA app being simple did lead me to just segment the TS code into different files, including one for the variable and class definitions I wanted to share across function-containing files, and that worked.  That means Intellisense worked (while coding, not in the debugger Immediate Window of course), the project build worked, and the code worked.  So, it seems I went down the whole "modules" rabbit hole needlessly.  I hope you aren't going to tell me I'm wrong on that, if you even make another comment after what may look to you like a goofy set of questions from me.

    Anyway, thanks for the help.  It does seem to have led me to a solution.  Steve

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 25, 2020 1:13 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    I don’t believe typescript supports browser modules, you need to use a module loader like require.js, the default for the typescript compiler is to produce a  single output file, which is not a module.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 19, 2020 1:26 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-343630552 posted

    Thanks, Bruce.  After seeing your post, I started to re-read the TypeScript Module documentation (here) and saw "Modules also have a dependency on a module loader (such as CommonJs/Require.js) or a runtime which supports ES Modules.", which I didn't understand in prior readings.  

    Friday, June 19, 2020 12:57 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-343630552 posted

    Bruce -  If you are still monitoring, I could use another round of help.  I am not getting anything back from other ASP.NET and stackoverflow posts on the follow-on problems I'm having. 

    I interpreted your last response to mean that I needed to install require.js in my Blazor WebAssembly with TypeScript app to handle the module loading. 

    I did that by installing RequireJS using NuGet.  That made the initial load error disappear, but when I tried to invoke demoMethod() in ME Demo1, I got "Uncaught ReferenceError:  demoMethod is not defined."   

    Since I didn't understand what the NuGet install did re including require.js in my code as the documentation I found said (that file doesn't appear in Solution Explorer), I added <script src="https://requirejs.org/docs/release/2.3.6/comments/require.js" data-main="/Application/CustomerManagement.js"></script> to the <head> of my html.  This triggered "require.js:168 Uncaught Error: Mismatched anonymous define() module" on the js code that was generated from the ME Demo1.ts as shown below.  

    I am thoroughly frustrated after having read/tried everything I can find on this, including trying to understand (unsuccessfully) what RequireJS says about these latest errors.

    Are you able to help me out?  Thanks again.  Steve

    (function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./ME Demo2"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const X = require("./ME Demo2");
    function demoMethod() {
        let x = new X.MyClass("any", 100);
        X.MyFunction("any", 100);
    }
});
//# sourceMappingURL=ME Demo1.js.map

    Wednesday, June 24, 2020 3:27 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    you don't need to add a module loader. you can compile a ts file with modules, you just don't use modules directly on pages.

    as you are building an SPA with blazor you just need one ts file that import the others:

    main.ts
    import { demo1 } from "./Module1";
    import { demo2 } from "./Module2";

    compile main.ts and include on the blazor bootstrap page:

      <script src="main.js.min"> 

    Wednesday, June 24, 2020 6:59 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-343630552 posted

    Thanks again, Bruce.  I must confess to not understanding what you were suggesting in several respects.  For example, in order to keep the "from" files  from being flagged in your main.ts import statements, it looked like I needed to add export to every variable and function in the file.  But then I would need to import into main.ts each variable and function by name or use  "import * as X ..." (since there's no way I see to import everything from a file without giving hen an "as" name), which didn't seem right.  In short, I tried what you are suggesting a number of ways, without success.  I don't think I'm a dunce.  It just seems this whole TS modules thing is a mess.

    That said, your overall observation about my SPA app being simple did lead me to just segment the TS code into different files, including one for the variable and class definitions I wanted to share across function-containing files, and that worked.  That means Intellisense worked (while coding, not in the debugger Immediate Window of course), the project build worked, and the code worked.  So, it seems I went down the whole "modules" rabbit hole needlessly.  I hope you aren't going to tell me I'm wrong on that, if you even make another comment after what may look to you like a goofy set of questions from me.

    Anyway, thanks for the help.  It does seem to have led me to a solution.  Steve

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 25, 2020 1:13 PM