Server 500 error Apollo Server Next 13.0.3 [3:08am]

[frankcollins3]

attempting to do: set up real graphql with server innext.js instead of just using queries to read and write to prisma data in GQLExpress + React

error: (internal server error 500) pages/api/graphqlserver.ts:

const { ApolloServer, gql } = require('@apollo/server');
const { send } = require('micro');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello, World!',
  },
};

const apolloServer = new ApolloServer({ typeDefs, resolvers });

module.exports = apolloServer.createHandler({ path: '/api/gqlserver' });

proposed approach: start fresh spend all day learn all about it. (thought it'd be a quick set up like GraphQLExpress, have to do apollo.. whole nine..

// bookmarking a downside about chatGPT as well. sunk cost. spend so much time. prompt prompt prompt. returning back to stackOflow land is hard.

routes: userSignup, linkSignedUpUserWithGoogle, postDBsettings, postDBdata and friends.. have to start fresh.

React & GraphQLExpress: all we have to do is define the GraphQLObjects, do queries with GraphQLInt, or GQLString & set up:

app.use('/fill_cont', expressGraphQL({ schema: schema, graphiql: true }))

[frankcollins3]

👎 npm i -g ts-node had to download this package with sudo, [ who knows|cares ]

➜ next-water-app git:(main) ✗ ts-node pages/api/gqlserver.ts

/usr/local/lib/node_modules/ts-node/src/index.ts:859 return new TSError(diagnosticText, diagnosticCodes, diagnostics); ^ TSError: ⨯ Unable to compile TypeScript: pages/api/gqlserver.ts:1:1 - error TS1208: 'gqlserver.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

1 const { ApolloServer, gql } = require('@apollo/server');

    at createTSError (/usr/local/lib/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/usr/local/lib/node_modules/ts-node/src/index.ts:863:19)
    at getOutput (/usr/local/lib/node_modules/ts-node/src/index.ts:1077:36)
    at Object.compile (/usr/local/lib/node_modules/ts-node/src/index.ts:1433:41)
    at Module.m._compile (/usr/local/lib/node_modules/ts-node/src/index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Object.require.extensions.<computed> [as .ts] (/usr/local/lib/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
  diagnosticCodes: [ 1208 ]
}
➜  next-water-app git:(main) ✗

[3:38am]

// update probably because of global flag but maybe not 

[frankcollins3]

this is a global script file, not a module. Adding an empty export {} statement makes it a module. which changes the err: 👍 export {};

(node:9690) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created) /Users/me/Desktop/next-water-app/pages/api/gqlserver.ts:16 export {}; ^^^^^^

SyntaxError: Unexpected token 'export' at Object.compileFunction (node:vm:355:18) at wrapSafe (node:internal/modules/cjs/loader:1022:15) at Module._compile (node:internal/modules/cjs/loader:1056:27) at Module.m._compile (/usr/local/lib/node_modules/ts-node/src/index.ts:1618:23) at Module._extensions..js (node:internal/modules/cjs/loader:1121:10) at Object.require.extensions. [as .ts] (/usr/local/lib/node_modules/ts-node/src/index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:972:32) at Function.Module._load (node:internal/modules/cjs/loader:813:14) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) at phase4 (/usr/local/lib/node_modules/ts-node/src/bin.ts:649:14) ➜ next-water-app git:(main) ✗

// have used "type":"module" before with react and undid it because it was a breaking change but this is next // and only import statements have been used to this point, if not, I've seen some clashes with this.

[3:46am]

[frankcollins3]

approach: package.json now includes: ------> "type":"module"

iterm2 command: ➜ next-water-app git:(main) ✗ npx ts-node pages/api/gqlserver.ts

error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/me/Desktop/next-water-app/pages/api/gqlserver.ts

at new NodeError (node:internal/errors:329:5)
at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
at Loader.getFormat (node:internal/modules/esm/loader:104:42)
at Loader.getModuleJob (node:internal/modules/esm/loader:242:31)
at async Loader.import (node:internal/modules/esm/loader:176:17)
at async Object.loadESM (node:internal/process/esm_loader:68:5) {

code: 'ERR_UNKNOWN_FILE_EXTENSION' } ➜ next-water-app git:(main) ✗

[3:50am]

I don't believe so but was wondering if it's supposed to be used in a .tsx file like useContext but don't believe so

[4:00am]

[frankcollins3]

proposed approach: 1: ts-node issues:

https://stackoverflow.com/questions/62096269/cant-run-my-node-js-typescript-project-typeerror-err-unknown-file-extension

2 approaching with possibility that this is a versioning issue with node, graphql, and typescript (chatGPT said no problem) :npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@eslint/eslintrc@1.3.3', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@typescript-eslint/parser@5.42.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@typescript-eslint/scope-manager@5.42.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@typescript-eslint/types@5.42.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@typescript-eslint/typescript-estree@5.42.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@typescript-eslint/visitor-keys@5.42.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'eslint@8.27.0', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'eslint-scope@7.1.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'eslint-visitor-keys@3.3.0', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'espree@9.4.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'graphql@16.7.1', npm WARN EBADENGINE required: { node: '^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0' }, npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.7.6' } npm WARN EBADENGINE }

