Cannot read property 'isCE' when I try to load vue-slider-component with slot

What happened?

Server crashes on renderSlot function with Cannot read property 'isCE' of null error.

Based on this comment https://github.com/vuejs/core/issues/4344#issuecomment-899064501 I tried removing the vue dependency from vue-slider-component

My package-json

{ "name": "myapp", "version": "0.0.1", "description": "", "productName": "myapp", "author": "", "private": true, "scripts": { "lint": "eslint --fix --ext .js,.vue src", "test": "TZ=UTC jest --notify -i --no-cache --coverage=\"true\"", "test:ci": "TZ=UTC jest -i --ci --reporters=default --reporters=jest-junit", "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch", "dev:ssr": "yarn && env-cmd -f ./.env.dev quasar dev -m ssr", "dev:spa": "yarn && env-cmd -f ./.env.dev quasar dev", "dev:android": "yarn && quasar dev -m cordova -T android -- --buildConfig=\"../build.cordova.json\"", "dev:ios": "yarn && quasar dev -m cordova -T ios -- --buildConfig=\"../build.cordova.json\"", "dev:electron": "yarn && quasar dev -m cordova -T electron -- --buildConfig=\"../build.cordova.json\"", }, "dependencies": { "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@quasar/extras": "^1.16.4", "@rollup/plugin-babel": "^6.0.4", "@stripe/stripe-js": "1.48.0", "@vee-validate/rules": "^4.8.4", "axios": "^1.2.1", "body-scroll-lock": "^3.1.5", "browserslist-useragent": "4.0.0", "chart.js": "^3.8.2", "copy-to-clipboard": "^3.3.3", "cross-env": "7.0.3", "date-fns": "2.29.3", "date-fns-tz": "2.0.0", "date-time-format-timezone": "1.0.22", "daterange-picker-for-vue-3": "^0.0.2", "dotenv": "^16.3.1", "env-cmd": "^10.1.0", "file-saver": "2.0.5", "html-entities": "1.3.1", "intersection-observer": "0.12.2", "jsvat": "^2.5.3", "lodash-es": "^4.17.21", "mapbox-gl": "1.12.0", "md5": "^2.3.0", "process": "^0.11.10", "quasar": "^2.6.0", "showdown": "^2.1.0", "shrink-ray-current": "4.1.3", "superstruct": "0.8.3", "vee-validate": "4.8.1", "vite-plugin-stylelint": "^5.2.0", "vue": "^3.4.15", "vue-error-boundary": "2.0.1", "vue-i18n": "^9.0.0", "vue-popperjs": "^2.3.0", "vue-router": "^4.0.0", "vue-slider-component": "^4.1.0-beta.7", "vue-social-sharing": "4.0.0-alpha4", "vue3-popper": "^1.5.0", "vuex": "^4.0.1", "vuex-persistedstate": "4.1.0", "wallaby-vue-compiler": "^1.0.6" }, "devDependencies": { "@babel/eslint-parser": "^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-transform-modules-commonjs": "^7.23.0", "@babel/plugin-transform-runtime": "^7.23.9", "@babel/preset-env": "^7.23.8", "@intlify/vite-plugin-vue-i18n": "^3.3.1", "@intlify/vue-i18n-loader": "^4.2.0", "@quasar/app-vite": "^1.3.0", "@quasar/babel-preset-app": "^2.0.2", "@vue/compiler-sfc": "3.3.2", "@vue/eslint-config-airbnb": "4.0.0", "@vue/test-utils": "^2.0.0-rc.18", "@vue/vue3-jest": "^29.2.4", "autoprefixer": "^10.4.2", "babel-core": "^7.0.0-bridge.0", "babel-jest": "29.5.0", "babel-plugin-lodash": "3.3.4", "babel-plugin-transform-import-meta": "^2.2.1", "babel-polyfill": "6.26.0", "browserslist-useragent-regexp": "4.0.0", "core-js": "3.32.0", "dotenv": "^16.0.3", "eslint": "^8.10.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-config-standard": "^16.0.2", "eslint-plugin-import": "^2.20.1", "eslint-plugin-no-cyrillic-string": "1.0.5", "eslint-plugin-node": "^11.0.0", "eslint-plugin-promise": "^5.1.0", "eslint-plugin-quasar": "^1.0.0", "eslint-plugin-vue": "^9.0.0", "figma-js": "1.16.0", "find-in-files": "0.5.0", "husky": "3.0.9", "hygen": "6.2.11", "identity-obj-proxy": "3.0.0", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "jest-junit": "^16.0.0", "jest-serializer-vue": "3.1.0", "jest-watch-typeahead": "^2.2.2", "lint-staged": "^13.1.2", "node-notifier": "^10.0.1", "pm2": "4.4.0", "postcss": "8.2.15", "postcss-html": "^1.6.0", "postcss-import": "^16.0.0", "prettier-stylelint": "0.4.2", "rimraf": "4.3.1", "stylelint": "^15.11.0", "stylelint-config-html": "^1.1.0", "stylelint-config-recommended-vue": "^1.5.0", "stylelint-config-standard": "^36.0.0", "stylelint-config-standard-scss": "^11.1.0", "stylelint-declaration-block-no-ignored-properties": "2.7.0", "stylelint-declaration-use-variable": "1.7.3", "stylelint-high-performance-animation": "1.8.0", "stylelint-order": "6.0.3", "stylelint-scss": "4.4.0", "svgo": "3.0.2", "vue-styleguidist": "^4.58.0", "vue-template-compiler": "2.7.14" }, "engines": { "node": "^18 || ^16 || ^14.19", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "./src//*.+(js|vue)": [ "jest --findRelatedTests --coverage=\"false\"", "git add" ], "./src/*/.+(vue|scss)": [ "yarn stylelint", "git add" ], "./src//*.+(vue)": [ "yarn collect-keys", "yarn translate-local", "git add" ], "*/.+(js|vue)": [ "yarn lint", "git add" ] } }

