msal npm build execution halted due to loader issues

I've been working on setting up msal for use with nodejs. My goal is to verify that emails are successfully received by test users in end-to-end webdriverio tests.

Following the npm msal guide here, I made good progress but ran into some errors while running:

npm run build

.

npm run build

> [email protected] build C:\Users\User\TestAutomation\node_modules\msal
> npm run clean && npm run doc && npm run build:modules && webpack && grunt && npm test


...
(ERROR messages related to Src files and loaders)
...

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! [email protected]-->
failed at script (more logging output)

...

This appears to be a babel error:

You may need an appropriate loader to handle this file type.

However, I'm not sure how to resolve it. I attempted installing Babel as well, unsure if it needs to be integrated somewhere.

As I am relatively new to these tools, it's likely a simple mistake. After spending some time troubleshooting, I figured reaching out for assistance would be beneficial. If I manage to solve it, I'll update this post.

A big thank you to the MS team for providing msal.

Update: Including webpack.config.js

The webpack.config.js file autogenerated 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 = {
    // Configuration details
}

module.exports = config; 

Answer №1

If you encounter an error stating "You may need an appropriate loader to handle this file type,"
it simply means that a loader is missing for a particular file type.

Upon closer examination of the error message, it appears to be encountering issues with .ts files. Is there a possibility that you overlooked adding a Typescript file loader (ts-loader) for these specific typescript files where the problem persists?

UPDATE

1) It seems like you are utilizing loaders: within your loaders setup. I am uncertain if this has any impact on the configuration as it appears to still function in Webpack 3. (Note that inserting loaders: into my Webpack 4 config renders it invalid during compilation).

To analyze if it significantly alters anything, I delved deeper and stumbled upon the typescript example for MSAL here. Interestingly, they also incorporate rules within their configuration.

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

Frankly speaking, I cannot determine if this brings about any notable change or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Linked List Operations: Issues with the removeHead() and contains() Functions

Incorporating ES6 syntax, the challenge is to construct a linked list and subject it to an npm linter test. Below is the code implementation: class LinkedList { constructor() { this.head = null; this.tail = null; // Do not alter anything wit ...

Error encountered during npm execution: The build command was executed with the following parameters: `react-scripts --max_old_space_size=2048 build`

ERROR: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deacbbbfbdaaf3bfb3aeb2b7b8a7f3aeacb1b4bbbdaaf3aab6acbbbb9eeef0eff0ee">[email protected]</a> build: `react- ...

Oops! An issue occurred during bundling: Unable to locate preset "module:metro-react-native-babel-preset" in the directory "C:\Users\..."

I recently started working with react-native and I keep encountering an error when I execute react-native run-android My package.json was functioning properly before, but now it appears to be causing issues. This is my current package.json file: { "n ...

The isotope plugin import failed, displaying the error message "The function $(container).isotope does not exist."

I've been struggling to get the Metafizzy Isotope plugin to work, but I'm having no success. The Network tab indicates that it's not loading properly. After installing isotope-layout and requiring it in my main-file.js, the code still doesn ...

Integrating webpack with kafka-node for seamless communication between front

I am in the process of embedding a JavaScript code that I wrote into an HTML file. The script requires kafka-node to function properly, similar to the example provided on this link. To achieve this, I am using webpack to bundle everything together. I am fo ...

There seems to be an issue with AppModule in your code. The error message states that it is not recognized as an NgModule and the problem

After upgrading to node 6, angular 4, typescript 2.3.2, and @angular/cli 1.02, I meticulously followed the steps outlined in the Guide for updating @angular/cli. I will include my entire package.json below in case there are any relevant details. The specif ...

Having issues with npm installing the bassaudio library

I've been attempting to add the bassaudio library to my project, but every npm installation attempt results in an error. No matter what troubleshooting steps I take, the issue persists. The specific error message I encounter when running npm install b ...

Can you explain the distinction among pnpm create, pnpx, and dlx?

When it comes to package management, the pnpm tool provides three distinct commands as alternatives to npm's familiar npx command. These include pnpm create, pnpx, and pnpm dlx. While they all seem to serve a similar purpose, there may be nuances that ...

Having trouble installing Phantomjs on Windows using npm?

Currently, I am attempting to install phantom.js while at work. Although I have downloaded the source code and installed the .exe file to access the phantom shell, it still remains uninstalled. Every time I try running commands like node ./install.js or np ...

The compatibility of MUI installation with React 16 is currently not functioning

My React version is 16.1.3 and I am encountering difficulties trying to install the following two packages: @mui/material @mui/x-data-grid I have attempted to install all versions, from the lowest to the highest, but unfortunately none seem to work. In m ...

Error Unhandled in Node.js Application

I have encountered an issue in my NodeJS application where I have unhandled code in the data layer connecting to the database. I deliberately generate an error in the code but do not catch it. Here is an example: AdminRoleData.prototype.getRoleByRoleId = ...

Is there a kind soul out there who can shed some light on the error that pops up when I try to execute "npm run

As I embark on creating my first angular app, I started by installing it using the command npm i -g @angular/cli. However, when I attempt to create a new app with npm run ng new app, an error pops up: npm ERR! path E:\ddii\package.json npm ...

Saving flatlist item data upon pressing in a React Native app

Recently delving into the world of react native, I am eager to learn how to save the items from the flatlist upon pressing them and then showcasing them. Initially, I incorporated an Autocomplete view for selecting countries and subsequently exhibiting the ...

Expo Snack shows the error message "package not found in registry" while trying to add an npm package

While working on my project in Expo Snack, I came across an issue with the public npm package mentioned below. The strange thing is that I can access and utilize the package locally within my app without any problems, but when I try to run it through Exp ...

Issue encountered during react-router-dom installation

Warning: npm has disabled recommended protections by using --force. Please run the following command to install react-router-dom in your project file: npm install react-router-dom Error code ERESOLVE encountered while resolving dependencies. Error! ERES ...

Error code -8 occurred while executing the yarn dev command, unable to identify the issue

I'm facing an issue with my development script that is structured like this: "scripts": { "dev": "./test.sh", }, Upon running the 'yarn dev' command, I encounter the following error message: Internal Error: ...

What steps can I take to successfully complete Jest tests on Circle CI?

I have successfully passed all the tests in Circle CI for my app. However, after passing, it hangs indefinitely until it times out at 10 minutes and is marked as failed. Locally, all tests pass without any issues: Test Suites: 1 failed, 11 passed, 12 tota ...

Guidelines for utilizing a loader to handle a TypeScript-based npm module

I am currently facing a challenge with my React and JavaScript project as I attempt to integrate an npm module developed with TypeScript. The issue lies in configuring my project to compile the TypeScript code from this module, resulting in the error messa ...

NPM retrieval was unsuccessful

Here's a simple one: npm install socket.io npm http GET https://registry.npmjs.org/socket.io npm http 304 https://registry.npmjs.org/socket.io npm http GET https://registry.npmjs.org/-/socket.io-0.9.10.tgz npm http 404 https://registry.npmjs.org/-/s ...

What is the significance of the .bin folder located within the node_modules directory? And, could you explain

Why is the .bin directory present in the node_modules folder? In a different discussion on Stack Overflow, it was mentioned that: "it's where your binaries (executables) from your node modules are located." Furthermore, could someone elaborate on t ...