Webpack Module not found when importing Typescript

Question

I am currently converting a project to use Webpack for bundling.

In my Typescript files I am importing modules as bellow, and am getting no errors as well as intelisense.

import * as $ from "jquery";
import * as CrudHelper from "../../ts-helpers/crud-helper";
import { ExportToExcel } from "../../ts-helpers/export-helper";
import { getParameterByName } from "../../ts-helpers/utils";

This was working with webpack however it turned out that the transpiled JS files created by visual studio were still hanging around and I had turned typescript compilation off.

After deleting the js files, when I run my webpack.config, I am getting module not found errors like

Module not found: Error: Can't resolve '../../ts-helpers/crud-helper' in 'C:\Users\alexl\git\eServicesWebpack\eServices\src\eServices.Web\Client\ts\Areas\Employee'
 @ ./Client/ts/Areas/Employee/Absence.ts 4:17-56
 @ multi ./Client/ts/Areas/Employee/Absence.ts

My tsconfig looks like

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

Is there something missing from my tsconfig?

Edit

This is my webpack.config

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var glob = require('glob');

var files = glob.sync("./Client/ts/Areas/**/*.ts");

var entry = {
    'vendor': "./Client/ts/Vendor.ts"
}

files.forEach(function (e) {
    var split = e.split('/');
    var entryName = "";
    if (split[5].indexOf('Modal') > -1) {
        entryName = split[4] + '/' + split[5].split('.')[0].replace('Modal', '') + '/' + split[5].split('.')[0];
    } else {
        entryName = split[4] + '/' + split[5].split('.')[0].replace('Modal', '') + '/' + split[5].split('.')[0].replace('Modal', '');
    }

    if (entry[entryName] === undefined) {
        entry[entryName] = [];
    }
    entry[entryName].push(e);
});

module.exports = function () {
    return {
        entry: entry,
        output: {
            path: path.resolve(__dirname, "../wwwroot/dist"),
            filename: "[name].bundle.js"
        },
        plugins: [
            //chunk vendor code into own bundle
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                    return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            //chunk webpack runtime code co vendor code can be cached
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest'
            }),
            new ExtractTextPlugin('styles.css'),
            //protect against old libraries that reference jquery symbols
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        use: 'css-loader'
                    })
                },
                {
                    test: /\.ts$/,
                    use: "awesome-typescript-loader"
                },
                {
                    test: /\.(jpg|png|gif)$/,
                    use: 'file-loader'
                }, {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000
                        }
                    }
                }
            ]
        }
    }
};

Alex Logan · Accepted Answer · 2017-04-04 13:33:30Z

2

Add '.ts' as resolvable extensions.

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

edited Apr 4, 2017 at 13:33

Alex Logan

1,2413 gold badges18 silver badges27 bronze badges

answered Apr 4, 2017 at 11:33

Mukesh Kumar

9722 gold badges11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leigh · Accepted Answer · 2017-04-04 13:33:19Z

0

Are you using any loader for your ts file in webpack.config file? You should have something like this

module:{
 loaders:[
       { 
                test: /\.tsx?$/, 
                loader: 'ts-loader'
        },
  ]
}

Update from Comments:

resolve: { 
     // Add '.ts' as resolvable extensions. 
     extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"] 
}

edited Apr 4, 2017 at 13:33

Leigh

28.9k10 gold badges58 silver badges109 bronze badges

answered Apr 4, 2017 at 11:19

Mukesh Kumar

9722 gold badges11 silver badges26 bronze badges

2 Comments

Mukesh Kumar Over a year ago

resolve: { // Add '.ts' as resolvable extensions. extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"] }

Alex Logan Over a year ago

Yes that worked thanks @Mukesh. Add it as an answer and I'll accept it.

Collectives™ on Stack Overflow

Webpack Module not found when importing Typescript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related