Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

alexman's avatar

Modules/dependency not found using mocha-webpack in a Docker container

I've been trying to set up CI using Buddy.works, which I configured to use a standard library/node:9.11.1 Docker image to build and test the front-end.

I get the following errors, which leads me to believe babel-loader isn't reading the paths (../ and ./) and aliases (~/) correctly.

I've been Googling and trying out different path- / webpack configurations as well as yarn for hours now, any ideas?

npm run test
> [email protected] test /buddy/oris
> cross-env NODE_ENV=test $NODE_DEBUG_OPTION ./node_modules/mocha-webpack/bin/mocha-webpack --webpack-config node_modules/laravel-mix/setup/webpack.config.js --require frontend/test/setup.js frontend/test/*.spec.js
 WEBPACK  Compiling...
 ERROR  Failed to compile with 10 errors
This dependency was not found:
* ~/models/Filter in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}],["babel-preset-env",{"targets":{"browsers":["last 2 versions"]}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"transform-runtime","transform-async-to-generator","transform-object-rest-spread","transform-class-properties",["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]],"comments":false,"babelrc":false,"env":{"coverage":{"plugins":["istanbul"]}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./frontend/assets/js/components/filters/ComboCheckboxListFilter.vue, ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}],["babel-preset-env",{"targets":{"browsers":["last 2 versions"]}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"transform-runtime","transform-async-to-generator","transform-object-rest-spread","transform-class-properties",["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]],"comments":false,"babelrc":false,"env":{"coverage":{"plugins":["istanbul"]}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./frontend/assets/js/components/filters/BooleanFilter.vue and 3 others
To install it, you can run: npm install --save ~/models/Filter
These relative modules were not found:
* ../assets/js/models/Filter in ./frontend/test/trade-lane-filter.spec.js
* ../models/Action in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}],["babel-preset-env",{"targets":{"browsers":["last 2 versions"]}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"transform-runtime","transform-async-to-generator","transform-object-rest-spread","transform-class-properties",["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]],"comments":false,"babelrc":false,"env":{"coverage":{"plugins":["istanbul"]}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./frontend/assets/js/components/ContractRow.vue, ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}],["babel-preset-env",{"targets":{"browsers":["last 2 versions"]}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"transform-runtime","transform-async-to-generator","transform-object-rest-spread","transform-class-properties",["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]],"comments":false,"babelrc":false,"env":{"coverage":{"plugins":["istanbul"]}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./frontend/assets/js/components/LegRow.vue
* ../models/Filter in ./frontend/assets/js/mixins/filtered.js
* ./Action in ./frontend/assets/js/models/DeleteAction.js
 WEBPACK  Failed to compile with 10 error(s)
Error in ./frontend/test/trade-lane-filter.spec.js
  Module not found: '../assets/js/models/Filter' in '/buddy/oris/frontend/test'
...
Error in ./frontend/assets/js/components/LegRow.vue
  Module not found: '../models/Action' in '/buddy/oris/frontend/assets/js/components'
Error in ./frontend/assets/js/models/DeleteAction.js
  Module not found: './Action' in '/buddy/oris/frontend/assets/js/models'
Error in ./frontend/assets/js/components/filters/ComboCheckboxListFilter.vue
  Module not found: '~/models/Filter' in '/buddy/oris/frontend/assets/js/components/filters'
Error in ./frontend/assets/js/components/filters/BooleanFilter.vue
...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `cross-env NODE_ENV=test $NODE_DEBUG_OPTION ./node_modules/mocha-webpack/bin/mocha-webpack --webpack-config node_modules/laravel-mix/setup/webpack.config.js --require frontend/test/setup.js frontend/test/*.spec.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test 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:
npm ERR!     /root/.npm/_logs/2018-06-21T08_52_27_332Z-debug.log
Action failed: see logs above for details

I've tried relative and absolute paths for:

package.json:

...
  "scripts": {
    "test": "cross-env NODE_ENV=test $NODE_DEBUG_OPTION ./node_modules/mocha-webpack/bin/mocha-webpack --webpack-config node_modules/laravel-mix/setup/webpack.config.js --require frontend/test/setup.js frontend/test/*.spec.js",
...

webpack.mix.js

const mix = require('laravel-mix')
const tailwindcss = require('tailwindcss')
const webpack = require('webpack')

mix
    .js('frontend/assets/js/app.js', 'javascript/')
    .less('frontend/assets/less/app.less', 'style/')
    .options({
        autoprefixer: false,
        extractVueStyles: true,
        postCss: [tailwindcss('tailwind.config.js'), require('autoprefixer')],
        publicPath: './',
    })

let webpackConfig = {
    plugins: [
        new webpack.NormalModuleReplacementPlugin(
            /element-ui[\/\]lib[\/\]locale[\/\]lang[\/\]zh-CN/,
            'element-ui/lib/locale/lang/en',
        ),
    ],
    resolve: {
// extensions: [/*"*",*/ ".vue", ".json", ".js"],
        alias: {
            '~': path.join(__dirname, './frontend/assets/js'), <--
        },
    },
}
...

mix.webpackConfig(webpackConfig)

Here's my config:

environment setup:

npm i npm@latest -g
npm install -g gulp grunt-cli cross-env
apt-get update && apt-get install apt-transport-https
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
rm /usr/local/bin/yarn && rm /usr/local/bin/yarnpkg
rm -rf /opt/yarn
apt-get update && apt-get install yarn

run commands: (with some experiments)

# #yarn install
# yarn install --frozen-lockfile --production && yarn cache clean
# #yarn test
#export NODE_ENV=test 
rm -rf ./node_modules
# rm package-lock.json
# rm yarn.lock
npm cache clear --force
yarn cache clean
#yarn add babel-loader@^7.1.1 css-loader@^0.28.9 less-loader@^4.1.0 vue-loader babel-core@^6.22.1 babel-preset-env@^1.1.8 webpack@^3.0.0 --dev
yarn install && yarn test 
#./node_modules/mocha-webpack/bin/mocha-webpack --webpack-config ./node_modules/laravel-mix/setup/webpack.config.js --require ./frontend/test/setup.js ./frontend/test/*.spec.js
# npm install
# npm run test

Note the config works fine on macOS and inside an Ubuntu Vagrant box.

0 likes
1 reply
alexman's avatar

This turned out to be a case-sensitivity issue. The Action and Filter model files had lowercase filenames whilst the includes used uppercase. Apparently some environments are more picky about this than others.

Please or to participate in this conversation.