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.
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.
Please or to participate in this conversation.