Reference Error: Function is not defined.Webpack

Question

I need to use an external script file in my application.I added that script in my vendor.ts file as follows

import '../src/app/forms/form-signature/SigWebTablet.js';

and my webpack configuration file looks like

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader'
                    },
                    {
                        loader: 'angular2-template-loader'
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].json'
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                use: [
                    {
                        loader: 'file-loader?name=assets/[name].[ext]',
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },


    plugins: [
           new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
             /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),

        /* http://stackoverflow.com/a/38825995/184509 */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

when I tried call a function from that script I got a reference Error. But when I put that script in index.html page it works fine.

import './SigWebTablet.js';

declare let [ SetTabletState]: any;

..........

    export class FormSignatureComponent implements OnInit {
    ngOnInit() {
            let canvas = <HTMLCanvasElement>document.getElementById("mycanvas");
            this.ctx = canvas.getContext("2d");
            SetTabletState(0, this.tmr);        
    }
}

I dont know how to resolve this.I thought to keep the external js files in the vendor.ts file. And also I checked that vendor.js bundled file in the browser console and found that the function is there. But somehow the script file is not referenced. My question is about why it is not referenced when I added the script in vendor.ts but not in index.html Trying to figure out where I made the mistake.

score 0 · Answer 1 · answered Sep 21 '17 at 07:20

This is what I can think of:

You should be able to import js file say example.js as follows:

import * as importedExample from './example'

In ts compiler we have a flag like --allowJs, which enables this kind of import. You need to check for awesome-typescript-loader.

About how it worked, when you included in html : because effectively your js file bypassed the typescript compiler. You directly called the file in html and used its functions.

Find more about this here and here.

Reference Error: Function is not defined.Webpack

1 Answers1