Could not resolve "#vue"

toniengelhardt commented 2 years ago

Environment

Operating System: Darwin
Node Version: v16.4.0
Nuxt Version: 2.16.0-27273615.ab1c6cb4
Package Manager: Yarn
Bundler: Vite
User Config: bridge, ssr, components, devtools, sourcemap, productionTip, telemetry, modern, publicRuntimeConfig, privateRuntimeConfig, head, manifest, pwa, loading, plugins, modules, buildModules, buildDir, router, styleResources, css, vite, axios, io, auth, dateFns, fontawesome, toast, sentry, stripe, render
Runtime Modules: @nuxtjs/axios@5.13.6, @nuxtjs/pwa@3.3.5, @nuxtjs/auth-next@5.0.0-1624817847.21691f1, @nuxtjs/sentry@5.1.5, @nuxtjs/toast@3.3.1, nuxt-stripejs@1.1.6, portal-vue/nuxt, v-wave/nuxt
Build Modules: @nuxtjs/date-fns@1.5.0, @nuxtjs/fontawesome@1.1.2, @nuxtjs/style-resources@1.2.1, @nuxt/postcss8@1.1.3, @nuxt/bridge@3.0.0-27235872.1fbfdef

Describe the bug

Dev server doesn't start.

Reproduction

// nuxt.config.js

import { defineNuxtConfig } from '@nuxt/bridge'
import { version } from './package.json'
import ICONS from './utils/icons'
import TOASTS from './utils/toasts'

const APP_URL = process.env.APP_URL

