Can not develop custom theme

[jv-etailors]

I'm trying to develop a custom theme, based in the instructions of https://github.com/hyva-themes/magento2-checkout-example for the 1.0.0-rc2.

In the readme it states:

Clone it into app/code/Hyva/CheckoutExample Enable your module with bin/magento module:enable Hyva_CheckoutExample Run setup upgrade with bin/magento setup:upgrade

Specify payment methods repositories (if any) in app/code/Hyva/CheckoutExample/reactapp/package.json. Navigate into app/code/Hyva/CheckoutExample/reactapp. Run npm install (do not use yarn)

When I do the npm install in the app/code/Hyva/CheckoutExample/reactapp/ folder I get an error:

npm ERR! Could not install from "../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src" as it does not contain a package.json file.

The mentioned package.json does exist in the vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/. However if I change the reference in my modules package.json file it throws an other error because the components can not be located. Moving the package.json from vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/ into the src/ subfolder is also not the solution to the problem.

By copying the subfolders of vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src to my own module and deleting the reference in the package.json from my own module I could do the npm install, however, for updating I'd like to only override the necessary files.

[rajeev-k-tomy]

Can you remove that local dependency and try again? i.e, remove this:

"@hyva/react-checkout": "file:../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src",`

We added this because to improve the developer experience when we work in an IDE such as vscode. The above line will create symlinks to the specified path in the directory node_modules/@hyva/react-checkout/. Due to this, when we specify @hyva/react-checkout in our IDE, they will suggest the files available.

So it is not a necessary thing in order to set up your custom template.

[jv-etailors]

After reinitialising the reactapp folder on my custom module and removing that line from the package.json I can do an npm install, however, I get errors that some components can not be located when i do npm run start.

This error disappears when I copy the reactapp/public/, reactapp/scripts/ and reactapp/src/ to my own module.

[Nesquik]

Having the same issue. After removing the dependency from the package.json the linter won't compile:

Failed to compile.

src/config.js
  Line 1:17:  Unable to resolve path to module '@hyva/react-checkout/utils/env'                 import/no-unresolved
  Line 4:25:  Unable to resolve path to module '@hyva/react-checkout/utils/rootElement'         import/no-unresolved
  Line 5:43:  Unable to resolve path to module '@hyva/react-checkout/utils/localStorageConfig'  import/no-unresolved

src/index.jsx
  Line 5:25:   Unable to resolve path to module '@hyva/react-checkout/utils/rootElement'                  import/no-unresolved
  Line 6:26:   Unable to resolve path to module '@hyva/react-checkout/components/CheckoutForm'            import/no-unresolved
  Line 7:26:   Unable to resolve path to module '@hyva/react-checkout/context/Form/Step/StepProvider'     import/no-unresolved
  Line 8:29:   Unable to resolve path to module '@hyva/react-checkout/context/App/AppDataProvider'        import/no-unresolved
  Line 9:30:   Unable to resolve path to module '@hyva/react-checkout/context/Cart/CartDataProvider'      import/no-unresolved
  Line 10:34:  Unable to resolve path to module '@hyva/react-checkout/context/Form/CheckoutFormProvider'  import/no-unresolved

Trying to circumvent the problem via

ESLINT_NO_DEV_ERRORS=true

in the .env will produce this instead:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

and so on.

I'm on 1.0.0-rc2's tag like suggested above myself.

[Morgy93]

We already discussed this in Slack without a proper solution: https://hyva-themes.slack.com/archives/C01C5DBHL64/p1633165269105000

@jv-etailors @Nesquik What OS are you using? I can confirm that it worked on bare Ubuntu 18.04.5 but not within my local docker dev environment. (Which is weird nonetheless)

[jv-etailors]

@Morgy93 I'm using Ubuntu 20.04, and also running docker. However I did compile NPM outside the docker container.

[Nesquik]

@Morgy93 macOS Mojave, with docker

[Morgy93]

@jv-etailors @Nesquik Since we all are using docker on very different hosts, I currently assume that it has something to do with it. I could be very wrong, but like I said on bare Ubuntu 18.04.5 it worked fine.

@jv-etailors Can you try to run npm install and npm run start on your Ubuntu 20 alone? Just clone the repo somewhere, cd to reactapp, install and start. Any errors?

By the way, what are your node and npm versions?

[jv-etailors]

NodeJS version 10.19.0 NPM version 6.14.15

I've created a fresh clone out of hyva-themes/magento2-checkout-example and did an npm install right away, the following error emerges:

code ENOLOCAL
npm ERR! Could not install from "../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src" as it does not contain a package.json file.

The I edited this line from the dependencies section in the package.json file and ran npm install again:

"@hyva/react-checkout": "file:../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src",

There where no more errors during npm install. However, when I run npm run start of course, the checkout component can not be found:

Failed to compile.

./src/index.jsx
Module not found: Can't resolve '@hyva/react-checkout/components/CheckoutForm'

I then build a folder structure for the main repo as well and reinstalled the hyva-themes/magento2-checkout-example and adjusted the path of the @hyva/react-checkout dependency to match that structure and ran npm install again, and again running into the error of

npm ERR! code ENOLOCAL
npm ERR! Could not install from "../../vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src" as it does not contain a package.json file.

As the error states, the package.json is not in the src/ folder, but in it's parent folder.

Removing the /src from the dependency line lets npm install continue without errors, but then npm run start again gives me the error:

Failed to compile.

./src/index.jsx
Module not found: Can't resolve '@hyva/react-checkout/components/CheckoutForm'

[Morgy93]

@jv-etailors Thanks for your effort, but it really "should" work without any modifications.

I tried with node v15.12.0 and npm 7.7.0 on Ubuntu 18.04.5 without any issues. Could you please update your node and npm accordingly and try again?

[jv-etailors]

I've updated Node to 15.14.0 and npm to 7.7.6 and the issue is resolved in both the cloned environment (reinacting a Magento folder stucture) and the actual Magento environment.

I'd like to suggest to add these node and npm versions to the minimal requirements for building a checkout theme, as I could not find any version constraints for this.

[Morgy93]

Awesome! I can confirm that it works with docker and node 15 just fine. (Latest v16.12.0 works as well for me)

@Nesquik Could you try again using (at least) node 15 and npm 7?

[rajeev-k-tomy]

@Morgy93 @jv-etailors Thank you for spending time for debugging this issue. I don't have a docker setup. My node version is v14.16.0 and the npm version is 7.19.0. Does that mean only the npm version really matters here?

If we can reach a conclusion here, I will update the README accordingly.

[Morgy93]

It's really weird. I tried multiple times now with node v14 but I cannot get it to work. If using at least node v15 it works flawless.

@rajeev-k-tomy I'd go for >= v15 in the README. That "does not cause known issues" (as of now). Current active LTS is v16 anyway. (src https://nodejs.org/en/about/releases/)

[wigman]

I thought it would be a good idea to force the version, so I created this PR https://github.com/hyva-themes/magento2-checkout-example/pull/22.

Probably we should/could close this issue when that is merged.