0

I'm trying to build msal so I can use it with nodejs. Specifically, I would like to verify e-mails are received by test users in end-to-end webdriverio tests.

I followed the npm msal guide here and got pretty far, but reached some errors during:

npm run build

.

npm run build

> msal@0.1.7 build C:\Users\User\TestAutomation\node_modules\msal
> npm run clean && npm run doc && npm run build:modules && webpack && grunt && npm test


> msal@0.1.7 clean C:\Users\User\TestAutomation\node_modules\msal
> shx rm -rf dist docs lib-commonjs lib-es6


> msal@0.1.7 doc C:\Users\User\TestAutomation\node_modules\msal
> typedoc --out ./docs ./src/**/* --gitRevision dev


Using TypeScript 2.2.2 from C:\Users\User\TestAutomation\node_modules\msal\node_modules\typedoc\node_modules\typescript\lib
Rendering [========================================] 100%

Documentation generated at C:\Users\User\TestAutomation\node_modules\msal\docs


> msal@0.1.7 build:modules C:\Users\User\TestAutomation\node_modules\msal
> tsc && tsc -m es6 --outDir lib-es6

Hash: 898d9837b77694c4a729
Version: webpack 3.12.0
Time: 244ms
          Asset     Size  Chunks             Chunk Names
        msal.js  8.59 kB    0, 1  [emitted]  msal
    msal.min.js  3.26 kB    1, 0  [emitted]  msal.min
    msal.js.map  3.67 kB    0, 1  [emitted]  msal
msal.min.js.map  14.4 kB    1, 0  [emitted]  msal.min
   [0] ./src/UserAgentApplication.ts 271 bytes {0} {1} [built] [failed] [1 error]
   [1] ./src/Logger.ts 290 bytes {0} {1} [built] [failed] [1 error]
   [2] multi ./src/index.ts 28 bytes {0} {1} [built]
   [3] ./src/index.ts 354 bytes {0} {1} [built]
   [4] ./src/User.ts 248 bytes {0} {1} [built] [failed] [1 error]
   [5] ./src/Constants.ts 357 bytes {0} {1} [built] [failed] [1 error]
   [6] ./src/RequestInfo.ts 247 bytes {0} {1} [built] [failed] [1 error]
   [7] ./src/Authority.ts 209 bytes {0} {1} [built] [failed] [1 error]

ERROR in ./src/Logger.ts
Module parse failed: Unexpected token (26:7)
You may need an appropriate loader to handle this file type.
| import { Utils } from "./Utils";
|
| export interface ILoggerCallback {
|   (level: LogLevel, message: string, containsPii: boolean): void;
| }
 @ ./src/index.ts 2:0-34 3:0-36
 @ multi ./src/index.ts

