Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

I've been struggling to automate tests for my repository using mocha-webpack and Travis CI. The local machine runs the tests smoothly, but Travis CI hasn't been able to complete them yet due to an unresolved error:

WEBPACK  Failed to compile with 1 error(s)
Error in ./src/ts/myfile.ts
Module not found: 'jQuery' in '/home/travis/build/myname/myrepo/src/ts'

The error suggests that webpack is looking for the jQuery module within my files instead of node_modules (I assume it's being imported through webpack.ProvidePlugin as there are no direct imports in myfile.ts).

test script

mocha-webpack --webpack-config webpack.config.js --require jsdom-global/register

dependencies

"jquery": "^3.2.1"

dev dependencies

"@types/chai": "^4.0.4"
"@types/jquery": "3.2.0"
"@types/mocha": "^2.2.42"
"chai": "^4.1.1"
"css-loader": "^0.28.5"
"jsdom": "^11.2.0",
"jsdom-global": "^3.0.2"
"mocha": "^3.5.0"
"mocha-typescript": "^1.1.7"
"mocha-webpack": "^1.0.0-rc.1"
"sass-loader": "^6.0.6"
"ts-loader": "^2.3.3"
"typescript": "^2.4.2"
"webpack": "^3.5.5"

webpack.config.js

const webpack = require("webpack");
module.exports = {
  target: "node",
  externals: ["jquery", "moment"],
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: "ts-loader" },
      { test: /\.scss$/, loaders: ['css-loader/locals?modules', 'sass-loader'] }    
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jQuery",
        jQuery: "jQuery"
    })
  ]
}

travis

language: node_js
node_js:
  - "node"

cache:
  directories:
    - "node_modules"

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5",
        "lib": ["es2016", "dom"],
        "typeRoots": [
            "node_modules/@types"
        ],
        "experimentalDecorators": true // For the decorators in Mocha tests.
    },
    "compileOnSave": true,
    "include": [
        "src/**/*",
        "test/*"
    ]
}

Answer №1

After some trial and error, I managed to solve the issue.

I realized that in my webpack.config.js file, jquery was set as an external dependency:

externals: ["jquery", "moment"]

This caused the module to be excluded from the environment. However, I found a workaround by using the ProvidePlugin on my local machine:

new webpack.ProvidePlugin({
    $: "jQuery",
    jQuery: "jQuery"
})

It's important to note the uppercase Q in jQuery. On my local setup, jQuery (which was not marked as external) was linked to the jquery module, but this wasn't the case on travis-ci. I'm still unsure why "jQuery" worked for me initially.

To resolve the issue, I removed the externals line from the config and switched all instances of jQuery to lowercase:

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
})

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

Tips for automatically refreshing a div in Drupal

I'm currently working with Drupal and I'm looking to update a specific field every X seconds without having to refresh the entire page. My current approach involves using the following code: <script> var refreshId = setInterval(function ...

Errors arose due to the deployment of TypeScript decorators

Using TypeScript in a brand new ASP.NET Core project has brought some challenges. We are actively incorporating decorators into our codebase. However, this integration is causing numerous errors to appear in the output of VS2015: Error TS1219 Experim ...

Exploring the archives of PubNub within Angular5

I've been working on integrating PubNub history into my web app, but I'm currently only able to view it in the console. Here's what I have so far: pubnub.history( { channel: 'jChannel', reverse: false, ...

Navigating in Angular with parameters without modifying the URL address

In a nutshell, my goal is to navigate to a page with parameters without showing them in the URL. I have two components: Component A and B. What I want to do is route to B while still needing some parameters from A. I know I can achieve this by setting a ...

Loop through a collection of elements of a certain kind and selectively transfer only certain items to a different collection of a different kind

When working with typescript, I am faced with the challenge of dealing with two arrays: interface IFirst{ name: string; age: number } interface ISecond { nickName: string; lastName: string; } myFirstArray: IFirst[]; mySecondArray: ISe ...

A Guide on Modifying a Pseudo Element When Clicked

How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...

You are required to select one of the two radio buttons in order to proceed with the validation process

To prevent the user from proceeding to the next page, validation is necessary. They are required to select one of the radio buttons, etc. <div class=""> <div class="radiho" style="display: block"> <input type="checkbox" name="sp ...

Adjusting element position while scrolling

Objective The goal is to have the page navigation display lower on the page by default. This will provide a cleaner layout as shown in the image below. Context An interactive element for navigation was implemented utilizing Headroom.js. This library d ...

Top method for displaying loading popup using $http

As a newcomer to Angular, I am curious to know if it's possible to achieve the following scenario and also where I can find documentation to help me get started. The scenario: In my MEAN app, there is currently a 'loading...' popup controll ...

The Crimson Thread when incorporating tsx into Next.js

While working with TSX in React and TypeScript, I encountered an issue. A red line appeared on the screen even though the project runs successfully. Can anyone explain why this red line is appearing and why the classes in TSX are not functioning properly ...

Performing operations on information within a map function

While using toLocaleString within this map, I encountered an issue where only one of the payment.amount's returned formatted as currency. {props.paymentDates.map((payment, index) => ( <tr key={"payment-" + index}> <td>{i ...

Verify the occurrence of an element within an array inside of another array

Here is the scenario: const arr1 = [{id: 1},{id: 2}] const arr2 = [{id: 1},{id: 4},{id: 3}] I need to determine if elements in arr2 are present in arr1 or vice versa. This comparison needs to be done for each element in the array. The expected output sho ...

Error: The nested property of the dynamic type cannot be indexed

Within my coding project, I've devised an interface that includes various dynamic keys for API routes, along with the corresponding method and response structure. interface ApiRoutes { "auth/login": { POST: { response: { ...

Is it recommended for the main, module, and browser properties in package.json to reference the minified version or the source

When developing a JavaScript library, it is important to consider the structure in which it will be published. This typically includes various bundles such as CJS, ESM, and UMD, each with their own source, minified, and map files. my-package\ dist& ...

Converting JSON data types into TypeScript interface data types

Struggling to convert data types to numbers using JSON.parse and the Reviver function. I've experimented with different options and examples, but can't seem to figure out where I'm going wrong. The Typescript interface I'm working with ...

I am deciding between using CommonJS or ES module for my sub packages in a Yarn workspace for my Next.js project. Which one

Currently working on a Next.js monorepo project using TypeScript and yarn workspace. Within the yarn workspace, there are two packages: /web and /api. The /web package is a next.js project, while /api serves as a shared subpackage utilized by /web. /my-pr ...

Using JavaScript to replace a radio button with the term "selected"

I am currently in the process of developing a quiz that is powered by jQuery and possibly JSON, with data being stored in a database. Everything is functioning correctly at this point, but I would like to enhance the user interface by hiding the radio butt ...

Stop fullscreen mode in Angular after initiating in fullscreen mode

Issue with exiting full screen on Angular when starting Chrome in full-screen mode. HTML: <hello name="{{ name }}"></hello> <a href="https://angular-go-full-screen-f11-key.stackblitz.io" target="_blank" style=& ...

Error in licensing for PHP and JQuery in Bluemix platform

Currently, I am in the process of creating a validation form using Bluemix DevOps. My approach involves utilizing jQuery and PHP to cross-check whether an email address already exists in the database. Here is an excerpt of the code snippet: if(error == 0) ...

Select a Button to randomly choose another Button

I am currently developing a dynamic Bootstrap OnePage-Website using HTML, CSS, and JavaScript. The highlight of this website is the Team section where users can book appointments with one of three team members by clicking on a corresponding button beneat ...