CODEWITHSUNDEEP
vue.jsnpmdeploymentcontinuous-integrationgitlab
Sasha
Sasha

Reputation: 105

Building Vue.js project in Gitlab CI/CD pipeline failed

Using Gitlab CI/CD to deploy my project, I encountered a problem with dependencies. Everything works fine locally, but not in pipeline.

.gitlab-ci.yml:

stages:
- build-frontend
- build-backend

image: lnkra/<...project name...>:latest

build frontend:
  stage: build-frontend
  only:
    - master
    - draft
  script:
    - cd frontend
    - npm install
    - npm run build

build backend:
  stage: build-backend
  only:
    - master
    - draft
  script:
    - cd backend
    - ./gradlew installDist

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'mdbvue/build/css/mdb.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import App from './App'
import store from './store'
import router from './router'
import Notify from 'mdbvue/src/components/pro/Advanced/Notify'

Vue.config.productionTip = false
Vue.use(Notify)

Object.defineProperty(Vue.prototype, '$bus', {
  get: function () {
    return this.$root.bus
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data: {
    bus: new Vue({})
  },
  store,
  router,
  components: { App },
  template: '<App/>'
})

Gitlab Pipeline output for Stage "build frontend":

    Running with gitlab-runner 12.3.0 (a8a019e0)
  on docker-auto-scale 72989761
Using Docker executor with image lnkra/<...project name...>:latest ...
Pulling docker image lnkra/<...project name...>:latest ...
Using docker image sha256:dd41b9422753f6aa01c5b270be56eadb4997ea7f99f1c8ab2863ca413b012ab6 for lnkra/<...project name...>:latest ...
Running on runner-72989761-project-14997921-concurrent-0 via runner-72989761-srm-1572288084-e8a1b6f1...
Fetching changes with git depth set to 50...
Initialized empty Git repository in /builds/lnkr.a/<...project name...>/.git/
Created fresh repository.
From https://gitlab.com/lnkr.a/<...project name...>
 * [new ref]         refs/pipelines/92097195 -> refs/pipelines/92097195
 * [new branch]      master                  -> origin/master
Checking out f1eb05c0 as master...

Skipping Git submodules setup
$ cd frontend
$ npm install

> [email protected] install /builds/lnkr.a/<...project name...>/frontend/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/linux-x64-72_binding.node
Download complete
Binary saved to /builds/lnkr.a/<...project name...>/frontend/node_modules/node-sass/vendor/linux-x64-72/binding.node
Caching binary to /root/.npm/node-sass/4.13.0/linux-x64-72_binding.node

> [email protected] postinstall /builds/lnkr.a/<...project name...>/frontend/node_modules/core-js
> node scripts/postinstall


> [email protected] postinstall /builds/lnkr.a/<...project name...>/frontend/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall /builds/lnkr.a/<...project name...>/frontend/node_modules/node-sass
> node scripts/build.js

Binary found at /builds/lnkr.a/<...project name...>/frontend/node_modules/node-sass/vendor/linux-x64-72/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1455 packages from 780 contributors and audited 13434 packages in 42.428s
found 10 vulnerabilities (6 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
$ npm run build

> [email protected] build /builds/lnkr.a/<...project name...>/frontend
> node build/build.js

Hash: 69fa78c753b2a3704fcf
Version: webpack 3.12.0
Time: 46361ms
                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.60583dda74269ed56c38.js     995 kB       0  [emitted]  [big]  vendor
                  static/js/app.2f4303511b5acdad8437.js     115 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.cf497324bb2ee125a15dac61baeb7001.css     180 kB       1  [emitted]         app
static/css/app.cf497324bb2ee125a15dac61baeb7001.css.map     251 kB          [emitted]         
           static/js/vendor.60583dda74269ed56c38.js.map    2.66 MB       0  [emitted]         vendor
              static/js/app.2f4303511b5acdad8437.js.map     438 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  587 bytes          [emitted]         
                         static/<...project name...>-logo-square.png    8.13 kB          [emitted]         
                         static/<...project name...>-logo-square.svg    4.29 kB          [emitted]         
                                static/<...project name...>-logo.svg    5.46 kB          [emitted]         

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'mdbvue/build/css/mdb.css' in '/builds/lnkr.a/<...project name...>/frontend/src'
 @ ./src/main.js 4:0-34

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'mdbvue/src/components/pro/Advanced/Notify' in '/builds/lnkr.a/<...project name...>/frontend/src'
 @ ./src/main.js 9:0-63

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build 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/2019-10-28T18_44_36_916Z-debug.log
ERROR: Job failed: exit code 1

UPD! package.json:

    {
  "name": "<...project name...>",
  "version": "0.3.1",
  "description": "",
  "author": "Aleksandr Bogdanov <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "ajv": "^6.10.2",
    "ajv-keywords": "^3.4.0",
    "axios": "^0.18.1",
    "mdbvue": "git+https://oauth2:<...license token...>.mdbootstrap.com/mdb/vue/vu-pro.git",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.3.1",
    "vue": "^2.5.2",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.4.3",
    "optimize-css-assets-webpack-plugin": "^3.2.1",
    "ora": "^1.2.0",
    "portfinder": "^1.0.25",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.7.1",
    "semver": "^5.7.1",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.2.2"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

So. It is a question. Why npm can not find installed node modules with such import addresses?

Thank you.

Upvotes: 0

Views: 2109

Answers (1)

m_dembna
m_dembna

Reputation: 26

Which MDB Vue version are you using? In MDB Vue 6.0.0 (the most recent version) main.js imports in main.js have changed to:

import 'mdbvue/lib/css/mdb.min.css';
import Notify from 'mdbvue/lib/components/Notify'

If your scripts installed dependencies from the gitlab master branch directly, it is possible that the version differs and those files are no longer there. You can try linking mdbvue dependency to .tgz file to make sure it stays the same. 

"mdbvue": "mdbvue-[YOUR_VERSION].tgz"

Upvotes: 1

Related Questions