In my console I keep getting ReferenceError: exports is not defined as an error.

Code:

app.ts:

import {IDetails} from "./interfaces/IDetails";

class MyClass implements IDetails{
    constructor(){}

    public render (elem: string, text: string) {
        let el: HTMLElement = document.querySelector(elem);
        el.textContent = text;
        el.innerText = text;
    }
}

window.onload = () => {
    let myClass = new MyClass();
    myClass.render('body', 'Hello World!');
};

IDetails.ts:

export interface IDetails {
    elem: string,
    text: string
}

tsconfig.json:

{
  "pilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "monjs",
    "target": "es5",
    "removeComments": true,
    "allowJs": true
  }
}

webpack.config.js:

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'bundle.js',
        path: __dirname
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    transpileOnly: true
                }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
};

What am I doing wrong here?

EDIT: I have edited my question with webpack.config.js and tsconfig.json. It might also be worthy to notice that I'm viewing the files directly from Webstorm in my Chrome browser. Could that be an issue?

Thank you.

In my console I keep getting ReferenceError: exports is not defined as an error.

Code:

app.ts:

import {IDetails} from "./interfaces/IDetails";

class MyClass implements IDetails{
    constructor(){}

    public render (elem: string, text: string) {
        let el: HTMLElement = document.querySelector(elem);
        el.textContent = text;
        el.innerText = text;
    }
}

window.onload = () => {
    let myClass = new MyClass();
    myClass.render('body', 'Hello World!');
};

IDetails.ts:

export interface IDetails {
    elem: string,
    text: string
}

tsconfig.json:

{
  "pilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "monjs",
    "target": "es5",
    "removeComments": true,
    "allowJs": true
  }
}

webpack.config.js:

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'bundle.js',
        path: __dirname
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    transpileOnly: true
                }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
};

What am I doing wrong here?

EDIT: I have edited my question with webpack.config.js and tsconfig.json. It might also be worthy to notice that I'm viewing the files directly from Webstorm in my Chrome browser. Could that be an issue?

Thank you.

• javascript
• typescript
• webpack

• Is this in Node.js? – EvSunWoodard Commented May 11, 2017 at 19:12
• I'm viewing from Webstorm directly. Please check my edits. – tholo Commented May 11, 2017 at 19:16
• I have had the same problem and tried to fix it for couple of minutes with no effect and the problem was that I had my output file in root directory but webpack was creating file in dist/ directory I was using the old one in root directory. :facepalm: – jcubic Commented Jul 12, 2018 at 18:57

2 Answers 2

Try to set "allowJs": false

Or to exclude the webpack config file from the typescript piler using exclude https://www.typescriptlang/docs/handbook/tsconfig-json.html

It may be related to your Typescript config options if you're exporting CommonJS modules. You can fix this by running your bundle through a mand line utility called Browserify. See http://thejsguy./javascript/browserify/2015/01/05/browserify-getting-started.html