Module parse failed

[KhoaSydney]

Hi @jbrantly ,

I have a very weird warning with the following details:

WARNING in ./app/hubs/modelling/retirement/test-inputs/dialogs/AddInvestmentController.js.map
Module parse failed: C:\Projects\Midwinter.ReasonableBasis\Midwinter.AdviceOS.Web\app\hubs\modelling\retirement\test-inputs\dialogs\AddInvestmentController.js.map Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| {"version":3,"file":"AddInvestmentController.js","sourceRoot":"","sources":["AddInvestmentController.ts"],"names":["AddInvestmentsController","AddInvestmentsController.constructor","AddInvestmentsController.activate","AddInvestmentsController.save","AddInvestmentsController.cancel"],"mappings":"OAGO,cAAc,MAAM,uBAAuB;AAElD;IAcIA,YAAoBA,MAAMA,EAAUA,MAAeA;QAA/BC,WAAMA,GAANA,MAAMA,CAAAA;QAAUA,WAAMA,GAANA,MAAMA,CAASA;QAC/CA,IAAIA,CAACA,QAAQA,EAAEA,CAACA;IACpBA,CAACA;IAEDD,QAAQA;IAERE,CAACA;IAEDF,IAAIA;QAEAG,IAAIA,CAACA,OAAOA,EAAEA,CAACA;IACnBA,CAACA;IAEDH,MAAMA;QAEFI,IAAIA,CAACA,OAAOA,EAAEA,CAACA;IACnBA,CAACA;AACLJ,CAACA;AA9BU,gCAAO,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAE/B,2BAAE,GAAG,cAAc,CAAC,+BAA+B,CAAC,YAAY,GAAG,iBAAiB,CA4B9F"}
 @ ./app/hubs/modelling/retirement/test-inputs/dialogs ^\.\/.*$

WARNING in ./app/hubs/modelling/retirement/test-inputs/dialogs/AddLoanController.js
Module parse failed: C:\Projects\Midwinter.ReasonableBasis\Midwinter.AdviceOS.Web\app\hubs\modelling\retirement\test-inputs\dialogs\AddLoanController.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import NavigationPath from "route/navigation.path";
| export default class AddLoanController {
|     constructor($scope, common) {
 @ ./app/hubs/modelling/retirement/test-inputs/dialogs ^\.\/.*$

WARNING in ./app/hubs/modelling/retirement/test-inputs/dialogs/AddLoanController.js.map

Why does ts-loader try to process the js file? Another weird thing is that the warning/ error only occurred in /test-inputs module. After I deleted the *.js file in that folder, everything is fine.

[jbrantly]

I don't think there is actually any ts-loader stuff there. The first error is because webpack somehow decided that a sourcemap file was imported. The second is because webpack doesn't understand ES6 modules. You need to either use babel after ts (recommended) or have ts target ES5.

I believe your module resolution extensions might be incorrect. Could you post your webpack config?

[KhoaSydney]

hi @jbrantly

this is the configuration

 module: {
        //noParse: [externalLibraryPaths + "kendo.all.min.js"],
        loaders: [
            // Exports Angular
            { test: /[\/]angular\.js$/, loader: "exports?angular" },
               //{ test: /[\/\\]angular\.js$/, loader: "exports?angular" },

            //export jquery to global window object. this is because there are javascript functions which requires
            // jquery in the app.html page. the two loader below will expose jquery to window.$ or window.jquery
            // We need jquery to hide and show app.
             { test: /jquery\.js$/, loader: 'expose?$' },
            { test: /jquery\.js$/, loader: 'expose?jQuery' },

            // Script Loaders
            { test: /\.coffee$/, loader: "coffee" },
            // Markup Loaders
            { test: /\.html$/, loader: "raw" },
            { test: /\.jade$/, loader: "template-html" },
            // Typescript loader nodeModulesPath
             { test: /\.ts$/, loader: 'babel-loader!ts-loader' },

            // Sass Loader
            { test: /\.scss/, exclude: /\.useable\.scss/, loader: "style!css!autoprefixer!sass" },
            { test: /\.useable\.scss/, loader: "style/useable!css!autoprefixer!sass" },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            {
                test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url?limit=10000'
            },
            // File loader
              { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.eot$/, loaders: ['file?hash=sha512&digest=hex&name=[hash].[ext]',
                                                                      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' ]}
        ]
    }

With second error, it is try to process .js not ts which I think its weird.

[jbrantly]

You left out the part I needed to see 😁 I need to see the "resolve" property.

[KhoaSydney]

Please have a look

 resolve: {
        // tells webpack to query these directories for modules
        root: [appModulesPath, nodeModulesPath, bowerComponentsPath],
        alias: {
            jquery: externalLibraryPaths + 'jquery',
            angular: externalLibraryPaths + 'angular',
            bootstrap: bowerComponentsPath + "bootstrap/js/modal",
            "BootstrapDialog": appModulesPath + "/components/bootstrap-dialog/dist/js/bootstrap-dialog",
            toastr: externalLibraryPaths + "toastr",
            "angular-new-router": externalLibraryPaths + "router.es5",
            breeze: bowerComponentsPath + "breezejs/breeze.debug",
            "breeze.angular": bowerComponentsPath + "breezejs/labs/breeze.angular",
            "breeze.directives": appModulesPath + "/components/breezejs/breeze.directives",
            moment: bowerComponentsPath + "moment/moment",
            "angular-block-ui": bowerComponentsPath + "angular-block-ui/dist/angular-block-ui",
            "underscore": bowerComponentsPath + "underscore/underscore"
        },
        extensions: [
            '',
            ".webpack.js", ".web.js", '.ts',
            '.js', '.coffee',
            '.html', '.jade',
            '.css', '.styl', '.scss', '.less'
        ]
    },
    resolveLoader: {
        root: nodeModulesPath
    },

[jbrantly]

I just noticed this line

./app/hubs/modelling/retirement/test-inputs/dialogs ^\.\/.*$

Are you doing some kind of dynamic require? Like

var someDialog = '...'
var dialog = require(someDialog)

If so webpack detects that as a dynamic require and will attempt to bundle all files in a directory. You can control this though.

[jbrantly]

BTW, your extensions looked right to me, so I don't think that was it. Without actually having access to your source I do think its a dynamic require that's causing the trouble. You can fix dynamic requires by using the ContextReplacementPlugin

plugins: [ webpack.ContextReplacementPlugin(/dialogs$/, /\.ts$/) ]

I haven't actually tested the above, you might have to fiddle with the regular expression to get it right, but the basic idea is to make webpack only try to bundle the .ts files in the directory instead of all files. Note that the original regex is ^\.\/.*$

[jbrantly]

@KhoaSydney Were you able to resolve this?

[KhoaSydney]

hi @jbrantly

It is the javascript var dialog = require(someDialog) that causes the problem. However, I have been using this in other places and there are no warning/error like this.

[jbrantly]

It all depends on what files are in the directory. It's possible the other places didn't have sourcemaps laying around.

I'm going to close this as it's not a bug and not really related to ts-loader specifically, but feel free to ask any additional questions.