Use Sofa API in a NextJS based website: incorrect resolution of never-asked-for Vue js libs

[vemonet]

Hi,

A few months ago we had an issue with SOFA trying to import Vue js dependencies that we never asked for, especially that we are using React: #797

According to the answer this is not a dependency anymore, but if I am trying to reinstall sofa-api in my NextJS project I am still getting the exact same error related to a vue dependency:

Error with SOFA
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/@graphql-tools/graphql-tag-pluck/index.esm.js:481:0
Module not found: Can't resolve '@vue/compiler-sfc'
null
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at mapIntoArray (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/react/cjs/react.development.js:1037:17)
    at mapChildren (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/react/cjs/react.development.js:1066:3)
    at toArray (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/react/cjs/react.development.js:1116:10)
    at ReactDOMServerRenderer.render (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:3779:28)
    at ReactDOMServerRenderer.read (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/render.js:54:854)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19)
    at loadGetInitialProps (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/render.js:54:1145)
    at async /home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/next-server.js:112:97
    at async /home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/next-server.js:105:142
    at async DevServer.renderToHTMLWithComponents (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/next-server.js:137:387)
    at async DevServer.renderToHTML (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/next-server.js:138:610)
    at async DevServer.renderToHTML (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/server/next-dev-server.js:36:578)
    at async DevServer.render (/home/vemonet/develop/bio2kg/bio2kg-registry/website/node_modules/next/dist/next-server/server/next-server.js:75:160)
^C

This is the output of yarn add when I add sofa-api

info Direct dependencies
└─ sofa-api@0.11.0
info All dependencies
├─ @types/js-yaml@4.0.2
├─ ansi-colors@4.1.1
├─ axios@0.21.1
├─ follow-redirects@1.14.8
├─ regexparam@1.3.0
├─ sofa-api@0.11.0
├─ title-case@3.0.3
└─ trouter@3.2.0
Done in 9.03s.

Note that the GitHub Releases versions are not matching the current versions: it installed 0.11.0, and according to npm it is 0.11.0: https://www.npmjs.com/package/sofa-api . But according to your GitHub releases the latest version is v0.10.2

I used the framework agnostic example, cf. the exact code here:

import getStream from 'get-stream';
import { createSofaRouter } from 'sofa-api';
import { schema } from './api/graphql'

const invokeSofa = createSofaRouter({
  basePath: '/rest',
  schema,
});

const handleSofa = async (req: any, res: any) => {
  try {
    const response = await invokeSofa({
      method: req.method,
      url: req.url,
      body: JSON.parse(await getStream(req)),
      contextValue: {
        req
      },
    });
    return response
  } catch (error) {
    console.log("Error with SOFA")
  }
};

export default handleSofa

You can find all details of other dependencies used in the project in the package.json: https://github.com/bio2kg/bio2kg-registry/blob/main/website/package.json

I use Ubuntu 20.04 with NodeJS v16.12.0 and yarn 1.22.17

Any idea where it could come from? @ardatan

[vemonet]

It seems like this is quite a recurring issue in the JavaScript - GraphQL ecosystem! ardatan/graphql-tools#2456

Most of those messages are 1 year old, and the issue is declared to be fixed since then by a lot of people. But we are still getting the error when installing the latest versions of the "patched" packages (which should not have any trace of compiler-sfc)

The problem seems to come from the mess of dependencies required to have GraphQL working.

Originally there was this dependency: graphql-tools

But according to this github issue ardatan/graphql-tools#2456 we can't use graphql-tools anymore, and we should use some other new packages. It is not clear which package we need, someone mentioned that create-react-app was installing this by default:

"@graphql-mesh/cli": "^0.16.0",
"@graphql-mesh/config": "^0.11.14",
"@graphql-mesh/graphql": "^0.13.1",
"@graphql-mesh/runtime": "^0.10.14",

Other are mentioning @graphql-tools/merge and we can also see the use of import { makeExecutableSchema } from "@graphql-tools/schema";

If I am checking Apollo server docs, they tell me that I need the following dependencies: @apollo/client graphql (2 completely different one!)

So I removed the graphql-tools dependency that seems to be the problem, and that does not seems to be required for running GraphQL.

Indeed it is not required for GraphQL since my GraphQL endpoint and all pages related to GraphQL still works... Apart from SOFA API which gives this error:

./node_modules/apollo-server-core/dist/ApolloServer.js:28:0
Module not found: Can't resolve 'net'
null

So by removing this useless package I now miss dependencies to Apollo server only on the SOFA API page for some reason, even if my whole Apollo server is working fine everywhere else! What a ride!

@ardatan do you know exactly which library should we use to declare the GraphQL schema? This seems to be the problem here (but I could be wrong). What is the exact line to yarn add? And what are the exact lines we need to import a Schema that will be supported by SOFA API?