Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

help: Unexpected token in Pathe #672

Closed
gping-system opened this issue Aug 8, 2022 · 8 comments
Closed

help: Unexpected token in Pathe #672

gping-system opened this issue Aug 8, 2022 · 8 comments
Assignees
Labels
needs-repro Waiting for code that can reproduce the issue

Comments

@gping-system
Copy link

gping-system commented Aug 8, 2022

馃摎 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
    image

  • Extend webpackConfig in nuxt.config.ts
    image
    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

@danielroe
Copy link
Member

I think you should simply be able to remove the build.extend entry in your nuxt config, and add pathe to your build.transpile array.

@gping-system
Copy link
Author

did't work
i have removed build.extendand tried

  • transpile: ['pathe'],
  • transpile: ['pathe/dist/index'],
  • transpile: ['pathe/dist/index.cjs'],
  • " yarn add pathe" with transpile setting
    allmost same error message
ERROR in ./node_modules/pathe/dist/index.cjs 168:43
Module parse failed: Unexpected token (168:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...
same
...
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js

Copy link
Member

Would you provide a small reproduction via https://stackblitz.com/github/nuxt/starter/tree/v2 ? 馃檹

@danielroe danielroe added the needs-repro Waiting for code that can reproduce the issue label Aug 9, 2022 — with Volta.net
@gping-system
Copy link
Author

gping-system commented Aug 9, 2022

https://stackblitz.com/edit/github-n735uj-mvickg?file=nuxt.config.js,package.json
I found if i closed nuxt.config build.standalone and all worked, why?
yarn dev server will complied without error and yarn build worked
I use build.standalone becouse "vue-awesome-swiper": "4.1.1", (version for vue2)
its dependencies swiper5 and i'm using "swiper": "^8.3.2" for typescript and new style
surmon-china/vue-awesome-swiper#808 (comment)
if my project close it got another swiper error on web:

Error
require() of ES Module D:\gp-project\gp-health-v2\node_modules\swiper\swiper.esm.js 
from D:\gp-project\gp-health-v2\node_modules\vue-awesome-swiper\dist\vue-awesome-swiper.js not supported. 
Instead change the require of swiper.esm.js in 
D:\gp-project\gp-health-v2\node_modules\vue-awesome-swiper\dist\vue-awesome-swiper.js to a dynamic import() which is available in all CommonJS modules.

So I downgrade my project swiper to @6.8.4 and closed build.standalone
some swiper style broke, but i can find my way fix it
At least all looks good
thx
image

@LTDanwithlegs
Copy link

LTDanwithlegs commented Aug 12, 2022

@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.

@LTDanwithlegs
Copy link

@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' }]]
          }
        }
      })

@IsraelOrtuno
Copy link

@LTDanwithlegs this definitely works. Thanks for sharing.

@Ovyerus
Copy link

Ovyerus commented Dec 11, 2022

For Yarn 2/3 PnP users, this solution will result in absolute butt-load of stuff you'd need to add to packageExtensions (almost 200 lines and I still wasn't finished). A much better solution I found is using Yarn's package patching to just replace the problematic syntax manually, like this.

.yarn/patchs/pathe-npm-1.0.0-12bb397fc8.patch

diff --git a/dist/shared/pathe.7f7ac46d.cjs b/dist/shared/pathe.7f7ac46d.cjs
index 00419e26cd22fa45625a19d549fc008cc632de92..5243fbfbd218fc259898025b11594235beb315cd 100644
--- a/dist/shared/pathe.7f7ac46d.cjs
+++ b/dist/shared/pathe.7f7ac46d.cjs
@@ -169,7 +169,7 @@ const dirname = function(p) {
   return segments.join("/") || (isAbsolute(p) ? "/" : ".");
 };
 const format = function(p) {
-  const segments = [p.root, p.dir, p.base ?? p.name + p.ext].filter(Boolean);
+  const segments = [p.root, p.dir, p.base || p.name + p.ext].filter(Boolean);
   return normalizeWindowsPath(p.root ? resolve(...segments) : segments.join("/"));
 };
 const basename = function(p, extension) {
diff --git a/dist/shared/pathe.fb014aa6.mjs b/dist/shared/pathe.fb014aa6.mjs
index 3bb15f817d6f7b475d1995bd9ba422059b2fea4c..ee2a2e876e8ea0d156b1c390cfbfdc1e8907ae5f 100644
--- a/dist/shared/pathe.fb014aa6.mjs
+++ b/dist/shared/pathe.fb014aa6.mjs
@@ -167,7 +167,7 @@ const dirname = function(p) {
   return segments.join("/") || (isAbsolute(p) ? "/" : ".");
 };
 const format = function(p) {
-  const segments = [p.root, p.dir, p.base ?? p.name + p.ext].filter(Boolean);
+  const segments = [p.root, p.dir, p.base || p.name + p.ext].filter(Boolean);
   return normalizeWindowsPath(p.root ? resolve(...segments) : segments.join("/"));
 };
 const basename = function(p, extension) {
diff --git a/dist/utils.cjs b/dist/utils.cjs
index ad224a84d69a9f6af4f11c9f0250a648fc646432..9e5ea3d7c4cc98eeca7070c1ca679a2d8cc8af62 100644
--- a/dist/utils.cjs
+++ b/dist/utils.cjs
@@ -34,7 +34,8 @@ function resolveAlias(path$1, aliases) {
 }
 const FILENAME_RE = /(^|[/\\])([^/\\]+?)(?=(\.[^.]+)?$)/;
 function filename(path) {
-  return path.match(FILENAME_RE)?.[2];
+  const match = path.match(FILENAME_RE)
+  return match ? match[2] : undefined;
 }
 function _compareAliases(a, b) {
   return b.split("/").length - a.split("/").length;
diff --git a/dist/utils.mjs b/dist/utils.mjs
index 4c1379051eede406800cfe1a2625340e65118390..ad87764657a13d9d67c3049433d57c51acf96436 100644
--- a/dist/utils.mjs
+++ b/dist/utils.mjs
@@ -32,7 +32,8 @@ function resolveAlias(path, aliases) {
 }
 const FILENAME_RE = /(^|[/\\])([^/\\]+?)(?=(\.[^.]+)?$)/;
 function filename(path) {
-  return path.match(FILENAME_RE)?.[2];
+  const match = path.match(FILENAME_RE)
+  return match ? match[2] : undefined;
 }
 function _compareAliases(a, b) {
   return b.split("/").length - a.split("/").length;

And then update your resolutions in package.json

  "resolutions": {
    "pathe@^0.3.3": "patch:pathe@npm%3A1.0.0#./.yarn/patches/pathe-npm-1.0.0-12bb397fc8.patch",
    "pathe@^1.0.0": "patch:pathe@npm%3A1.0.0#./.yarn/patches/pathe-npm-1.0.0-12bb397fc8.patch"
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs-repro Waiting for code that can reproduce the issue
Projects
None yet
Development

No branches or pull requests

5 participants