help: Unexpected token in Pathe

📚 What are you trying to do? Please describe. i’m useing nuxt@2.15.8 and upgrade @nuxtjs/composition-api to@0.33.1 when it build it comes error

ERROR in ./node_modules/pathe/dist/index.cjs 213:43
Module parse failed: Unexpected token (213:43)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

const format = function(p) {
  const segments = [p.root, p.dir, p.base ?? p.name + p.ext].filter(Boolean);
  return normalizeWindowsPath(p.root ? resolve(...segments) : segments.join("/"));
};
 @ ./node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs 628:28-44
 @ ./.nuxt/composition-api/meta.mjs
 @ ./.nuxt/index.js
 @ ./.nuxt/server.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js 

it seems like babel-loader cant’ resolve function in pathe which is dependencies of @nuxt/composition-api, and i don’t know how to fix it

🔍 What have you tried?

• I tried downgrade @nuxtjs/composition-api to @0.32.0 and it broken

• Extend webpackConfig in nuxt.config.ts of course babel-loader should’t work,but i did’t know which loader i shoud use in this case

ℹ️ Additional context node version: v16.13.0 dependencies:

 "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/vue-fontawesome": "^2.0.8",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/composition-api": "^0.33.1",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/i18n": "^7.2.3",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/toast": "^3.3.1",
    "@pinia/nuxt": "^0.1.6",
    "@types/google.accounts": "^0.0.2",
    "@types/js-cookie": "^3.0.2",
    "@types/jsonld": "^1.5.6",
    "@types/tpdirect": "^5.5.3",
    "axios": "^0.27.2",
    "core-js": "^3.19.3",
    "js-cookie": "^3.0.1",
    "jwt-decode": "^3.1.2",
    "nuxt": "^2.15.8",
    "nuxt-facebook-pixel-module": "^1.5.0",
    "nuxt-jsonld": "^1.5.3",
    "pinia": "^2.0.17",
    "swiper": "^8.3.2",
    "vee-validate": "^3.4.14",
    "vue": "^2.6.14",
    "vue-awesome-swiper": "4.1.1",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vue-ui-preloader": "^1.2.1",
    "vuejs-datepicker": "^1.6.2",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/line-clamp": "^0.4.0",
    "@types/node": "^18.6.4",
    "babel-loader": "^8.2.5",
    "eslint": "^8.4.1",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.4",
    "postcss-html": "^1.3.0",
    "stylelint": "^14.9.1",
    "stylelint-config-recommended-vue": "^1.1.0",
    "stylelint-config-standard": "^24.0.0",
    "tailwindcss-text-indent": "^1.0.2"
  }

Thanks for your time

[LTDanwithlegs]

@danielroe I think we got it. The pathe package is using a single instance of the nullish coalescing operator on line 168 of index.cjs and on line 164 of index.mjs.

We added a rule to our webpack config using the build.extend function in nuxt.config.js:

config.module.rules.push({
        test: /\.(cjs|mjs)$/,
        exclude: {
          and: [/node_modules/],
          not: [/pathe/]
        },
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'ie 11' }]]
          }
        }
      })

[LTDanwithlegs]

@danielroe +1 on this from me.

I can reproduce in nuxt@2.15.8 and trying to install @nuxtjs/composition-api to@0.33.1.

We are not using the swiper package that @gping-system was using. Though there does seem to be some evidence online to support the theory that this issue stems from package version mismatches. No idea what features or usages in these packages that are causing this issue. If I can narrow down which package(s) it is for me, I’ll post a follow-up here. Maybe you can see if there are similarities.