What did you expect to happen?

No error, and my library is rendered with a slot

Reproduction URL

How to reproduce?

my quasar.config.js

/ eslint-env node /

This file runs in a Node context (it's NOT transpiled by Babel), so use only
the ES6 features that are supported by your Node version. https://node.green/ */

// Configuration for your app // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js const md5 = require('md5'); const { join, resolve } = require('path'); const fs = require('fs'); const { configure } = require('quasar/wrappers'); // helper to get a better IDE autocomplete experience (through Typescript) const { getBabelOutputPlugin } = require('@rollup/plugin-babel'); require('dotenv').config();

/ eslint func-names: 0 / / eslint global-require: 0 /

const hash = md5(Date.now());

module.exports = configure((ctx) => ({ eslint: { fix: true, // include: [], // exclude: [], // rawOptions: {}, warnings: false, errors: false, },

// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature preFetch: true,

// app boot file (/src/boot) // --> boot files are part of "main.js" // https://v2.quasar.dev/quasar-cli-vite/boot-files boot: [ // { path: 'env', client: false }, 'env', 'ua-polyfills', 'extend-lib-components', // { path: 'ssr-translations', client: false }, 'global', 'user-storage', 'i18n', 'translation', 'interceptors-api', 'shopify-redirect', { path: 'goto', client: false }, 'router', 'vee-validate', { path: 'persist-state-client', server: false }, 'source-data', 'static-data', 'growthbook', ],

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css css: ['app.scss'],

// https://github.com/quasarframework/quasar/tree/dev/extras extras: [ // 'ionicons-v4', // 'mdi-v5', // 'fontawesome-v6', // 'eva-icons', // 'themify', // 'line-awesome', // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

'roboto-font', // optional, you are not bound to it

'material-icons', // optional, you are not bound to it

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer devServer: { // https: true open: false, // opens browser window automatically port: ctx.mode.spa ? 8080 : 9000, proxy: { '/cms': { target: 'http://test-api.myapp.online', changeOrigin: true, }, '/img': { target: 'http://test-api.myapp.online', changeOrigin: true, }, '/downloads': { target: 'http://test-api.myapp.online', changeOrigin: true, }, '/static_data': { target: ctx.dev ? 'http://localhost:8000/' : process.env.DOMAIN_NAME, changeOrigin: true, secure: !ctx.dev, configure: (proxy) => { proxy.on('proxyReq', (proxyReq, req, res) => { const file = req.url.split('/').pop(); res.setHeader('Content-Type', 'application/json'); const data = fs.readFileSync(./src/statics/static_data/${file}); res.end(data); }); }, }, '/static_translations': { target: ctx.dev ? 'http://localhost:8000/' : process.env.DOMAIN_NAME, changeOrigin: true, secure: !ctx.dev, configure: (proxy) => { proxy.on('proxyReq', (proxyRes, req, res) => { const file = req.url.split('/').pop(); res.setHeader('Content-Type', 'application/json'); const data = fs.readFileSync(./src/statics/static_data/${file}); res.end(data); }); }, }, }, },

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build build: { target: ['esnext'], scopeHoisting: true, gzip: true, extendViteConf: (config) => { config.resolve = { dedupe: ['vue'], alias: { vue: resolve('./node-modules/@vitejs/plugin-vue'), }, }; config.css = { preprocessorOptions: { scss: { additionalData: '@import "src/css/global/_mixins.scss"; @import "src/css/global/_variables.scss";', }, }, }; }, afterBuild: () => { const pathToSPA = './dist/spa'; // added to insert "FE_FULL_DOMAIN" instead of / in index.html file ( ...<base href=/ ... ) // needed for prerender deploys fs.readFile(${pathToSPA}/index.html, 'utf-8', (err, mainHtml) => { if (err) { console.warn(err); } else { const envVar = 'FE_FULL_DOMAIN'; const newHtml = mainHtml.replace( /((.|\n))(base href=\/)((.|\n))/, // split html file over 'base href=/' $1base href="${envVar}"$4, // $1 - before searched text, $4 - everything after it ); // make sure we just changed / to "FE_FULL_DOMAIN" in base.href // we should substract envVar.length + 2 (quots) - 1 ( / was initially ) if (mainHtml.length === newHtml.length - envVar.length - 1) { fs.writeFileSync(${pathToSPA}/index.html, newHtml); console.log(${envVar} has been added to ${pathToSPA}/index.html); } else { console.warn(${envVar} was not added to ${pathToSPA}/index.html); } } });

  // prevent errors if SPA is not built
  if (!fs.existsSync(pathToSPA)) return;

  fs.writeFileSync(`${pathToSPA}/hash.json`, JSON.stringify({ hash }));
  fs.writeFileSync(`${pathToSPA}/env.json`, JSON.stringify({
    API_URL: process.env.API_URL,
    GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
  }, null, 4));
},

vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools: true,
vueOptionsAPI: true,

// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup

// publicPath: '/',
analyze: process.argv.includes('--analyze'),
env: {
  BUILD_HASH: hash,
  API_URL: process.env.API_URL,
  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
},
// rawDefine: {}
// ignorePublicFolder: true,
minify: 'terser',
// polyfillModulePreload: true,
// distDir
rollupOptions: {
  external: ['vue'],
  output: {
    globals: {
      vue: 'Vue',
    },
    manualChunks: {
      mapbox: ['mapbox-gl'],
      vueSliderComponent: ['vue-slider-component'],
      dateTimeFormatTimeZone: ['date-time-format-timezone'],
      intersectionObserver: ['intersection-observer'],
    },
    plugins: [
      getBabelOutputPlugin({
        allowAllFormats: true,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: '> 0.25%, not dead',
              modules: false,
            },
          ],
          '@quasar/babel-preset-app',
        ],
      }),
      'babel-plugin-lodash',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-transform-modules-commonjs',
    ],
  },
},
alias: {
  styles: join(__dirname, './src/css'),
  public: join(__dirname, './public'),

},
// viteVuePluginOptions: {},
vitePlugins: [
  ['vite-plugin-stylelint', {
    include: ['**/*.vue', '**/*.scss'],
    fix: true,
  }],

  // ['@intlify/vite-plugin-vue-i18n', {
  //   // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
  //   // compositionOnly: false,
  //
  //   // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
  //   // you need to set `runtimeOnly: false`
  //   // runtimeOnly: false,
  //
  //   // you need to set i18n resource including paths !
  //   include: path.resolve(__dirname, './src/i18n/**'),
  // }],
],

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework framework: { config: { loadingBar: { color: 'primary', // hint: if changed here - should be also changed in index.html styles }, }, cssAddon: false, // iconSet: 'material-icons', // Quasar icon set // lang: 'en-US', // Quasar language pack

// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
components: ['QBtn', 'QIcon', 'QList', 'QItem', 'QItemSection',
  'QItemLabel', 'QTooltip', 'QImg', 'QVirtualScroll', 'QForm', 'QToolbar',
  'QPageContainer', 'QPage', 'QDialog', 'QInput', 'QLayout', 'QHeader',
  'QAvatar', 'QMenu', 'QSeparator', 'QToolbarTitle', 'QSpace', 'QBadge', 'QMarkupTable',
  'QDrawer', 'QScrollArea', 'QCard', 'QCardSection', 'QToggle', 'QNoSsr',
  'QSelect', 'QCardActions', 'QDate', 'QCheckbox', 'QRadio', 'QPopupProxy', 'QTime', 'QTable',
  'QTh', 'QTr', 'QTd', 'QExpansionItem', 'QPagination', 'QSpinner', 'QSpinnerGrid', 'QSplitter', 'QTabPanels',
  'QTabPanel', 'QTabs', 'QTab', 'QFooter', 'QBreadcrumbs', 'QBreadcrumbsEl', 'QStepper', 'QStep', 'QTimeline',
  'QTimelineEntry', 'QInfiniteScroll', 'QChip', 'QRadio', 'QBtnDropdown', 'QOptionGroup', 'QSkeleton',
  'QLinearProgress', 'QTree', 'QCarousel',
],

directives: ['Ripple', 'ClosePopup'],

// Quasar plugins
plugins: ['Cookies', 'Notify', 'LoadingBar', 'LocalStorage', 'Dialog', 'Meta', 'Screen'],

// animations: 'all', // --- includes all animations // https://v2.quasar.dev/options/animations animations: ['headShake', 'slideInDown', 'pulse'],

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles // sourceFiles: { // rootComponent: 'src/App.vue', // router: 'src/router/index', // store: 'src/store/index', // registerServiceWorker: 'src-pwa/register-service-worker', // serviceWorker: 'src-pwa/custom-service-worker', // pwaManifestFile: 'src-pwa/manifest.json', // electronMain: 'src-electron/electron-main', // electronPreload: 'src-electron/electron-preload' // },

// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr ssr: { // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name! // will mess up SSR

// extendSSRWebserverConf (esbuildConf) {},
// extendPackageJson (json) {},
pwa: false,

// manualStoreHydration: true,
// manualPostHydrationTrigger: true,

prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)

middlewares: [
  'render', // keep this as last one
],

// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa pwa: { // workboxMode: 'generateSW', // or 'injectManifest' // injectPwaMetaTags: true, // swFilename: 'sw.js', // manifestFilename: 'manifest.json', // useCredentialsForManifestTag: false, // useFilenameHashes: true, // extendGenerateSWOptions (cfg) {} // extendInjectManifestOptions (cfg) {}, extendManifestJson(json) { return { ...json, name: 'myapp', short_name: 'myapp', display: 'standalone', background_color: '#ffffff', theme_color: '#ffffff', icons: [ { src: 'icons/android-chrome-192x192.png', sizes: '192x192', type: 'image/png', }, { src: 'icons/android-chrome-512x512.png', sizes: '512x512', type: 'image/png', }, ], }; }, // extendPWACustomSWConf (esbuildConf) {} },

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova cordova: { // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing },

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor capacitor: { hideSplashscreen: true, },

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron electron: { // extendElectronMainConf (esbuildConf) // extendElectronPreloadConf (esbuildConf)

// specify the debugging port to use for the Electron app when running in development mode
inspectPort: 5858,

bundler: 'packager', // 'packager' or 'builder'

packager: {
  // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

  // OS X / Mac App Store
  // appBundleId: '',
  // appCategoryType: '',
  // osxSign: '',
  // protocol: 'myapp://path',

  // Windows only
  // win32metadata: { ... }
},

builder: {
  // https://www.electron.build/configuration/configuration

  // appId: 'myapp',
},

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex bex: { contentScripts: [ 'my-content-script', ],

// extendBexScriptsConf (esbuildConf) {}
// extendBexManifestJson (json) {}

}, }));

I had trying solution from https://github.com/vuejs/core/issues/4344 But after I have added dedupe: ['vue]

I have got a new warning - Internal server error: Failed to resolve import "src/css/app.scss" and for other import ex. - boot folder

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

quasarframework / quasar