graphcommerce-org / graphcommerce

GraphCommerce® is a headless storefront replacement for Magento 2 (PWA), that delivers a faster, better user experience. Fully customizable (React, Next.js) and open-source.
https://www.graphcommerce.org
Other
306 stars 70 forks source link

Module not found: Can't resolve './CartAgreements.gql' #1361

Open luluhoc opened 2 years ago

luluhoc commented 2 years ago

Provide environment information

node 14.19.1

I have changed scripts to this as it wasn't working properly on windows.

"scripts": {
    "dev": "yarn concurrently -k -n codegen,next \"yarn codegen-base -w\" \"yarn next dev\"",
    "codegen": "yarn mesh build && find . -type f -name '*.gql.ts' -delete && yarn codegen-base",
    "build": "yarn codegen && yarn next build && yarn next-sitemap",
    "start": "next start",
    "tsc:lint": "yarn tsc --noEmit -p .",
    "lingui": "NODE_ENV=development lingui extract",
    "codegen-base": "yarn cross-env NEXT_PUBLIC_GRAPHQL_ENDPOINT=.mesh/schema.graphql yarn graphql-codegen"
  },

What browser are you using? (if relevant)

CHROME

How are you deploying your application? (if relevant)

yarn dev

Describe the Bug

The gql.ts files aren't generated. error - ./node_modules/@graphcommerce/magento-cart/components/CartAgreementsForm/CartAgreementsForm.tsx:23:0 Module not found: Can't resolve './CartAgreements.gql'

Import trace for requested module: ./node_modules/@graphcommerce/magento-cart/components/index.ts ./node_modules/@graphcommerce/magento-cart/index.ts ./lib/graphql/GraphQLProvider.tsx ./pages/_app.tsx

Expected Behavior

Generation of gql.ts files.

To Reproduce

I run it on windows

paales commented 2 years ago

As mentioned in the chat, this is the output of yarn codegen

image

luluhoc commented 2 years ago

It seems to be a problem with @graphcommerce/graphql-codegen-near-operation-file'

paales commented 2 years ago

Sorry @luluhoc, I haven't found the time to take a look yet.

paales commented 2 years ago

@luluhoc I was thinking, can't you get it working with WSL2? https://code.visualstudio.com/docs/remote/wsl

rossparachute commented 2 years ago

@paales @luluhoc

Can confirm, I had a similar error and running the following commands in the Ubuntu WSL2 sorted the issue. There's a pretty substantial performance hit but that's a known issue of WSL and not really a GraphCommerce responsibility.

Commands yarn yarn codegen yarn dev

Error (When viewing the site root or site GraphQL page)

./node_modules/@graphcommerce/magento-cart-items/CartItems/CartItems.tsx:6:0
Module not found: Can't resolve './CartItemsQuery.gql'

Import trace for requested module:
./node_modules/@graphcommerce/magento-cart-items/index.ts
./node_modules/@graphcommerce/magento-product-configurable/ConfigurableCartItem/ConfigurableCartItem.tsx
./node_modules/@graphcommerce/magento-product-configurable/index.ts
./node_modules/@graphcommerce/magento-wishlist/components/ProductWishlistChip/ProductWishlistChipDetailConfigurable.tsx
./node_modules/@graphcommerce/magento-wishlist/components/index.ts
./node_modules/@graphcommerce/magento-wishlist/index.ts
./lib/graphql/GraphQLProvider.tsx
./pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

EDIT After running these commands successfully in the WSL2 I tried running just yarn dev in VS Code's Powershell to see if we could get away with running the commands once in the WSL then develop normally.

No dice unfortunately, we just got the following error and had to run all three commands again. Once the app booted, the same CartItemsQuery.gql error was shown.

@paales Sounds like something failing silently in the yarn codegen step?

Or perhaps the loader for GraphQL files not being used?

magento-graphcms> yarn dev
yarn run v1.22.5
warning ..\..\..\package.json: No license field
$ yarn concurrently -k -n codegen,next "yarn codegen-base -w" "yarn next dev"
warning ..\..\..\package.json: No license field
$ C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\concurrently -k -n codegen,next "yarn codegen-base -w" "yarn next dev"
'C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\concurrently' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
paales commented 2 years ago

What do you see when you run:

yarn mesh build and yarn graphql-codegen separately, do you see any odd output?

If you look at the yarn codegen command in the package.json, you also see find . -type f -name '*.gql.ts' -delete, which probably is incompatible with a window setup and we need to find something else to cleanup.

rossparachute commented 2 years ago

Hey @paales ,

Thanks for the speedy reply again. Appreciated.

Had a similar thought as yourself, had ran things that way before without the "find" snippet. No such luck.

For what it's worth I can see the CartItemsQuery.graphql file has generated successfully under: _nodemodules/@graphcommerce/magento-cart-items/CartItems

Intellisense in CartItems.tsx seems to be missing a type-declaration for the .gql imports though. Unsure if that's a red herring.

image

image

Output yarn mesh build

yarn run v1.22.5
warning ..\..\..\package.json: No license field
$ C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\mesh build
(node:20444) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
💡 🕸️  Mesh  Cleaning existing artifacts
💡 🕸️  Mesh  Reading the configuration
💡 🕸️  Mesh  Generating the unified schema
(node:20444) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
💡 🕸️  Mesh  Generating artifacts
💡 🕸️  Mesh  Generating index file in TypeScript
💡 🕸️  Mesh  Writing index.ts for CJS to the disk.
💡 🕸️  Mesh  Cleanup
💡 🕸️  Mesh  Done! => C:\dev\react\graphcommerce-magento-demo\magento-graphcms\.mesh
Done in 26.20s.

yarn graphql-codegen

yarn run v1.22.5
warning ..\..\..\package.json: No license field
$ C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\graphql-codegen
(node:25928) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  √ Parse configuration
  √ Generate outputs
Done in 14.39s.