Network error: realFetch.call is not a function

[markgibbons25]

Description

Using the VueJS sample, JSS 18 release, any page that has a component with a graphQL request (including the ootb graphQL pages) throws this error on Sitecore side. Works fine on local side jss start:connected.

[NodeInvocationException: Network error: realFetch.call is not a function
Error: Network error: realFetch.call is not a function
    at new ApolloError (C:\inetpub\wwwroot\dj101sc.dev.local\dist\corporate\server.bundle.js:32353:28)
    at C:\inetpub\wwwroot\dj101sc.dev.local\dist\corporate\server.bundle.js:33531:40
    at C:\inetpub\wwwroot\dj101sc.dev.local\dist\corporate\server.bundle.js:33842:25
    at Set.forEach (<anonymous>)
    at C:\inetpub\wwwroot\dj101sc.dev.local\dist\corporate\server.bundle.js:33840:32
    at Map.forEach (<anonymous>)
    at QueryManager.74ca.QueryManager.broadcastQueries (C:\inetpub\wwwroot\dj101sc.dev.local\dist\corporate\server.bundle.js:33838:22)
    at C:\inetpub\wwwroot\dj101sc.dev.local\dist\corporate\server.bundle.js:33445:47]
   Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.Http.HttpNodeInstance.InvokeExport(NodeInvocationInfo invocationInfo) +476

Your Environment

• Sitecore Version: 10.1.1
• JSS Version: 18.0
• Node 14 LTS
• Browser Name and version: Chrome latest
• Operating System and version (desktop or mobile): Windows 10

package.json dependencies:

"dependencies": {
    "@panter/vue-i18next": "~0.15.1",
    "@sitecore-jss/sitecore-jss-forms": "^18.0.0",
    "@sitecore-jss/sitecore-jss-vue": "^18.0.0",
    "apollo-cache-inmemory": "~1.6.3",
    "apollo-client": "~2.6.4",
    "apollo-link": "~1.2.13",
    "apollo-link-batch-http": "~1.2.13",
    "apollo-link-persisted-queries": "~0.2.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "cross-fetch": "~2.2.3",
    "flickity": "^2.2.2",
    "graphql": "~14.5.8",
    "i18next": "~17.0.16",
    "i18next-fetch-backend": "~2.2.0",
    "register-service-worker": "~1.6.2",
    "vue": "~2.6.10",
    "vue-apollo": "3.0.0-beta.27",
    "vue-meta": "~2.2.2",
    "vue-router": "~3.1.3",
    "vue-server-renderer": "^2.6.12"
  },
  "devDependencies": {
    "@babel/register": "7.6.2",
    "@sitecore-jss/sitecore-jss-cli": "^18.0.0",
    "@sitecore-jss/sitecore-jss-dev-tools": "^18.0.0",
    "@sitecore-jss/sitecore-jss-manifest": "^18.0.0",
    "@sitecore-jss/sitecore-jss-tracking": "^18.0.0",
    "@vue/cli-plugin-babel": "~4.5.6",
    "@vue/cli-plugin-eslint": "~4.5.6",
    "@vue/cli-service": "~4.5.6",
    "@vue/eslint-config-prettier": "~5.0.0",
    "babel-eslint": "~10.0.3",
    "chokidar": "~3.1.1",
    "cross-env": "~6.0.0",
    "eslint": "^7.4.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "~5.2.3",
    "eslint-plugin-yaml": "^0.2.0",
    "graphql-tag": "~2.10.1",
    "html-loader": "~0.5.5",
    "npm-run-all": "~4.1.5",
    "null-loader": "~3.0.0",
    "sass": "^1.36.0",
    "sass-loader": "^10.2.0",
    "vue-template-compiler": "~2.6.10"
  }

[CobyPear]

Thank you for the information @markgibbons25, we will look into this.

[markgibbons25]

The issue is that node-fetch is being excluded by webpack. https://github.com/node-fetch/node-fetch/issues/450 The fix is to not use the null-loader for .mjs files - in server.vue.config.js - config.module.rules.unshift add |mjs| to the test so it does not null-load node-fetch.

I guess I'm the only one to ever test the vue sample on SSR? :(