export default defineNuxtConfig({

  // target: 'static',
  ssr: false,
  components: true,
  devtools: true,
  sourcemap: true,
  productionTip: false,
  telemetry: false,

  modern: process.env.NODE_ENV === 'production',

  bridge: {
    vite: true,
    scriptSetup: true,
    autoImports: true,
    postcss8: true,
    meta: true,
  },

  publicRuntimeConfig: {
    packageName: process.env.PACKAGE_NAME,
    appURL: process.env.APP_URL,
    apiUrl: process.env.API_URL,
    mediaURL: process.env.MEDIA_URL,
    websiteURL: process.env.WEBSITE_URL,
    websocketURL: process.env.WEBSOCKET_URL,
  },

  pwa: {
    meta: {
      theme_color: '#ffffff',
      mobileAppIOS: true,
      appleStatusBarStyle: 'black',
      // nativeUI: true, DON'T USE THIS!
    },
    workbox: {
      cleanupOutdatedCaches: true,
    },
  },

  loading: false,

  // NOTE: order might matter here!
  plugins: [
    '~/plugins/directives.js',
    '~/plugins/filters.js',
    '~/plugins/v-click-outside.js',
    '~/plugins/vue-fuse.js',
    '~/plugins/vue-lodash.js',
    '~/plugins/vue-chart-3.js',
    '~/plugins/vue-datepicker.js',
    '~/plugins/vue-fullscreen.js',
    '~/plugins/vue-heatmap.js',
    '~/plugins/vue-infinite-loading.js',
    '~/plugins/vue-persistedstate.js',
    '~/plugins/vue-scroll-behavior',
    '~/plugins/vue-shortkey.js',
    '~/plugins/vue-textarea-autosize.js',
    '~/plugins/vue-touch-events.js',
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/auth-next',
    '@nuxtjs/sentry',
    '@nuxtjs/toast',
    'nuxt-stripejs',
    'portal-vue/nuxt',
    'v-wave/nuxt',
  ],

  buildModules: [
    '@nuxtjs/date-fns',
    '@nuxtjs/fontawesome',
    '@nuxtjs/style-resources',
    '@nuxt/postcss8',
  ],

  buildDir: process.env.BUILD_DIR ? `${process.env.BUILD_DIR}/v${version}` : '.nuxt',

  router: {
    base: '/',
    middleware: ['auth'],
    linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active',
    extendRoutes(routes) {
      routes.push({
        path: '/',
        redirect: '/write',
      })
    }
  },

  // Order is important here!
  styleResources: {
    scss: [
      'assets/scss/_mixins.scss',
      'assets/scss/_variables.scss',
      'assets/scss/_classes.scss',
    ],
  },

  // Style resources will be available here.
  css: [
    '~assets/scss/themes.scss',
    '~assets/scss/styles.scss',
  ],

  vite: {
    optimizeDeps: {
      exclude: [
        'date-fns/locale',
      ],
      include: [
        'cookie'
      ],
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/assets/scss/_mixins.scss";
            @import "@/assets/scss/_variables.scss";
            @import "@/assets/scss/_classes.scss";
          `,
        },
      },
    },
  },

  axios: {
    baseURL: process.env.API_URL,
    credentials: false,
  },

  io: {
    sockets: [{
      url: process.env.WEBSOCKET_URL,
    }]
  },

  auth: {
    cookie: {
      options: {
        secure: process.env.NODE_ENV === 'production', // Enable in production only.
        sameSite: 'lax',
      },
    },
    redirect: {
      login: '/login',
      logout: '/login',
      callback: '/login',
      home: '/write',
    },
    resetOnError: (error, name, endpoint) => {
      console.log('resetOnError', error, name, endpoint)
      return true
    },
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'access',
          type: 'JWT',
        },
        refreshToken: {
          property: 'refresh',
          data: 'refresh', // This is not a JWT token!
        },
        user: {
          property: false,
        },
        endpoints: {
          login: {
            url: '/auth/token/',
            method: 'post',
          },
          refresh: {
            url: '/auth/token/refresh/',
            method: 'post',
          },
          user: false,
          logout: {
            url: '/user/logout/',
            method: 'post',
          },
        },
      },
      facebook: {
        clientId: process.env.FACEBOOK_CLIENT_ID,
        responseType: 'code',
        endpoints: {
          token: process.env.BACKEND_URL + '/auth/social/facebook/',
          userInfo: process.env.API_URL + '/user/',
        },
        token: {
          type: 'JWT',
        },
      },
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        responseType: 'code',
        codeChallengeMethod: '', // This is important!
        endpoints: {
          token: process.env.BACKEND_URL + '/auth/social/google/',
          userInfo: process.env.API_URL + '/user/',
        },
        token: {
          type: 'JWT',
        },
      },
    },
  },

  dateFns: {
    locales: ['de', 'es', 'pt-br'],
  },

  fontawesome: {
    component: 'fa',
    icons: ICONS,
  },

  toast: {
    position: 'bottom-left',
    iconPack: 'fontawesome',
    singleton: true,
    register: TOASTS,
  },

  // Source:
  // https://lucas.love/how-to-use-sentry-with-nuxt-js
  sentry: {
    disabled: process.env.SENTRY_DISABLED === 'true',
    dsn: process.env.SENTRY_DSN,
    publishRelease: true,
    sourceMapStyle: 'hidden-source-map',
    // attachCommits: true,
    // disableServerSide: true,
    config: {
      release: `xxxxx`,
    },
    tracing: {
      tracesSampleRate: 0.05,
      vueOptions: {
        tracing: true,
        tracingOptions: {
          hooks: [ 'mount', 'update' ],
          timeout: 2000,
          trackComponents: true
        }
      },
    }
  },

  stripe: {
    publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
  },

  render: {
    http2: {
      push: true,
      pushAssets: null,
    },
  },
})

// package.json

{
  "name": "xxxxx",
  "version": "2.4.10",
  "releaseDate": "08.11.2021",
  "description": "xxxxx",
  "private": true,
  "scripts": {
    "dev": "cross-env --max_old_space_size=6144 HOST=0.0.0.0 PORT=3001 nuxi dev",
    "dev-dev": "cross-env --max_old_space_size=6144 HOST=0.0.0.0 PORT=3002 nuxi dev",
    "build": "node --max-old-space-size=6144 nuxi build",
    "analyze": "nuxi build --analyze",
    "generate": "nuxi generate",
    "lint": "eslint --ext .js,.ts,.vue .",
    "start": "cross-env PORT=3001 node .output/server/index.mjs",
    "start-pwa": "cross-env PORT=3001 node .output/server/index.mjs",
    "start-dev": "cross-env PORT=3002 node .output/server/index.mjs"
  },
  "dependencies": {
    "@babel/core": "7.16.0",
    "@babel/preset-env": "7.16.0",
    "@babel/runtime": "7.16.0",
    "@capacitor-community/electron": "^4.0.3",
    "@capacitor/android": "^3.3.1",
    "@capacitor/cli": "^3.3.1",
    "@capacitor/core": "^3.3.1",
    "@capacitor/ios": "^3.3.1",
    "@capacitor/status-bar": "^1.0.6",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@nuxt/ufo": "^0.5.4",
    "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/google-analytics": "^2.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sentry": "^5.1.5",
    "@nuxtjs/toast": "^3.3.1",
    "@sentry/tracing": "^6.14.1",
    "axios": "^0.24.0",
    "chartjs-adapter-date-fns": "^2.0.0",
    "chartjs-plugin-annotation": "^1.0.2",
    "chartjs-plugin-datalabels": "^2.0.0",
    "consola": "^2.15.3",
    "cordova-plugin-navigationbar-color": "^0.1.0",
    "cross-env": "^7.0.3",
    "esm": "^3.2.25",
    "file-saver": "^2.0.5",
    "lodash": "^4.17.21",
    "minimist": "^1.2.5",
    "nuxt-edge": "2.16.0-27273615.ab1c6cb4",
    "nuxt-stripejs": "^1.1.6",
    "portal-vue": "^2.1.7",
    "postcss": "8.3.11",
    "prettier": "^2.4.1",
    "prismjs": "^1.25.0",
    "regenerator-runtime": "^0.13.9",
    "sass-loader": "^10.2.0",
    "typescript": "^4.4.4",
    "v-click-outside": "^3.1.2",
    "v-wave": "^1.3.2",
    "vue-calendar-heatmap": "^0.8.4",
    "vue-chart-3": "^0.5.10",
    "vue-demi": "^0.12.1",
    "vue-fullscreen": "^2.5.2",
    "vue-fuse": "^2.2.1",
    "vue-infinite-loading": "^2.4.5",
    "vue-lodash": "^2.1.2",
    "vue-scroll-behavior": "^0.3.0",
    "vue-server-renderer": "2.6.14",
    "vue-shortkey": "^3.1.7",
    "vue-textarea-autosize": "^1.1.1",
    "vue-virtual-scroller": "^1.0.10",
    "vue2-touch-events": "^3.2.2",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "^1.6.2",
    "vuex-persistedstate": "^4.1.0",
    "webpack": "4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "7.16.0",
    "@babel/runtime-corejs3": "7.16.0",
    "@nuxt/bridge": "npm:@nuxt/bridge-edge",
    "@nuxt/nitro": "^0.10.0",
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/date-fns": "^1.5.0",
    "@nuxtjs/eslint-config": "^7.0.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "chart.js": "^3.6.0",
    "core-js": "^3.19.1",
    "css-loader": "^5.2.7",
    "eslint": "8.2.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-nuxt": "^3.0.0",
    "eslint-plugin-promise": "^5.1.1",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "node-sass": "^6.0.1",
    "nodemon": "^2.0.15",
    "postcss-import": "14.0.2",
    "postcss-loader": "4.2.0",
    "postcss-url": "^10.1.3",
    "sass": "^1.43.4"
  },
  "resolutions": {
    "**/@sentry/browser": "^6.14.1"
  }
}

Additional context

No response

Logs

No response

danielroe commented 2 years ago

@toniengelhardt Would you provide a reproduction? 🙏

toniengelhardt commented 2 years ago

@danielroe what exactly do you need? 🙏

danielroe commented 2 years ago

@toniengelhardt Here's the description from the issue creation template:

Please provide a link to a repo that can reproduce the problem you ran into. A minimal reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided after we might close it.

But basically it's something I can run (ideally online sandbox) that reproduces the issue, and as minimal as possible.

toniengelhardt commented 2 years ago

@danielroe ok, I was hoping the error msg with #vue would ring a bell. Unfortunately, it's a private project, but I'll try to make a codesandbox and see if I can reproduce it. Thanks 🙏

danielroe commented 2 years ago

This should now be resolved.

nuxt / bridge