Migrate App to Vite

[vikiival]

Is your feature request related to a problem?

I would love to see Vite in the repo. To enable it

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    vite: true,
  }
})

Nuxt Feature Flags

However, it shows a ton of errors

 ERROR  11:33:19 AM [vite] Internal server error: Can't find stylesheet to import.                                                                                                                         11:33:19
  ╷
2 │ @import "~bulma/sass/utilities/_all";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  styles/variables.scss 2:9    @import
  components/Footer.vue 117:9  root stylesheet
  Plugin: vite:css
  File: /Users/vikival/Documents/Work/KodaDot/nft-gallery/styles/variables.scss
  Error: Can't find stylesheet to import.
    ╷
  2 │ @import "~bulma/sass/utilities/_all";
    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    styles/variables.scss 2:9    @import
    components/Footer.vue 117:9  root stylesheet
      at Object.wrapException (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:1254:17)
      at /Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:69064:25
      at _wrapJsFunctionForAsync_closure.$protected (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:3737:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:27919:12)
      at _awaitOnObject_closure.call$1 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:27907:32)
      at Object._rootRunUnary (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:4111:18)
      at StaticClosure.<anonymous> (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:96990:16)
      at _CustomZone.runUnary$2$2 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:29325:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:28388:51)
      at Object._Future__propagateToListeners (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:3907:93)
      at _Future._completeWithValue$1 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:28247:9)
      at _AsyncAwaitCompleter.complete$1 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:27894:14)
      at Object._asyncReturn (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:3709:17)
      at /Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:69168:24
      at _wrapJsFunctionForAsync_closure.$protected (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:3737:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/vikival/Documents/Work/KodaDot/nft-gallery/node_modules/sass/sass.dart.js:27919:12)

Describe the solution you would like

I would like to see Vite 🚀

Describe alternatives you have considered

I have tried this Nuxt Bridge with Webpack 4

Screeenshots

ℹ Server built in 11949ms                                                                                                                                                                                  11:38:33
ℹ Waiting for file changes                                                                                                                                                                                 11:38:33
ℹ Memory usage: 636 MB (RSS: 942 MB)                                                                                                                                                                       11:38:33
ℹ Listening on: http://localhost:9090/                                                                                                                                                                     11:38:33
✔ Nitro built in 110 ms                                                                                                                                                                                    11:38:33

Ref

• feat: migrated app to NuxtBridge 📦  #2677

[yangwao]

Might be related to auto imports?

[kkukelka]

Had the same problems when trying to integrate Vite on its own. Vite in its current form cannot handle tilde sign '~' so i think you need to replace it with a regex somewhere in vite config. Let me see if I can find the issue

[kkukelka]

as I currently don't have the time to do the all the heavy lifting here, maybe someone wants to help out!

here are all the things you need to do for a successful migration

1. if you encounter this

Currently there is no module support for handling gql files -> you would have to wrap all gql files as .ts files
https://vite.nuxtjs.org/misc/common-issues#graphql-support

2. if you face this

my guess is that @nuxt/builder-edge seems to depend on @nuxt/webpack-edge which still uses postcss-preset-env: 6.7.1
but we need 7+ here!!!

3. sourcmaps

my best guess: play around with optimizeDeps in vite config

optimizeDeps: {
    entries: [...]
  }

possible solutions:
nuxt/vite#198
vitejs/vite#7432

hints:
maybe play around with this config

  vite: {
    build: {
      sourcemap: false,
    },
    resolve:{
      alias: [
        {
          find: '~', replacement: path.resolve(__dirname,'./')
        }
      ]
    },
    // optimizeDeps: {
    //   include: ['vue-tippy', 'vue-social-sharing','vue-audio-visual','vue-clipboard2','vue-gtag', '@fortawesome/vue-fontawesome', '@fortawesome/fontawesome-svg-core' ]
    // },
    // resolve: {
    //   alias: [
    //       {
    //           // this is required for the SCSS modules
    //           find: /^~(.*)$/,
    //           replacement: '$1',
    //       },
    //   ]
    // }
  },

[vikiival]

Wow 💯, nicely written!

[aito-hideki]

There's a blocker with Vite migration.
Nuxt i18n (v7 the latest) is not compatible with Vite.
v8 is in development to make it compatible for Vite.

[yangwao]

Is this still relevant? Are we using Vite or still Nitro stuff?

[yangwao]

Closing in favour

• Migrate to vite on production #3908