vuetifyjs / vuetify-loader

📦 Webpack and Vite plugins for treeshaking Vuetify components and more
https://vuetifyjs.com/customization/a-la-carte#vuetify-loader
MIT License
511 stars 91 forks source link

Vite 5 Import assertions are not a stable feature of the JavaScript language. #330

Closed eguvenc closed 7 months ago

eguvenc commented 9 months ago

I get this warnings when i try to install vuetify() plugin for Vite 5

Here is the demo repo. https://github.com/eguvenc/vite5/

ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js

image

Here is my vite.config.mjs file.


// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import eslintPlugin from 'vite-plugin-eslint'

// Utilities
import { defineConfig, loadEnv } from 'vite'
// import { fileURLToPath, URL } from 'node:url'
// import { resolve, dirname } from 'node:path'

// https://vitejs.dev/config/
// https://vitejs.dev/guide/env-and-mode.html#env-files
// 
export default defineConfig({
  // transpileDependencies: true,
  // transpileDependencies: ["vuetify"],
  server: {
    host: '0.0.0.0',
    port: 3000
  },
  plugins: [
    // eslintPlugin(),
    // vue({ 
    //   template: { 
    //     transformAssetUrls, 
    //     compilerOptions: {
    //       // trix editor support
    //       // tell Vite that all components starting with "trix-" are webcomponents
    //       // https://stackoverflow.com/questions/72660014/how-to-make-vue-and-vite-work-with-web-components
    //       isCustomElement: (tag) => tag.startsWith('trix-')
    //     }
    //   }
    // }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    // vuetify({
    //   autoImport: true,
    //   styles: {
    //     configFile: 'src/styles/settings.scss',
    //   },
    // }),
    // https://github.com/lokalise/lokalise-tutorials/blob/main/vue-3-i18n/vite.config.js
    // VueI18nPlugin({
    //   runtimeOnly: false,
    //   include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
    // }),
  ],
  define: { 
    'process.env': {},
    // enable hydration mismatch details in production build
    // __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true',
  },
  // resolve: {
  //   alias: {
  //     '@': fileURLToPath(new URL('./src', import.meta.url))
  //   },
  //   extensions: [
  //     '.js',
  //     '.json',
  //     '.jsx',
  //     '.mjs',
  //     '.ts',
  //     '.tsx',
  //     '.vue',
  //   ],
  // }
})

My package.json file

{
  "name": "demo-vuetify",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --host --mode dev",
    "build": "vite build --mode prod",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
  },
  "dependencies": {
    "@intlify/unplugin-vue-i18n": "^0.8.2",
    "vuex": "^4.1.0",
    "vue-i18n": "^9.9.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-prettier-vue": "^4.2.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.55.0",
    "vite": "^5.0.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-vuetify": "^2.0.1"
  }
}

Here is the demo repo. https://github.com/eguvenc/vite5/

naftalivanderloon commented 9 months ago

bump..

agentschmitt commented 8 months ago

found similar issue here: https://github.com/vuetifyjs/vuetify-loader/issues/326 i also got into this issue after updating to vite@5 & vite-plugin-vuetify@2

only option i found until now is to disable warnings for nodejs with enviroment variable NODE_NO_WARNINGS=1 but this will hide all warnings not only the experimental stuff :(

eguvenc commented 8 months ago

thanks i use this solutions for now

  "scripts": {
    "dev": "VITE_CJS_IGNORE_WARNING=true vite --host --mode dev",
    "build": "VITE_CJS_IGNORE_WARNING=true vite build --mode prod",
    "preview": "VITE_CJS_IGNORE_WARNING=true vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
  },
kingyue737 commented 8 months ago
{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--no-warnings=ExperimentalWarning' vite --open --host",
    "build": "cross-env NODE_OPTIONS='--no-warnings=ExperimentalWarning' vite build",
  },
}