Module not found: Error: Can't resolve '@vue/compiler-sfc'

[castelreng]

Hello,

I am actually working in a next Js project and I am not able to build it in local.
Everything works fine if the build occurs on Vercel for example.

The yarn build is complaining with the following error :

I am working in a react project so do not need to have @vue/compiler-sfc installed. Even If I install it, it will complains with other missing dependencies.

Just below, my package.json dependencies.

"dependencies": {
    "@apollo/client": "3.3.13",
    "@aws-amplify/ui-react": "1.0.5",
    "@google-pay/button-react": "2.3.0",
    "@headlessui/react": "0.3.1",
    "@heroicons/react": "1.0.1",
    "@paypal/checkout-server-sdk": "1.0.2",
    "@stripe/react-stripe-js": "1.4.0",
    "@stripe/stripe-js": "1.13.2",
    "@tailwindcss/forms": "0.3.2",
    "apollo-server-micro": "2.22.1",
    "aws-amplify": "3.3.25",
    "aws-amplify-react": "4.2.30",
    "aws-sdk": "2.882.0",
    "axios": "0.21.1",
    "cors": "2.8.5",
    "dayjs": "1.10.4",
    "dynamoose": "2.7.3",
    "graphql": "15.5.0",
    "graphql-tools": "7.0.4",
    "i18next": "20.2.1",
    "jsonwebtoken": "8.5.1",
    "jwk-to-pem": "2.0.5",
    "lodash": "4.17.21",
    "next": "10.0.9",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-hook-form": "6.15.5",
    "react-i18next": "11.8.12",
    "react-number-format": "4.5.3",
    "sharp": "0.28.1",
    "stripe": "8.142.0",
    "tailwindcss": "2.0.4",
    "uuid": "8.3.2"
  },
  "devDependencies": {
    "@tailwindcss/jit": "0.1.5",
    "@types/cors": "2.8.10",
    "@types/jsonwebtoken": "8.5.1",
    "@types/jwk-to-pem": "2.0.0",
    "@types/lodash": "4.14.168",
    "@types/micro": "7.3.4",
    "@types/node": "14.14.35",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.2",
    "@types/sharp": "0.28.0",
    "@types/uuid": "8.3.0",
    "@typescript-eslint/eslint-plugin": "4.18.0",
    "@typescript-eslint/parser": "4.18.0",
    "add": "2.0.6",
    "autoprefixer": "10.2.5",
    "eslint": "7.22.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "8.1.0",
    "eslint-import-resolver-typescript": "2.4.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.3.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "lint-staged": "10.5.4",
    "postcss": "8.2.8",
    "prettier": "2.2.1",
    "typescript": "4.2.3",
    "yarn": "1.22.10"
  }

Does anyone face this issue ?

Thanks in advance

[ardatan]

I'd recommend to use the scoped packages instead of graphql-tools npm package. Let's say for makeExecutableSchema, please just use @graphql-tools/schema because the bundler doesn't do treeshaking correctly as I understand because you shouldn't need graphql-tag-pluck in a client-side project.

[castelreng]

Hello,

Thank you for the answer.
As recommended by you, I have just install the needed packages : @graphql-tools/schema and @graphql-tools/stitch

Everything works fine now !!!

Thank you for your time 👍