Module not found: Error: Can't resolve

[matzito]

Do you want to request a feature or report a bug?

BUG

What is the current behavior?

Cannot resolve AMD module with d.ts and index file (re-export)

If the current behavior is a bug, please provide the steps to reproduce.

NA

What is the expected behavior?

Able to resolve amd re-exported modules.

If this is a feature request, what is motivation or use case for changing the behavior?

N/A

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

"awesome-typescript-loader": "3.2.1",
"ts-loader": "3.2.0",
"clean-webpack-plugin": "0.1.17",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "2.30.1",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.3",
"webpack-merge": "4.1.1",

Issue in Detail:

ERROR in ./app/app.component.ts
Module not found: Error: Can't resolve '@common' in 
 @ ./app/app.component.ts 16:16-34
 @ ./app/app.module.ts
 @ ./app/main.ts

I have a custom library that I want to include in my build, this library was created with typescript and AMD modules. I'm also using an index file to re-export stuff and the import everything with something like:

import { a,b,c,d,e,f,g } from '@common'

I have the following project structure:

--app/ 
-----dir1/
-----app.module.ts
-----app.component.ts
-----main.ts 
--scripts/
---_app/ 
-----common.d.ts
-----common.js
--webpack.config.js
--tsconfig.js

My webpack.config:

entry: {
       vendor: './src/vendor',
       //util: './scripts/_app/util.js',
       //common: './scripts/_app/common.js',
       app: './app/main'
   },
output: {
       filename: "[name].js",
       path: __dirname + "/dist",
       // Making sure the CSS and JS files that are split out do not break the template cshtml.
       publicPath: "/dist/",
       // Defining a global var that can used to call functions from within ASP.NET Razor pages.
       library: "app",
       libraryTarget: "var"
   },
resolve: {
       // Add ".ts" and ".tsx" as resolvable extensions.
       extensions: [".js", ".tsx", ".ts", ".json", ".html"],
       modules: [
           path.resolve('.'),
           path.join(__dirname, "./scripts/_app"),
           path.resolve('./node_modules')
       ]
   },
   module: {
       loaders: [
           // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
           {
               test: /\.tsx?$/,
               loader: 'ts-loader'
           },

I tried with ts-loader and awesome-typescript-loader with no luck.

[sokra]

Where is you module named @common? I don't see it in your project structure?

[matzito]

It is defined in common.js and common.d.ts

common.d.ts

    /**
     * Index file for common
     *
     * Ma - This file, will help us to export our components using an alias
     *      Then we will be able to import them like this:
     *      import { ClientContext, User, ControllerBase } from "@common";
     */
    export * from "common/Constants";
    export * from "common/InterfacesAndBaseClasses";
    export { Alert, AlertType } from "common/Alert";
    export { User } from "common/User";`

common.js

/**
 * Index file for common
 *
 */
define("@common", ["require", "exports", "common/Constants", "common/InterfacesAndBaseClasses", "common/Alert", "common/User"], function (require, exports, Constants_1, InterfacesAndBaseClasses_1, Alert_1, User_1) {
    "use strict";
    function __export(m) {
        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
    }
    Object.defineProperty(exports, "__esModule", { value: true });
    __export(Constants_1);
    __export(InterfacesAndBaseClasses_1);
    exports.Alert = Alert_1.Alert;
    exports.AlertType = Alert_1.AlertType;
    exports.User = User_1.User;

[sokra]

webpack doesn't support named AMD modules. You have to use file based naming with anonymous define.