search

Shopify / ui-extensions

MIT License
266 stars 36 forks source link

Failing React imports for validation UI #1765

Open bernier opened 7 months ago

bernier commented 7 months ago

Please list the package(s) involved in the issue, and include the version you are using

Describe the bug

Impossible to run the Shopify extension due to issue with Shopify node modules

Steps to reproduce the behavior:

  1. Follow the official Shopify tutorial https://shopify.dev/docs/apps/checkout/validation/create-complex-validation-rules/build-ui
  2. Run npm run dev 
    ✘ [ERROR] No matching export in "node_modules/@shopify/ui-extensions-react/build/esm/surfaces/admin.mjs" for import "FunctionSettings"
11:18:19 │ extensions │ ✘ [ERROR] No matching export in "node_modules/@shopify/ui-extensions-react/build/esm/surfaces/admin.mjs" for import "FunctionSettings"
11:18:19 │ extensions │ 
11:18:19 │ extensions │     extensions/my-validation-settings/src/ValidationSettings.jsx:6:2:
11:18:19 │ extensions │       6 │   FunctionSettings,
11:18:19 │ extensions │         ╵   ~~~~~~~~~~~~~~~~
11:18:19 │ extensions │ 
11:18:19 │ extensions │ ✘ [ERROR] No matching export in "node_modules/@shopify/ui-extensions-react/build/esm/surfaces/admin.mjs" for import "Section"
11:18:19 │ extensions │ 
11:18:19 │ extensions │     extensions/my-validation-settings/src/ValidationSettings.jsx:7:2:
11:18:19 │ extensions │       7 │   Section,
11:18:19 │ extensions │         ╵   ~~~~~~~

Expected behavior

The @shopify/ui-extensions-react should export correctly

MitchLillie commented 7 months ago

Hi @bernier! This looks like an issue with your lockfile. Can you try removing your package-lock.json or yarn.lock file and re-installing your node modules?

Because we publish FunctionSettings and Section to the unstable tag, npm can try to use one of the stable versions instead, which is the cause of the error.

bernier commented 7 months ago

@MitchLillie I removed the lockfile, the node_modules folder and reinstalled

I still had the same issue.

This is the extension config within package-lock.json

    "extensions/my-validation-settings": {
      "version": "1.0.0",
      "license": "UNLICENSED",
      "dependencies": {
        "@shopify/ui-extensions": "unstable",
        "@shopify/ui-extensions-react": "unstable",
        "react": "^18.0.0"
      },
      "devDependencies": {
        "@types/react": "^18.0.0",
        "react-reconciler": "0.29.0"
      }
    },

My app hosts other extensions; these extensions use:

    "@shopify/ui-extensions": "2024.1.x",
    "@shopify/ui-extensions-react": "2024.1.x"

It looks like all extensions need to use the same version, I had to change the other extension to unstable. Why have a config per extension if it's to force all of them to use the same version of a module?

billfienberg commented 4 months ago

@bernier, sorry for the delay. Are you still experiencing this issue?