CODEWITHSUNDEEP
javascripttypescriptwebpack
tholo
tholo

Reputation: 541

Typescript - ReferenceError: exports is not defined

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:

{
  "compilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "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.

Upvotes: 1

Views: 10903

Answers (2)

José Quinto Zamora
José Quinto Zamora

Reputation: 2118

Try to set "allowJs": false

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

Upvotes: 1

user3821892
user3821892

Reputation: 87

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 command line utility called Browserify. See http://thejsguy.com/javascript/browserify/2015/01/05/browserify-getting-started.html

Upvotes: 1

Related Questions