CODEWITHSUNDEEP
typescript
Jeb50
Jeb50

Reputation: 7077

Require... now exports is undefined, What am I missing here?

Really like TypeScript, followed this supposed easy sample, the last part "Export and Import concept", bang! First got "JavaScript runtime error: require is undefined". Google found I need to install RequirJS, make sense, installed, bypassed it. Now, the same undefined message for 'exports'.

This is what I've gone through:

  1. I went through all 3 related post in SO, TypeScript Modules in Visual Studio 2015 Update 2 - 'require' is undefined

    How to fix '0x800a1391 - JavaScript runtime error: 'require' is undefined'?

    Typescript ReferenceError: exports is not defined

    Still not resolving.

  2. Adding a TSConfig.json like this, same.

  3. Downloaded the supposed-ok source code, hah, his ended with 'System' is undefined. Did npm install SystemJS, got "... open 'C:...\package.json', ... no descripton, no repository, ..., no license." Okay, added an empty package.json, same result.

So my questions are:

My project, tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

Customer.js

import { Address } from "./Address";

class Customer
{
    private _customerName: string = "";
    private _addressObj: Address = new Address();

    public set CustomerNameBase(value: string){
        this._customerName = value;
    }
    public get CustomerNameBase(){
        return this._customerName;
    }

    Validate()
    {
        this._addressObj.PlotNumber = 12;
        alert(this._addressObj.PlotNumber);
    }
}

class CustomerModified extends Customer
{
    Validate()
    {
        throw "throw from CustomerModified";
    }
}

Address.ts:

export class Address
{
    public PlotNumber: number;
}

Customer.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="./Address.js"></script>
    <script src="Scripts/require.js"></script>
    <script src="./customer.js"></script>
    <script>
        var customer = new CustomerModified();
        try
        {
            customer.Validate();
        }
        catch (exception)
        {
            alert("exception raised: " + exception);
        }
        finally
        {
            alert("finally.");
        }
    </script>
</body>
</html>

VS 2017 Professional v15.1 (26403.3) enter image description here

Upvotes: 3

Views: 2269

Answers (1)

Aluan Haddad
Aluan Haddad

Reputation: 31873

You're using import and export which implies a module system. By default TypeScript will transpile to CommonJS modules but, as you are using RequireJS as your module loader, you need to use AMD modules.

Change your tsconfig.json to specify the module format you desire to use.

{
  "compilerOptions": {
    "module": "amd",
    "strict": true,
    "target": "es5",
    "sourceMap": true
  },
  "exclude": ["node_modules", "wwwroot"],
  "compileOnSave": true
}

Additionally, you need to fix another problem with your code. When you define something in a module, it's only available to code that imports it. This means that your inline script should be removed and replaced with a module that contains the code and imports what it uses. Note that inline scripts are a bad practice anyway. It is however a reasonable to in-line your bootstrapping code as below.

<script src="Scripts/require.js"></script>
<script>
  require(["app.js"]);
</script>

Now in app.ts add the logic that had been in the inline script along with the necessary imports

// app.ts 
import CustomerModified from "./customer";

var customer = new CustomerModified();
try {
  customer.validate();
}
catch (error) {
  alert(`error raised: ${error}`);
}
finally {
  alert("finally");
}

Of course, in order for this to work, you need to export CustomerModified for use by other modules which you have also neglected to do.

export default class CustomerModified extends Customer {
  validate() {
  // if you throw a bare string you won't get a stack trace.
    throw Error("thrown from CustomerModified");
  }
}

Note that and JavaScript the positioning of an open brace actually matters and should be appropriate as shown above - this isn't C#. It's also expected that you use lowerCamelCase for everything except constructor functions - this isn't C#.

Upvotes: 1

Related Questions