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

Error TS2339: Property does not exist on type 'object' - Typescript arrow function issue

In my experience with Angular, I have noticed that I encounter typescript compile errors quite often when using fat arrow functions within an rxjs stream. Despite being able to run the app and having it transpile successfully, I am curious about how to re ...

What is the best way to set up my page to detect the "enter" key input when the form is not created with the <form> tag?

Within the HTML code, data is received and stored in variables within my TypeScript file. At the end of the HTML, there is a button that was created separately from any user input containers. This button triggers a function that processes the information i ...

Need a hand with ajax?

Recently, I've been having issues with a PHP script that packages files into a zip based on user input. Unfortunately, the server occasionally errors out and causes all the form data to be lost. To prevent this from happening in the future, I was info ...

The Radiobutton .val() function will always return a value, even if no radiobuttons have been selected

Within my form, I have 3 sets of radio buttons that are all properly labeled. When the user submits the form, I want to verify if they selected an option from each group. To achieve this, I have implemented the following method: $('.form').sub ...

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

Leverage jQuery in JSF 1.2, or opt for using jQuery in conjunction with JSP (JSTL)

While there are numerous technical inquiries revolving around JSF and jQuery, I am interested in making a well-informed decision between these two popular technologies. It is clear that jQuery can be used alongside JSF 1.2 (I am specifically referencing JS ...

Implementing serialization and deserialization functionality in Typescript for classes containing nested maps

I am currently facing a challenge in transforming Typescript code into NodeJS, specifically dealing with classes that contain Map fields of objects. I have been experimenting with the class-transformer package for serialization and deserialization (to JSON ...

Discover and transform any strings that begin with http & https into clickable links

Can I use jQuery to search a paragraph for all strings that begin with http & https and turn them into clickable links? I have my Twitter feed displayed on my website, but any lines starting with http & https are shown as regular text. Is it feasible to t ...

React-router error: Unable to call function _NavbarActions2.default.updateOnlineUsers

My current setup includes nodeJs and react version 0.14.2 with react-router 1.0.3 and history 1.17.0. When I navigate through my application, any action I try to perform results in "undefined", for example, fetching a character from the database. import a ...

Incorporating node packages into your typescript projects

I have been exploring various discussions on this forum but I am still unable to make it work. My goal is to compile the following code in TypeScript. The code is sourced from a single JavaScript file, however, due to issues with module inclusion, I am foc ...

Receiving errors in React/TS/material-ui when attempting to use a variable as a value for a grid property. Messages include "No overload matches" and "Type 'number' is not assignable to type..."

tl;dr: When using a variable as the value of a grid xs property in JSX, material-ui throws a TS error. I'm working on implementing grids in material-ui with React/TypeScript. The goal is to make the width of a specific element dependent on the quant ...

What could be causing my resize event to not trigger?

My goal is for the #sequence div to be full height of the browser window when the window size is greater than 920px in height. In such cases, I also want to trigger a plugin. If the window size is lower than 920px, then the height of the #sequence div shou ...

Passing large arrays of data between pages in PHP

I'm facing a challenge where I need to pass large arrays of data between pages. Here's the situation: Users input their Gmail login details in a form, which is then sent to an AJAX page for authentication and contact retrieval. If the login fail ...

Reviewing user input for any inappropriate characters using jQuery's functionality

When a username is inputted into the input box, I want to make sure that only valid characters are accepted. The following code shows what I have so far; but what should I replace "SOMETHING" with in the regular expression? var numbers = new RegExp( ...

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

Mastering the art of reading rows in ASP.NET using Java Script

Within the code snippet below, you'll find an image located in the second column. Clicking on this second column should allow me to access the data stored in the first column. Let's say we have a table with 10 rows. If the user clicks on the ico ...

An issue has occurred: The module named 'ApprovalModule' must be compiled using the JIT compiler, however, the necessary compiler '@angular/compiler' is not currently accessible

Issue: Error: The NgModule 'ApprovalModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available. JIT compilation is not recommended for production environments. Consider using AOT mode instead. Alterna ...

The absence of Index.ts in the TypeScript compilation cannot be resolved by simply including it

Upon integrating @fireflysemantics/slice into my Angular project, I encountered the following error: ERROR in ./node_modules/@fireflysemantics/slice/index.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: /home/ole/Temp/fs ...

The requested property does not exist within the 'CommonStore' type in mobx-react library

I'm diving into the world of TypeScript and I'm running into an issue when trying to call a function from another class. I keep getting this error - could it be that functions can only be accessed through @inject rather than import? What am I mis ...