Same vue.config.js producing different results when running npm run build 2 times in a row

userw6Wx 0
Viewed 40

Running production build sometimes produces different size and slightly different content. In 9 of 10 cases, it works as expected producing the same output and hash result. But sometimes in 1 case of 10, it creates slightly different .js file (see the diff picture below).

Is there a way to fix that behaviour? Here’s the differences of the output .js file shown by DiffMerge.

DiffMerge window showing differences

vue.config.js:

const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
 const path = require('path');

 module.exports = {
   filenameHashing: false,
   chainWebpack: config => {config.optimization.minimize(false);},
   pages: {
     index: {
       // entry for the page
       entry: 'src/main.ts',
       chunks: ['chunk-vendors', 'chunk-common', 'index']
     },
   },
   devServer: {
     hot: true,
     liveReload: true
   },

   configureWebpack: {
  
     devtool: false,
     
     plugins: [
       require('unplugin-vue-components/webpack')({
         resolvers: [ElementPlusResolver()],
       }),
       require('unplugin-auto-import/webpack')({
         resolvers: [ElementPlusResolver()],
       }),
     ],
   }
 };

tsconfig.json

{
      "compilerOptions": {
        "target": "es2015",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": false,
        "baseUrl": ".",
        "types": [
          "webpack-env", "offscreencanvas"
        ],
        "paths": {
          "@/*": [
            "src/*"
          ]
        },
        "lib": [
          "esnext",
          "dom",
          "dom.iterable",
          "scripthost"
        ]
      },
      "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx"
      ],
      "exclude": [
        "node_modules",
        "dist"
      ]
    }

package.json

 {
      "name": "test-js",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "export ENVSOURCEMAPMODE=inline-source-map && vue-cli-service build --mode production && ./copyfiles.sh",
        "build-debug": "export ENVSOURCEMAPMODE=inline-source-map && vue-cli-service build && ./copyfiles.sh",
        "watch": "npm run build-debug && npm-watch"
      },
      "watch": {
        "build-debug": {
          "patterns": [
            "src"
          ],
          "extensions": "vue,css,js,ts"
        }
      },
      "dependencies": {
        "@types/offscreencanvas": "^2019.6.4",
        "core-js": "^3.6.5",
        "element-plus": "^2.0.5",
        "@element-plus/icons-vue": "^0.2.4",

        "vue-class-component": "^8.0.0-0"
      },
      "devDependencies": {
        "npm-watch": "^0.11.0",
        "vue": "^3.2.39",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-typescript": "^5.0.0",
        "@vue/cli-service": "~5.0.0",
        "@vue/compiler-sfc": "^3.0.0",
        "sass": "^1.51.0",
        "sass-loader": "^10.1.1",
        "typescript": "^4.5.4",
        "unplugin-auto-import": "^0.5.9",
        "unplugin-vue-components": "^0.17.11",
        "vue-plugin-webextension-i18n": "^0.1.2"
      }
    }
vuejs3 vue.js
1 Answers

The cause was in the project structure:

├── Common library
│   └── library.ts
├── Project root
│   ├── src      
│   │    └── ....

The project used a common TypeScript library located outside of the project root.

Solution: Putting a symlink inside of the project root and altering webpack.config.json (resolve: {symlinks: false}) fixed this issue. Seems like the decision tree is not stable when some files are located outside of the project root.

userw6Wx0
Related