jaydenseric / graphql-upload

Middleware and an Upload scalar to add support for GraphQL multipart requests (file uploads via queries and mutations) to various Node.js GraphQL servers.
https://npm.im/graphql-upload
MIT License
1.43k stars 131 forks source link

No "exports" I have this problem after today's update #327

Closed polo13999 closed 2 years ago

polo13999 commented 2 years ago

$ ts-node index.ts

rror [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/polo13999/Sites/case/wawagfun/apolloserver/node_modules/graphql-upload/package.json at new NodeError (node:internal/errors:371:5) at throwExportsNotFound (node:internal/modules/esm/resolve:440:9) at packageExportsResolve (node:internal/modules/esm/resolve:692:3) at resolveExports (node:internal/modules/cjs/loader:482:36) at Function.Module._findPath (node:internal/modules/cjs/loader:522:31) at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27) at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/polo13999/Sites/case/wawagfun/apolloserver/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18)

jaydenseric commented 2 years ago

Over the past several major versions of graphql-upload, the way you import from it has changed. See the instructions for migrating imports in the changelog entries:

  1. https://github.com/jaydenseric/graphql-upload/releases/tag/v14.0.0
  2. https://github.com/jaydenseric/graphql-upload/releases/tag/v16.0.0

You need to deep import the modules you want to use. To understand why the main index modules were removed, see:

https://jaydenseric.com/blog/optimal-javascript-module-design

Note that graphql-upload is now a pure Node.js ESM package, and the types are held in TypeScript JSDoc comments that require your project TypeScript config to have a few settings to work:

{
  "compilerOptions": {
    "allowJs": true,
    "maxNodeModuleJsDepth": 10,
    "module": "nodenext"
  }
}
polo13999 commented 2 years ago

截圖 2022-07-25 上午10 00 32

I follow the setting tsconfig but the problem still exists

jaydenseric commented 2 years ago

You need to write the import correctly; you must include the file extension in the path:

import graphqlUploadExpress from "graphql-upload/graphqlUploadExpress.mjs";
polo13999 commented 2 years ago

截圖 2022-07-25 下午4 06 54

Thanks for the reply, but I have a new problem after the change

polo13999 commented 2 years ago

截圖 2022-07-25 下午5 54 05 I use tsc check maybe it's type error right?

jaydenseric commented 2 years ago

Regarding https://github.com/jaydenseric/graphql-upload/issues/327#issuecomment-1193724501 :

graphql-upload is now published as ESM, see https://github.com/jaydenseric/graphql-upload/releases/tag/v16.0.0 :

The API is now ESM in .mjs files instead of CJS in .js files, accessible via import but not require.

Basically, ESM can import a CJS module, but a CJS module can't require an ESM module. You need to use ESM for your project. This is a very good thing to do nowadays, because many packages on npm are (or have already) transitioning to pure ESM.

Regarding https://github.com/jaydenseric/graphql-upload/issues/327#issuecomment-1193834568 :

Perhaps check the version for graphql and its types is up to date.

I can't really help you in greater detail from here, as it's project work really and beyond the scope of maintaining graphql-upload.

rhayart commented 2 years ago

Hey @jaydenseric

Do you know how to use graphql-upload without transforming the whole projet into mjs ? Switching to "type": "module" means a lot of change in heavy project, and i would to avoid this for now.

PS: i do not use typescript

Thanks,

polo13999 commented 2 years ago

by the way do you have express server with apolloserver example with typescript

jaydenseric commented 2 years ago

@polo13999

by the way do you have express server with apolloserver example with typescript

the only example GraphQL API I personally maintain uses Koa (not Express), but does indeed use Apollo Server and TypeScript:

https://github.com/jaydenseric/apollo-upload-examples/tree/master/api

The repo began with apollo in the name and a lot of people want to see an Apollo Server example, so I kept it that way, but personally I don't use it and favour graphql-api-koa.

@rhayart

Do you know how to use graphql-upload without transforming the whole projet into mjs ? Switching to "type": "module" means a lot of change in heavy project, and i would to avoid this for now.

PS: i do not use typescript

When you have a build step for your project, there are nearly infinite things you can do such as try to transpile some of your dependencies from ESM to CJS before the rest of your build occurs. Instead of adding complexity, I recommend properly migrating your project to ESM so you can avoid a lot of headaches; an ESM project can use both ESM and CJS dependencies so it's a huge improvement. I use .mjs instead of the package "type": "module" field, so that way you can keep some .js files in your project as CJS if you need to (for example some dev tools expect their .js config files to be CJS). .mjs also allows you to configure tooling such as ESLint to know for sure what files are ESM, for example:

https://github.com/jaydenseric/graphql-upload/blob/5d55705bead7e5518ddc86d2052fe2598c48a35f/.eslintrc.json#L16-L28

This is more correct than configuring your tools to think every JavaScript file in the project is ESM.

Renaming files to .mjs might make the Git history a little more complicated in an ESM refactor, depending if you were using ESM or CJS syntax in your source code. I haven't done this before, but maybe the history will be better by migrating in two steps, first using "type": "module", then swapping to .mjs? IDK, probably not worth it. In the big projects I migrated I tended to configure the tools like TypeScript and ESLint first then use macOS Finder to bulk rename .js files to .mjs, do epic find and replace using regex to swap the require calls for import statements, and sometimes temporarily install some ESLint plugins that can auto fix missing file extensions in import statements if that is a problem. Then run through TypeScript errors that pick up problems about imports and what they resolve until everything is ok. In your case if you are not using TypeScript, you can install some import related ESLint plugins to find obvious issues although they are a bit buggy compared to using the latest TypeScript with compilerOptions.module set to "nodenext". I don't use TypeScript to compile anything, it's just used to check types and the correctness of imports:

Sorry to people subscribed to this issue; we are getting a bit off-topic.

koresar commented 2 years ago

@rhayart I will keep my fork of graph-upload as CJS compatible forever.