ERROR in ./src/Constants.ts
Module parse failed: Unexpected token (28:31)
You may need an appropriate loader to handle this file type.
|  */
| export class Constants {
|   static get errorDescription(): string { return "error_description"; }
|   static get error(): string { return "error"; }
|   static get scope(): string { return "scope"; }
 @ ./src/index.ts 5:0-40
 @ multi ./src/index.ts

ERROR in ./src/RequestInfo.ts
Module parse failed: Unexpected token (28:7)
You may need an appropriate loader to handle this file type.
|  */
| export class TokenResponse {
|   valid: boolean;
|   parameters: Object;
|   stateMatch: boolean;
 @ ./src/index.ts 6:0-45
 @ multi ./src/index.ts

ERROR in ./src/User.ts
Module parse failed: Unexpected token (30:17)
You may need an appropriate loader to handle this file type.
| export class User {
|
|     displayableId: string;
|     name: string;
|     identityProvider: string;
 @ ./src/index.ts 4:0-30
 @ multi ./src/index.ts

ERROR in ./src/Authority.ts
Module parse failed: Unexpected token (34:7)
You may need an appropriate loader to handle this file type.
|  * @hidden
|  */
| export enum AuthorityType {
|   Aad,
|   Adfs,
 @ ./src/index.ts 7:0-38
 @ multi ./src/index.ts

ERROR in ./src/UserAgentApplication.ts
Module parse failed: Unexpected token (39:8)
You may need an appropriate loader to handle this file type.
| import { AuthorityFactory } from "./AuthorityFactory";
|
| declare global {
|     interface Window {
|         msal: Object;
 @ ./src/index.ts 1:0-62 8:0-51
 @ multi ./src/index.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! msal@0.1.7 build: `npm run clean && npm run doc && npm run build:modules && webpack && grunt && npm test`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the msal@0.1.7 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

I think this is a babel error:

You may need an appropriate loader to handle this file type

But I am not sure how to resolve it. I tried installing babel also, not sure if I need it somewhere.

I'm a bit new to these tools, so I'm sure this is a simple mistake. I spent a bit of time on it, so I wanted to reach out for help. If I resolve it, I'll update this question.

Much appreciated to the MS team for providing msal.

Update: Including webpack.config.js

The webpack.config.js auto-generated by npm install msal:

var path = require("path");
var webpack = require("webpack");

var PATHS = {
    entryPoint: path.resolve(__dirname, 'src/index.ts'),
    bundles: path.resolve(__dirname, 'dist'),
}

var config = {

    entry: {
        'msal': [PATHS.entryPoint],
        'msal.min': [PATHS.entryPoint]
    },

    output: {
        path: PATHS.bundles,
        filename: '[name].js',
        libraryTarget: 'umd',
        library: 'Msal',
        umdNamedDefine: true
    },

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

    devtool: 'source-map',
    plugins: [

      new webpack.optimize.UglifyJsPlugin({
          minimize: true,
          sourceMap: true,
          include: /\.min\.js$/,
      })
    ],
    module: {

        loaders: [{
            test: /\.tsx?$/,
            loader: 'awesome-typescript-loader',
            exclude: /node_modules/,
            query: {
                declaration: false,
            }
        }]
    }
}

module.exports = config; 
user176692
  • 780
  • 1
  • 6
  • 21

1 Answers1

1

You may need an appropriate loader to handle this file type refers to the fact that you're missing a loader for a specific file type.

Looking at the error message, it seems to be failing on the .ts files. Any chance you forgot to add a Typescript file loader (ts-loader) for the typescript files which it seems to be failing on?

EDIT

1) You're using loaders: for the loaders. I don't know if this affects it in any sense, since it seems the configuration still can be used in Webpack 3. (I cannot use loaders: inside my Webpack 4 config, as it's marked as invalid by webpack upon compilation).

So I wanted to figure out if it made a big difference, and whilst stumbling around I did find the typescript sample for MSAL here. It looks like they're using rules as well in their configuration.

 module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },

Honestly, I don't know if this makes a difference or not.

Bart de Ruijter
  • 917
  • 10
  • 21
  • I tried repro'ing this on another Win machine from scratch successfully. After npm install msal, cd'ing to node_modules/msal and npm install, webpack.config.js shows: loader: 'awesome-typescript-loader' . So I think it has the ts-loader equivalent already? Only dependency was tslib, which I can see in node_modules. – user176692 Jul 24 '18 at 16:16
  • It seems awesome-typescript-loader is an equivalent loader, and if it runs from scratch on another machine, the only assumption I got left is that something went wrong during the installation. Maybe (and hopefully) a fresh reinstall would resolve your issue? – Bart de Ruijter Jul 25 '18 at 08:08
  • Sorry, I meant I reproduced the problem from scratch on another machine. I also ran into this in a bash environment. If I don't figure out the build problem soon, which may be related to webpack, I'll probably move on to the Google tools. – user176692 Jul 25 '18 at 14:57
  • Ah okay, I misunderstood you. Shouldn't be an issue, if you could provide a snippet of your webpack we could pinpoint where it might be going wrong. I ain't a webpack expert, but an extra set of eyes won't hurt :) – Bart de Ruijter Jul 26 '18 at 08:33
  • Included the webpack.config.js FYI – user176692 Jul 27 '18 at 01:30
  • I noticed the webpack rules changes also, but I did not implement it properly. Many of the files are building now! The first error is: Could not find implementations for the following rules specified in the configuration: label-undefined no-duplicate-key no-unreachable – user176692 Jul 30 '18 at 14:57
  • Sorry for the delayed response, first of all, great news! Secondly, mind providing a bit more information regarding the error? My first guess would've been an improper naming/config option for the webpack file, but a quick google seems to indicate it's related to the tslint.json being improper – Bart de Ruijter Aug 01 '18 at 23:41
  • Hey, really appreciate the progress we made here and the help, but I got MS Graph API working instead. I'll follow-up with error information time permitted, but will consider this as unresolved in the meantime. Testing a fix or solution to the Outlook API problem should be quick, so I'll mark any answer that resolves this as the 'Answer' once I see it. – user176692 Aug 04 '18 at 15:16
  • No worries, as long as you end up with a working solution one way or another, that's all that is important! I've been down the same rabbit hole from webpack to Graph Api and it's a science on it's own. I wouldn't mind helping you fix it, when time permits, and till then I wish happy coding to you! – Bart de Ruijter Aug 05 '18 at 22:12