Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Vue less than 3.4.16 compilation failed #56

Open
TalosDx opened this issue Feb 9, 2024 · 0 comments
Open

[Bug] Vue less than 3.4.16 compilation failed #56

TalosDx opened this issue Feb 9, 2024 · 0 comments

Comments

@TalosDx
Copy link

TalosDx commented Feb 9, 2024

Vue 3.4.16 broke a lot of components and the previous version worked fine (see this vuejs/core#10294)
But trying to rollback to 3.4.15 or lower results in a compilation error when executing the yarn command

If you remove from package.json
"vue-datepicker-next": "^1.0.3",
Then yarn works fine.
But I'm left without a datepicker....

Vue2-datepicker version: ^1.0.3
Vue version: 3.4.15

yarn-error.log
yarn-error.log

package.json

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service build --mode development"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.16",
    "@heroicons/vue": "^2.0.18",
    "@popperjs/core": "^2.11.8",
    "@tailwindcss/forms": "^0.5.7",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.4",
    "axios": "^1.6.0",
    "core-js": "^3.8.3",
    "lodash": "^4.17.21",
    "papaparse": "^5.4.1",
    "pinia": "^2.1.7",
    "sass": "^1.69.0",
    "sass-loader": "^13.3.2",
    "sweetalert2": "^11.10.4",
    "tailwindcss": "^3.3.3",
    "vue": "3.4.15",
    "vue-axios": "^3.5.2",
    "vue-datepicker-next": "^1.0.3",
    "vue-multiselect": "^3.0.0-beta.3",
    "vue-router": "4",
    "webpack": "^5.88.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "autoprefixer": "^10.4.16",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.31",
    "vite": "^4.4.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

vue.config.js

process.env.VUE_APP_VERSION = require('./package.json').version;
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { defineConfig } = require('@vue/cli-service')

const folder = 'scms';

const mode = process.env.NODE_ENV || 'development';
const isDev = mode === 'development'
let webpackCfg = {
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    mode: mode,
    plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            filename: path.resolve('../springapp/src/main/webapp/WEB-INF/pages/' + folder + '/appjs.jsp'),
            template: 'jstemplate.ejs',
            isDev: isDev,
            minify: false
        }),
        new HtmlWebpackPlugin({
            inject: false,
            filename: path.resolve('../springapp/src/main/webapp/WEB-INF/pages/' + folder + '/appcss.jsp'),
            template: 'csstemplate.ejs',
            isDev: isDev,
            minify: false
        }),
    ],
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
};

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    productionSourceMap: false,
    filenameHashing: false,
    configureWebpack: webpackCfg,
    css: {
        sourceMap: isDev,
        loaderOptions: {
            sass: {
                additionalData: '@import "@/scss/styles.scss";'
            }
        }
    },
    chainWebpack: (config) => {
        config.plugin('define').tap((definitions) => {
            Object.assign(definitions[0], {
                __VUE_OPTIONS_API__: 'true',
                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: isDev
            })
            return definitions
        })
    }
})

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})
// babel.config.js
module.exports = {
    presets: [
        [
            '@vue/cli-plugin-babel/preset',
            {
                targets: { esmodules: true },
                polyfills: []
            }
        ]
    ]
}

Browser:
Firefox

Steps to reproduce
yarn

Reproduction Link or Source Code

Expected behavior
compile fine

Actual behavior
error An unexpected error occurred: "expected hoisted manifest for "vue-datepicker-next#vue#@vue/server-renderer#@vue/compiler-ssr"".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant