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

Question

dockerfile:
FROM node:16-buster-slim
RUN apt-get update
WORKDIR /app
COPY package.json /home
RUN npm install --prefix /home
package.json
{
"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 npm#8.1.4 to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: artemis#0.1.0
npm ERR! Found: vue#3.2.22
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 element-ui#2.15.6
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

Answer 1

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.