Chris Gelon Chris Gelon - 2 months ago 20
jQuery Question

Travis CI, Mocha Test, Webpack Compilation Error: Module not found: 'jQuery'

I've been trying to get automated tests set up for my repository using mocha-webpack and Travis CI. My tests run fine on my local machine, but they haven't been able to complete through Travis CI yet. I haven't been able to figure out this last 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'


Based off of the error message, it looks like webpack is trying to resolve the jQuery module (I'm assuming the import is added through my webpack.ProvidePlugin call, as there are no jquery imports in myfile.ts) in my files, instead of looking for it in node_modules.

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 Source

I figured it out through some experimentation.

My webpack.config.js had defined jquery as an external:

externals: ["jquery", "moment"]

This caused the module to be removed from the environment. However, I was seemingly able to get it to run on my local box through the ProvidePlugin:

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

Note the uppercase Q in jQuery. For my local environment, jQuery (which was not removed as it wasn't defined in the externals line) was defined as the jquery module, however on travis-ci, it was nowhere to be found. I'm still not sure why "jQuery" worked for me in the first place.

By removing the externals line from the config, and changing the jQuery to be all lowercase, it fixed my issue:

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