CODEWITHSUNDEEP
node.jsdockervue.jsnpm
Kamil
Kamil

Reputation: 644

docker build vue3 not compatible with element-ui on node:16-buster-slim

FROM node:16-buster-slim
RUN apt-get update

WORKDIR /app
COPY package.json /home
RUN npm install --prefix /home

{
  "name": "test",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "dev": "vue-cli-service serve --mode development --host 0.0.0.0",
    "serve": "vue-cli-service serve --mode production --host 0.0.0.0",
    "build": "vue-cli-service build",
    "jest": "vue-cli-service test:unit --watchAll",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "core-js": "^3.6.5",
    "dateformat": "^5.0.2",
    "element-plus": "^1.1.0-beta.9",
    "element-ui": "^2.15.6",
    "lib-flexible": "^0.3.2",
    "ol": "^6.6.1",
    "spark-md5": "^3.0.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuelayers": "^0.11.36",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "fs-extra": "^10.0.0",
    "lint-staged": "^9.5.0",
    "mockjs": "^1.1.0",
    "node-sass": "^4.14.1",
    "px2rem-loader": "^0.1.9",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

Step: RUN npm install --prefix /home
---> Running in fc08d7e933ed npm notice
npm notice New patch version of npm available! 8.1.0 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4 npm notice Run npm install -g [email protected] to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from [email protected]
npm ERR! node_modules/element-ui
npm ERR! element-ui@"^2.15.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

                                                                                                                                                                                                                                                                                                        npm ERR! A complete log of this run can be found in:

npm ERR! /root/.npm/_logs/2021-11-25T01_40_08_953Z-debug.log

but this package.json work well on node:lts-alpine base image

Upvotes: 5

Views: 795

Answers (1)

rakwaht
rakwaht

Reputation: 3967

It seems that you have problems with peer dependencies, if you just set your npm to use legacy dependency logic to install your packages you will solve the problem.

Just add to your Dockerfile this setting before running npm install:

...
COPY package.json /home
RUN npm config set legacy-peer-deps true
RUN npm install --prefix /home

To understand what this flag does I suggest you read this SO answer where it is explained extensively.

Upvotes: 2

Related Questions