Commonjs modules error

[Daniel Harvey]

Thanks for any help! I'm sure I'll figure it out eventually, I love your approach but am struggling to get started.

the error

npm run dev

> newsvelte@0.0.1 dev /Users/daniel/code/newsvelte
> svelte-kit dev

(node:86887) UnhandledPromiseRejectionWarning: file:///Users/daniel/code/newsvelte/node_modules/@graphql-tools/utils/index.mjs:1
import { parse, GraphQLError, isNonNullType, Kind, valueFromAST, print, isObjectType, isListType, isSpecifiedDirective, astFromValue, isSpecifiedScalarType, isIntrospectionType, isInterfaceType, isUnionType, isInputObjectType, isEnumType, isScalarType, GraphQLDeprecatedDirective, specifiedRules, concatAST, validate, versionInfo, buildClientSchema, visit, TokenKind, Source, isTypeSystemDefinitionNode, getNamedType, GraphQLString, GraphQLNonNull, GraphQLList, GraphQLID, GraphQLBoolean, GraphQLFloat, GraphQLInt, GraphQLObjectType, GraphQLInterfaceType, GraphQLInputObjectType, GraphQLDirective, GraphQLUnionType, GraphQLEnumType, GraphQLScalarType, isNamedType, getNullableType, isLeafType, GraphQLSchema, isDirective, isCompositeType, doTypesOverlap, getOperationAST, getDirectiveValues, GraphQLSkipDirective, GraphQLIncludeDirective, typeFromAST, isAbstractType, getOperationRootType, TypeNameMetaFieldDef, buildASTSchema } from 'graphql';
^^^^
SyntaxError: Named export 'Kind' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const { parse, GraphQLError, isNonNullType, Kind, valueFromAST, print, isObjectType, isListType, isSpecifiedDirective, astFromValue, isSpecifiedScalarType, isIntrospectionType, isInterfaceType, isUnionType, isInputObjectType, isEnumType, isScalarType, GraphQLDeprecatedDirective, specifiedRules, concatAST, validate, versionInfo, buildClientSchema, visit, TokenKind, Source, isTypeSystemDefinitionNode, getNamedType, GraphQLString, GraphQLNonNull, GraphQLList, GraphQLID, GraphQLBoolean, GraphQLFloat, GraphQLInt, GraphQLObjectType, GraphQLInterfaceType, GraphQLInputObjectType, GraphQLDirective, GraphQLUnionType, GraphQLEnumType, GraphQLScalarType, isNamedType, getNullableType, isLeafType, GraphQLSchema, isDirective, isCompositeType, doTypesOverlap, getOperationAST, getDirectiveValues, GraphQLSkipDirective, GraphQLIncludeDirective, typeFromAST, isAbstractType, getOperationRootType, TypeNameMetaFieldDef, buildASTSchema } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:104:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:149:5)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async load_config (file:///Users/daniel/code/newsvelte/node_modules/@sveltejs/kit/dist/cli.js:849:17)
    at async file:///Users/daniel/code/newsvelte/node_modules/@sveltejs/kit/dist/cli.js:948:19

(Use `node --trace-warnings ...` to show where the warning was created)
(node:86887) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:86887) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

What I've tried:

• a couple different projects
• I'm on an m1 but I don't think that's it?
• svelte-kiters are aware of this class of issue: sveltejs/kit#928
• graphql had a similar looking issue: graphql/graphql-js#2721

I believe the issue is that while NodeJS treats your index.js as an ES module, it doesn't resolve the graphql import to its "module": "index.mjs" file. I'm searching NodeJS docs regarding this behavior, but cannot find it any mention that it would respect the module property of the package.json of the imported (third-party) module.

The module build file will work when you bundle your index.js with tools like webpack, as they respect the module field of GraphQL's package.json, and will include index.mjs instead of its CommonJS module.

But graphql-tools IS loading the mjs:

(node:86887) UnhandledPromiseRejectionWarning: file:///Users/daniel/code/newsvelte/node_modules/@graphql-tools/utils/index.mjs:1,...

[JYC]

Did you try to clone this repo, and work with the example folder?

npx degit github:leveluptuts/gQuery/example gQueryExample

[Daniel Harvey]

That helped thanks jycouet! Bumping the node version from 14.16 to 14.18 fixed it. The error on the example made it clear:

npm ERR! code ENOTSUP
npm ERR! notsup Unsupported engine for @typescript-eslint/eslint-plugin@5.10.0: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"14.16.1","npm":"6.14.12"})
...

---

That said, the gQueryExample seems to be missing dependencies.

[JYC]

That said, the gQueryExample seems to be missing dependencies.

No, they are peerDep in gQuery, that's why you don't need to list everything "manually" in your sveltekit project.
It's a great idea from gQuery to onboard people on code gen? But lack a bit of openness of the all eco system.
I'm working on something ;)

[Daniel Harvey]

@leveluptuts/svelte-toy is in the dependencies list (I had just run npm i). I was running npm 6, which doesn't install peer dependencies apparently. I am definitely no npm expert, thank you!