How to use RequiresJs to load typescript module (asp.net mvc/visual studio environment) [duplicate]

Question

Let's say I have 2 files: test1.ts and test2.ts. This is the content of test1:

export const x = 1

This is the content of test1:

import { x } from './test2'

alert(x);

When I run the application, I get this error: Uncaught ReferenceError: exports is not defined at test1.js:2.

According to other posts, this error is caused by the fact that web browsers don't support export, and require(...). To solve it, one of the solution would be to use something like RequireJs.

So I've done some readings. This article has been the easiest for me to understand.

1. I've added this line in the _Layout.cshtml file.

   <script src="~/Scripts/require.js"></script>

2. Create a config file.

   requirejs.config({
      baseUrl: '/Scripts/js'
   });
   

3. I've put test1 and test2 in the /Scripts/js folder.

4. Run the application, but still get the same error: Uncaught ReferenceError: exports is not defined at test1.js:2.

How to fix the error using RequireJs?

Thanks for helping.

EDIT

The solution doesn't have to be RequireJs but anything the fix the problem. There are so many great tutorial on typescript, but they all assume that people are using node or angularjs. All I need is to add some typescript to my asp.net mvc app. As long it was one file, things were fine. Now I'd like to re-use some of the code, thus I organized them in different files. Unfortunately, I can't move forward because of that error. I've been sitting there for 3 days now.

EDIT 2

I've added commonJs to amd as you suggested by @artem,

{
  "compilerOptions": {
     "module": "amd",
     "noImplicitAny": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": true
 }

}

now I'm getting this error.

Uncaught Error: Mismatched anonymous define() 
module: function (require, exports, CommonTypes_1) {
//...

It seems like this question is dealing with the same issue. Should I put this code in a new file?

Answer 1

I know this is a little old, but just ran into this problem. Here's how I solved it.

This post was very helpful: https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project

First, add require.js to your BundleConfig.cs. Mine looks like this:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js",
    "~/Scripts/require.js"));

Next, make sure _Layout.cshtml renders "scripts" section after your bundles. Mine looks like this:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Then in your view, render the scripts section like below. My Index.cshtml looks like this:

@section scripts
{
    <script>
        require(["Scripts/Init"],
            function (Init) {
                Init.Start();
            }
        );
    </script>
}

My ~/Scripts/Init.ts file looks like this:

import * as DataBind from "./DataBind"

export function Start() {
    DataBind.SetAllDatabinds(null);
}

From there, you can load in all your modules as needed. The important thing I found is to not have any "loose code" in your TypeScript files (i.e. the "alert(x)" in the example). Everything should be exported.