Webpack replacing external import object with object.default

Viewed 29

I'm writing a chrome extension using typescript with webpack to create the final javascript output file. I would like the extension to rely on a global instance of the external library Konva defined in the browser.

My typescript code is something like:

import Konva from "Konva";

for(const shp in Konva.shapes) {
   //Do something
}

Webpack.config.js file:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: '/content/init.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    externals: {
        "Konva": "Konva"
    },
    output: {
        filename: 'dist.min.js',
        path: path.resolve(__dirname, './dist')
    },
}

I'm then creating a <script></script> element with a reference to the dist.min.js file and adding it to the page.

When I look at the dist.min.js file, I see that the reference to Konva is effectively replaced with:

for(const t in s.default.shapes){ //equivalent to Konva.default.shapes
    //Do something
}

where s points to the global instance of Konva.

However, I'm looking for just

for(const t in s.shapes) { //equivalent to Konva.shapes
    //Do something
}

Since s.default is undefined.

It seems like webpack is replacing the instance to my external library object with object.default. Is there anyway I can disable this?

I've tried messing with externalsType as well as an IgnorePlugin without success. This is my first time working with typescript and webpack so I'm out of ideas for what to google next.

0 Answers
Related