3: possibly try with a javascript file instead of typescript

[4:05am]

chat again says it shouldn't be a big deal well see:

[4:08am]

[frankcollins3]

7/10/23:

https://stackoverflow.com/questions/62096269/cant-run-my-node-js-typescript-project-typeerror-err-unknown-file-extension

// note. am no react pro but ⛳️ for changing to .js

➜ next-water-app git:(main) ✗ npx ts-node pages/api/gqlserver.js

ReferenceError: require is not defined at file:///Users/me/Desktop/next-water-app/pages/api/gqlserver.js:1:31 at ModuleJob.run (node:internal/modules/esm/module_job:154:23) at async Loader.import (node:internal/modules/esm/loader:177:24) at async Object.loadESM (node:internal/process/esm_loader:68:5) ➜ next-water-app git:(main) ✗

// also looking @: npx ts-node? for a js file?

[4:20am] ...

[frankcollins3]

cant believe just thinking now to restart the npm run dev [4:29am]

[frankcollins3]

➜ next-water-app npm run dev

water app@0.1.0 dev next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000 error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error ReferenceError: module is not defined at file:///Users/me/Desktop/next-water-app/next.config.js:7:1 at ModuleJob.run (node:internal/modules/esm/module_job:154:23) at async Loader.import (node:internal/modules/esm/loader:177:24) at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) at async Object.loadConfig [as default] (/Users/me/Desktop/next-water-app/node_modules/next/dist/server/config.js:69:36) at async NextServer.prepare (/Users/me/Desktop/next-water-app/node_modules/next/dist/server/next.js:130:24) at async /Users/me/Desktop/next-water-app/node_modules/next/dist/cli/next-dev.js:322:13 ➜ next-water-app git:(main) ✗

[4:31am]

probably better idea to restart tomorrow & watch a few videos, spend whole day on gql + next.js

[frankcollins3]

there would be tens of pictures in here of chat saying: "start your GraphQL server" ----> "My apologies for confusion, you're right: npm run dev would start graphql server automatically"

tens of pictures with: import from "apollo-server-micro"

"My apologies, apollo-server-micro" is deprecated"]

[4:41am]

[frankcollins3]

bookmarking deps to adjust tomorrow:

[4:49am]

[frankcollins3]

goal today is to restart fresh. throw current limited knowledge of graphQL out.

instead of asking chat, I looked into the Vercel.NextJS release dates to find the one of my old repo mine-nugget-ts That old repo was fired up, emptied out, to separate concerns and (more hopefully guarantee) a working NextJS app Now time to look into GraphQL tutorials around that date time which is Nov 10, 2022

[2:23pm]

anyone who finds themselves 9 comments down in this github issue might not mind reading excerpts or info: // tapped out at 5:05am got up at 11:00am pretty beat for interview at 1:00pm that rescheduled >.> // saying that to say have got to be careful today and work with less optimal attention span, awareness and energy

[frankcollins3]

https://stackoverflow.com/questions/70269056/what-is-the-cause-of-npm-warn-ebadengine

You are using 16.10.0, but the message says it requires 16.0.0. Not 16.0.0 or greater. It requires exactly 16.0.0.

If it's your package.json with the engines field causing this issue, change it to say 16.0.0 or greater: "engines": { "node": ">=16.0.0" },

[3:01pm]

[frankcollins3]

next-water-app has server set up in: main-root/pages/api/

in this video: https://www.youtube.com/watch?v=RJpevpbC4YY main-root/graphql

[3:06pm]

[frankcollins3]

main-root/pages/api/graphql.ts

v=RJpevpbC4YY
import { ApolloServer } from "apollo-server-micro";
import { typeDefs } from "graphql/schema"
import { resolvers } from "graphql/resolvers"
import Cors from "micro-cors"

const cors = Cors() 
const apolloServer = new ApolloServer( { typeDefs, resolvers } )

const startServer = apolloServer.start()

export default cors(async function handler(req, res) {
    if (req.method === "OPTIONS") {
        res.end();
        return false;
    }

    await startServer;

    await apolloServer.createHandler({
        path: '/api/graphql'        // I think if the path were pages/api/index.ts it would just be:                /api/           
    })(req, res);  
});

export const config = {
    api: {
        bodyParser: false
    }
}

Call Stack syntaxError file:///Users//Desktop/next-water-app/node_modules/graphql/error/syntaxError.js (15:10) Parser.expectToken

file:///Users/me/Desktop/next-water-app/node_modules/graphql/language/parser.js (1511:26) Parser.parseDocument file:///Users/me/Desktop/next-water-app/node_modules/graphql/language/parser.js (122:25)

// this seems to be related to the parser and how node_modules understands it

[4:40pm]

[frankcollins3]

!!!!!!! empty object was the reason type mutations {

} [4:44pm]