In @nuxt/bridge, "You may need an additional loader to handle the result of these loaders." - occurs for useVueRouter

[YutaMoriJP]

Environment

• Operating System: Darwin
• Node Version: v14.17.6
• Nuxt Version: v2.16.0-27720022.54e852f
• Package Manager: [email protected]
• Bundler: Webpack
• UserConfig: server, render, publicRuntimeConfig, head, router, build, plugins, loading, css, typescript, manifest, buildModules, i18n, axios, serverMiddleware, bridge
• Runtime Modules: -
• Build Modules:  ['@nuxt/[email protected]'],

Reproduction

nuxt.config.js
exports.default = defineNuxtConfig({
  telemetry: false,
  bridge: { typescript: false },
  buildModules: ['@nuxt/[email protected]'],
  server: serverConf,
  router: {
    base: '/_00/',
    middleware: ['router', 'set-auth', 'set-season', 'set-reqDate', 'check-init'],
  },
  head: {
    titleTemplate: '%s',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description },
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/assets/favicon.png' },
      { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    ],
    __dangerouslyDisableSanitizers: ['script'],
  },
  loading: '~/components/global/Loading.vue',
  css: [
    '@/assets/scss/base/reset.scss',
    '@/assets/scss/base/initialize.scss',
    '@/assets/scss/base/player.scss',
    '@/assets/scss/global/loader-transition.scss',
    '@/assets/scss/global/page-transition.scss',
  ],
  modules: [
    '~/modules/sentry',
    'nuxt-user-agent',
    ['cookie-universal-nuxt', { alias: 'cookies' }],
    '@nuxtjs/markdownit',
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      '~assets/scss/defs/vars/easing.scss',
      '~assets/scss/defs/vars/layout.scss',
      '~assets/scss/defs/vars/fonts.scss',
      '~assets/scss/defs/vars/breakpoints.scss',
      '~assets/scss/defs/vars/colors.scss',
      '~assets/scss/defs/vars/index.scss',
      '~assets/scss/defs/vars/env.scss',
      '~assets/scss/defs/mixins/aspect-ratio.scss',
      '~assets/scss/defs/mixins/media.scss',
      '~assets/scss/defs/mixins/skew.scss',
      '~assets/scss/defs/mixins/placeholder.scss',
      '~assets/scss/defs/mixins/svg.scss',
      '~assets/scss/defs/lib/math.scss',
    ],
  },
  dayjs: {
    locales: ['ja'],
    defaultLocale: 'ja',
    plugins: ['isSameOrBefore', 'isSameOrAfter', 'isBetween'],
  },
  plugins: [
    { src: '~/plugins/debug', mode: 'client' },
    '~/plugins/iconfont',
    '~/plugins/vuelidate',
    '~/plugins/clipboard',
    '~/plugins/amp-base-components',
    '~/plugins/base-components',
    '~/plugins/global-components',
    '~/plugins/ctx-inject',
    '~/plugins/od-api',
    '~/plugins/jsonld',
    '~/plugins/lazyload',
    { src: '~/plugins/i18n', mode: 'client' },
    { src: '~/plugins/awesome-swiper', mode: 'client' },
    { src: '~/plugins/gtm.js', ssr: false },
    { src: '~/plugins/intersection-observer-polyfill.js', mode: 'client' },
    { src: '~/plugins/nuxt-client-init.js', ssr: false },
  ],
  build: {
    filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : `[name].[hash].js`),
      chunk: ({ isDev }) => (isDev ? '[name].js' : `[name].[chunkhash].js`),
      css: ({ isDev }) => (isDev ? '[name].css' : `[name].[hash].css`),
      img: ({ isDev }) => (isDev ? '[path][name].[ext]' : `img/[name].[ext]?v=${new Date().getTime()}`),
      video: ({ isDev }) => (isDev ? '[path][name].[ext]' : `videos/[name].[ext]?v=${new Date().getTime()}`),
    },
    loaders: {
      pugPlain: {
        data: {
          ...require('./assets/pug/helpers'),
        },
      },
      scss: {
        implementation: Sass,
        additionalData: `$env: (node: '${nodeEnv}', storage: '${env.STORAGE_BASE_URL}');`,
      },
    },
    compact: false,
    plugins: [
      new ExtraWatchWebpackPlugin({
        dirs: [`${process.cwd()}/assets/dev/storage`],
      }),
      new CopyPlugin([
        {
          from: `${process.cwd()}/assets/dev/storage`,
          to: `${process.cwd()}/static/dev/storage`,
        },
      ]),
      new webpack.IgnorePlugin(/^\.\/locale$/),
      new webpack.DefinePlugin({
        __SENTRY_DEBUG__: false,
        __SENTRY_TRACING__: false,
      }),
    ],
    parallel: true,
    babel: {
      babelrc: true,
    },
    terser: {
      terserOptions: {
        compress: {
          drop_console: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'qa',
        },
      },
    },
    extend(config, { isDev, isClient, isServer }) {
      // config.output.publicPath = assetsPath
      if (!isDev) {
        config.plugins.push(
          new Obfuscator({
            stringArrayEncoding: ['base64'],
            stringArrayThreshold: 1,
          }),
        )
      }
      if (isDev && isClient) {
        // eslint
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        })
      }

      if (isClient) {
        config.module.rules.push({
          test: /plugins\/iconfont\/index\.js$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                url: false,
              },
            },
            {
              loader: 'webfonts-loader',
              options: {
                publicPath: config.output.publicPath,
                // publicPath,
              },
            },
          ],
        })
      }
    },
  },
})

Describe the bug

Getting a build error that that Module parsing failed. Please help :(

Additional context

No response

Logs

ERROR in ./node_modules/@nuxt/bridge/dist/runtime/composables.mjs 30:22
Module parse failed: Unexpected token (30:22)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     return useVueRouter();
|   }
>   return useNuxtApp()?.nuxt2Context.app.router;
| };
| export const useRoute = () => {
 @ ./node_modules/@nuxt/bridge/dist/runtime/index.mjs 2:0-34 2:0-34
 @ ./.nuxt/capi.plugin.mjs
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

ERROR in ./node_modules/@nuxt/bridge/dist/runtime/config.plugin.mjs 8:27
Module parse failed: Unexpected token (8:27)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         return target.public;
|       }
>       return target[prop] ?? target.public?.[prop];
|     },
|     set(target, prop, value) {
 @ ./.nuxt/index.js 21:0-82 271:13-46 272:10-43
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

ERROR in ./node_modules/@nuxt/bridge/dist/runtime/app.plugin.mjs 94:59
Module parse failed: Unexpected token (94:59)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     get(target, prop) {
|       if (prop[0] === '$') {
>         return target.nuxt2Context[prop] || target.vue2App?.[prop];
|       }
|       return Reflect.get(target, prop);
 @ ./.nuxt/index.js 20:0-76 268:13-43 269:10-40
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

[danielroe]

let's track in #642.