Webpack Module not found when importing Typescript

Alex Logan

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
                        }
                    }
                }
            ]
        }
    }
};
Mukesh Kumar

Add '.ts' as resolvable extensions.

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

TypeScript Module Importing & WebPack

From Dev

Module not found error when importing

From Dev

TypeScript. Ambient declaration was not found when importing "module/subdirectory" npm package

From Dev

Python Module Not Found Error when importing package

From Dev

Module not found: Can't resolve 'axios' when importing module to react

From Dev

Module not found error when importing Pyspark Delta Lake module

From Dev

Importing a css module into Webpack

From Dev

Webpack Imported Module is not a Constructor in VueJS when Importing Keycloak

From Dev

'Module not found' when importing a library service in the same workspace

From

Flow “Required module not found” when importing a CSS file

From

Webpack + React + TypeScript: Module not found ... in ... node_modules/react/

From Dev

TypeScript is compiling into this failing JS file when importing a module. Why?

From Dev

Typescript: Ignore implicitly any type when importing js module

From Dev

Error "Cannot find module" when importing a remote JSON file in TypeScript

From Dev

Module not found - Importing svgs in NextJS

From Dev

webpack Module not found issue

From Dev

webpack entry module not found

From Dev

Webpack externals Module not found

From Dev

Error when importing a module

From Javascript

Webpack Missing Module 'Module Not Found'

From Dev

Module not found when using flat-ui with webpack

From Dev

Webpack cannot find image when imported - module not found

From Dev

Importing a Typescript Module that has a constructor

From Dev

Importing typescript module into angular component

From Dev

Importing a JS module in a Typescript file

From Dev

Module not found while importing nested module

From Dev

Webpack + TypeScript + Module Loading

From Dev

Typescript Module + Webpack + RequireJS

From Dev

Why is this Typescript module importing and then reexporting another module?

Related Related

  1. 1

    TypeScript Module Importing & WebPack

  2. 2

    Module not found error when importing

  3. 3

    TypeScript. Ambient declaration was not found when importing "module/subdirectory" npm package

  4. 4

    Python Module Not Found Error when importing package

  5. 5

    Module not found: Can't resolve 'axios' when importing module to react

  6. 6

    Module not found error when importing Pyspark Delta Lake module

  7. 7

    Importing a css module into Webpack

  8. 8

    Webpack Imported Module is not a Constructor in VueJS when Importing Keycloak

  9. 9

    'Module not found' when importing a library service in the same workspace

  10. 10

    Flow “Required module not found” when importing a CSS file

  11. 11

    Webpack + React + TypeScript: Module not found ... in ... node_modules/react/

  12. 12

    TypeScript is compiling into this failing JS file when importing a module. Why?

  13. 13

    Typescript: Ignore implicitly any type when importing js module

  14. 14

    Error "Cannot find module" when importing a remote JSON file in TypeScript

  15. 15

    Module not found - Importing svgs in NextJS

  16. 16

    webpack Module not found issue

  17. 17

    webpack entry module not found

  18. 18

    Webpack externals Module not found

  19. 19

    Error when importing a module

  20. 20

    Webpack Missing Module 'Module Not Found'

  21. 21

    Module not found when using flat-ui with webpack

  22. 22

    Webpack cannot find image when imported - module not found

  23. 23

    Importing a Typescript Module that has a constructor

  24. 24

    Importing typescript module into angular component

  25. 25

    Importing a JS module in a Typescript file

  26. 26

    Module not found while importing nested module

  27. 27

    Webpack + TypeScript + Module Loading

  28. 28

    Typescript Module + Webpack + RequireJS

  29. 29

    Why is this Typescript module importing and then reexporting another module?

HotTag

Archive