Having a problem with loader: "You may need an additional loader to handle the result of these loaders."

[AllanPinheiroDeLima]

I recently redownloaded my project, reinstalled its dependencies and out of nowhere I'm having a weird error that didn't happen before.

File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|       const p2 = h2.props[prop];
|       if (p1 && p2) {
>         diffs.push(..._diff(h1.props?.[prop], h2.props?.[prop], opts));
|       } else if (p1 || p2) {
|         diffs.push(

I tried several things, like installing and configuring the babel plugin for optional chaining, deleting node_modules/package-lock and trying again and I even changed my node version from 14 to 16 to 18, but the problem persists. I tried rolling back my old package-lock to see if the problem would go away, but no luck either. It is also affecting the deploys, wich began to have the same error.

Can anyone shed some light on what could be happening, I'm really clueless and don't know where to look anymore.

My nuxt.config is below:

import colors from 'vuetify/es5/util/colors'
import { portuguese as pt } from './locales/pt.js'
import { english as en } from './locales/en';
import es from 'vuetify/es5/locale/es';
import { defineNuxtConfig } from "@nuxt/bridge";

export default defineNuxtConfig({
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  bridge: {},
  alias: {
    "~/*": "<rootDir>/*",
    "@/*": "<rootDir>/*"
  },
  server: {
    host: "0.0.0.0"
  },
  loading: {
    color: "#1a5dd6",
    failedColor: "red",
    height: "3px",
  },
  loadingIndicator: {
    name: './components/loader.html',
    background: "#1a5dd6"
  },
  pageTransition: {
    name: 'my-page',
    mode: 'out-in'
  },
  publicRuntimeConfig : {
    prod: process.env.IS_PRODUCTION || 'http://localhost:3001',
    API_BASE_URL: process.env.API_BASE_URL,
    FRONTEND_BASE_URL: process.env.FRONTEND_BASE_URL,
    PROD: process.env.IS_PRODUCTION
  },
  runtimeConfig: {
    public: {
      FRONTEND_BASE_URL: process.env.FRONTEND_BASE_URL,
      API_BASE_URL: process.env.API_BASE_URL,
      PROD: process.env.IS_PRODUCTION
    }
  },
  // mode: 'spa',
  ssr: false,
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'static',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    titleTemplate: 'MPS Cloud - Quasar',
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // { rel: "preconnect", href: "https://fonts.googleapis.com"  },
      // { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: true },
      // { rel: 'stylesheet', src: "https://fonts.googleapis.com/css2?family=Inter:100,300,400,500,700,900&display=swap" }
    ]
  },
  /*
  ** Global CSS
  */
  css: [
  ],
  router: {
    middleware: ['auth']
  },
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    '~/plugins/syncfusion/DocumentEditor',
    '~/plugins/axios.interceptors',
    '~/plugins/VueTheMask.ts',
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  // components: false,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify',
    // 'nuxt-aegis',
    ['@pinia/nuxt', { disableVuex: false }]
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      {code: 'pt', name: "Português brasileiro"},
      {code: 'en', name: "English"},
      {code: 'es', name: "Español"}
    ],
    defaultLocale: 'pt',
    strategy: 'no_prefix',
    vueI18nLoader: true,
    formatFallbackMessages: true,
    vueI18n: {
      silentFallbackWarn: true,
      fallbackLocale: 'pt',
      messages: {
        pt: { ...pt },
        en: { ...en },
        es: { ...es }
      }
    }
  },
  /*
  ** Sitemap module configuration
  ** See https://www.npmjs.com/package/@nuxtjs/sitemap
  */
  sitemap: {
    hostname: 'https://quasar.mpscloud.com.br',
    gzip: true
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    // baseURL: "http://localhost:3001/"
    baseURL: process.env.API_BASE_URL
  },
  auth: {
    fullPathRedirect: true,
    resetOnError: true,
    rewriteRedirects: false,
    redirect: {
      callback: '/auth',
      login: '/pacs',
      logout: '/',
      home: '/pacs'
    },
    strategies: {
      local: false,
      auth0: {
        endpoints: {
          userInfo: "https://api.mpscloud.com.br/auth/userinfo"
        },
        redirectUri: 'https://dev.quasar.mpscloud.com.br/auth',
        logoutRedirectUri: 'http://localhost:3000/auth',
        domain: 'allanplima.auth0.com',
        clientId: 'qMkFOa5Act61Ge4lt9I2e3XlL18wDjnm',
        audience: 'https://quasar.api.com.br'
      },
      awsCognito: {
        scheme: "oauth2",
        endpoints: {
          authorization: "https://auth.mpscloud.com.br/login",
          token: "https://auth.mpscloud.com.br/oauth2/token",
          userInfo: `${process.env.API_BASE_URL}/v2/auth/user-info`,
          logout: "https://auth.mpscloud.com.br/logout",
          refresh: "https://auth.mpscloud.com.br/oauth2/token"
        },
        token: {
          property: "access_token",
          type: "Bearer",
          maxAge: 3600
        },
        idToken: {
          property: "id_token",
          type: "Bearer"
        },
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 4
        },
        responseType: "token",
        redirectUri: `${process.env.FRONTEND_BASE_URL}/auth`,
        logoutRedirectUri: `${process.env.FRONTEND_BASE_URL}/auth/logout`,
        clientId: "4avm2hedr7nr5aa8087onjj4bc",
        scope: ["email", "openid", "phone", "aws.cognito.signin.user.admin"],
        codeChallengeMethod: "S256"
      }
    }
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss'],
    defaultAssets: {
      icons: 'fa',
      font: {
        family: 'Inter'
      }
    },
    lang: {
      t: (key, ...params) => {
        const i18n = window.$nuxt._i18n;

        return i18n.t(key, params)
      }
    },
    theme: {
      dark: true,
      themes: {
        light: {
          primary: "#1a5dd6",
          accent: colors.grey.lighten3,
          secondary: colors.amber.lighten3,
          info: colors.teal.darken1,
          warning: colors.amber.base,
          error: "#FF1D25",
          success: colors.teal
        },
        dark: {
          primary: "#1a5dd6",
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.darken2,
          warning: colors.amber.base,
          error: "#FF1D25",
          success: colors.teal.darken2
        }
      }
    }
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    transpile: ['vuetify/lib'],
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
      ]
    },
    extend(config, ctx) {
      // config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'

      // Run ESLint on save
      // if (ctx.isDev && ctx.isClient) {
      //   config.module.rules.push({
      //     enforce: 'pre',
      //     test: /\.(js|vue)$/,
      //     loader: 'eslint-loader',
      //     exclude: /(node_modules)/
      //   })
      // }
    },
    analyze: false,

  }
})

[wattanx]

reproduction https://stackblitz.com/github/nuxt/starter/tree/v2-bridge

[AllanPinheiroDeLima]

So, I solved using a specific version of nuxt bridge which does not have this bug. @wattanx can you test if works for you too?

Im using "@nuxt/bridge": "npm:@nuxt/bridge-edge@3.0.0-27747000.69db93e"

[wattanx]

@AllanPinheiroDeLima Thanks. I fixed the problem by changing it to @nuxt/bridge-edge@3.0.0-27747000.69db93e!

A temporary solution seems to be the method below: https://github.com/nuxt/bridge/issues/748#issuecomment-1520993156

[markchristianlacap]

I am able to fixed the issue by overriding one dependency.

 "pnpm": {
    "overrides": {
      "c12": "1.2.0"
    }
  }

[brolnickij]

I suggest a more elegant solution

// nuxt.config.ts
export default defineNuxtConfig({
  build: {
    transpile: ['ohash']
  }
})

P.S. The error you are facing is due to the usage of optional chaining (the ?. operator) in the index.mjs file of the ohash package. This syntax is not supported by default.

[danielroe]

This should be resolved in the latest Bridge edge release. Thank you for reporting it! ❤️