Topic: Problems with Gitlab CI/CD

laniakea free asked 4 years ago


Expected behavior

In Gitlab pipeline my project would be build like on local machine.

Actual behavior

I got errors. I found that node_modules/mdbvue folder does not contains required folders after npm install completed.

Resources (screenshots, code snippets etc.)

.gitlab-ci.yml:

stages:
  - build-frontend

image: lnkra/<...project name...>:latest
before_script:
  - mkdir -p ~/.ssh
  - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_rsa
  - chmod 600 ~/.ssh/id_rsa
  - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config

build frontend:
  stage: build-frontend
  only:
    - master
    - draft
  script:
    - cd frontend
    - npm install
    - ls -la node_modules/mdbvue
    - npm run build
  artifacts:
    paths:
      - dist

package.json:

    {
  "name": "<...project name...>",
  "version": "0.3.1",
  "description": "",
  "author": "Aleksandr Bogdanov <...my email...@yahoo.com>",
  "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": {
    ...
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Gitlab CI/CD pipeline output:

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-1572347808-7a3bcb3d...
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/92250242 -> refs/pipelines/92250242
* [new branch]      master                  -> origin/master
Checking out b1785323 as master...

Skipping Git submodules setup
$ mkdir -p ~/.ssh
$ echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_rsa
$ chmod 600 ~/.ssh/id_rsa
$ echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
$ cd frontend
$ npm install

> node-sass@4.13.0 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

> core-js@2.6.7 postinstall /builds/lnkr.a/<...project name...>/frontend/node_modules/core-js
> node scripts/postinstall


> uglifyjs-webpack-plugin@0.4.6 postinstall /builds/lnkr.a/<...project name...>/frontend/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.13.0 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: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1455 packages from 780 contributors and audited 13434 packages in 40.023s
found 10 vulnerabilities (6 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
$ ls -la node_modules/mdbvue
total 260
drwxr-xr-x   4 root root   4096 Oct 29 11:19 .
drwxr-xr-x 916 root root  36864 Oct 29 11:19 ..
drwxr-xr-x   6 root root   4096 Oct 29 11:19 lib
-rw-r--r--   1 root root 171169 Oct 26  1985 License.pdf
drwxr-xr-x   5 root root   4096 Oct 29 11:19 node_modules
-rw-r--r--   1 root root   2260 Oct 29 11:19 package.json
-rw-r--r--   1 root root   9679 Oct 26  1985 README.md
$ npm run build

> <...project name...>@0.3.0 build /builds/lnkr.a/<...project name...>/frontend
> node build/build.js

Hash: af8114981e23cfc3fb8b
Version: webpack 3.12.0
Time: 44324ms
                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.e67cd88c7c01838fd594.js     994 kB       0  [emitted]  [big]  vendor
                  static/js/app.f463cbbaba6bbab57b82.js     115 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.bdb6f651578f675e724dc3200c004920.css     180 kB       1  [emitted]         app
static/css/app.bdb6f651578f675e724dc3200c004920.css.map     251 kB          [emitted]         
           static/js/vendor.e67cd88c7c01838fd594.js.map    2.66 MB       0  [emitted]         vendor
              static/js/app.f463cbbaba6bbab57b82.js.map     439 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! <...project name...>@0.3.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the <...project name...>@0.3.0 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-29T11_19_57_940Z-debug.log
ERROR: Job failed: exit code 1

Please help me!


Mikołaj Smoleński staff answered 4 years ago


There was a syntax change in the latest major update. Please check the following page: https://mdbootstrap.com/docs/vue/getting-started/quick-start/#existing-project

Now, you should use new import statements in main.js: import 'mdbvue/lib/css/mdb.min.css'

Also Notify is not in src dir, but should be imported like this: import Notify from 'mdbvue/lib/components/Notify'

Best regards


laniakea free answered 4 years ago


Thank you! It works!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.0.0
  • Device: Gitlab CI/CD docker container
  • Browser: n/a
  • OS: Arch linux in docker container
  • Provided sample code: No
  • Provided link: No