[Bug]: Failing to bundle extension on `shopify app dev`

asoong commented 3 weeks ago

Please confirm that you have:

[x] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[x] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

It should properly build the extension and load it.

Actual behavior

Getting the following output below in console when running shopify app dev.

I started off doing this and getting the error in a private repo and got the same error when creating a new app and extension from scratch, detailed in the reproduction steps.

It seems to have trouble building the extension (no dist ouput) despite using the shopify cli to scaffold the extension. Is there a system dependency that the cli depends on to build the extension?

[ERROR] Could not resolve "@shopify/ui-extensions-react/admin"

    extensions/test-app/src/ActionExtension.jsx:16:7:
      16 │ } from '@shopify/ui-extensions-react/admin';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@shopify/ui-extensions-react" here because it's
  not listed as a dependency of this package:

    ../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@shopify/ui-extensions-react/admin" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "react/jsx-runtime"

    extensions/test-app/src/ActionExtension.jsx:23:44:
      23 │ export default reactExtension(TARGET, () => <App />);
         ╵                                             ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a
  dependency of this package:

    ../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@shopify/ui-extensions-react/admin"

    extensions/test-app/src/ActionExtension.jsx:16:7:
      16 │ } from '@shopify/ui-extensions-react/admin';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@shopify/ui-extensions-react" here because it's
  not listed as a dependency of this package:

    ../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@shopify/ui-extensions-react/admin" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "react/jsx-runtime"

    extensions/test-app/src/ActionExtension.jsx:23:44:
      23 │ export default reactExtension(TARGET, () => <App />);

Verbose output

The output is similar, the prior output suggests it successfully sets up a tunnel and then attempts to build the extension.

Reproduction steps

Run shopify app init, choose Remix, TypeScript
Run shopify app generate extension, choose Admin action
Run shopify app dev

Operating System

macOS Sonoma 14.5

Shopify CLI version (check your project's `package.json` if you're not sure)

3.66.0

Shell

No response

Node version (run `node -v` if you're not sure)

v22.5.1

What language and version are you using in your application?

No response

gordonhirsch commented 3 weeks ago

Hey @asoong , thanks for reporting this and sorry you are running into problems. I haven't been able to reproduce the issue on my end so far. It would help if we could see the full --verbose output of the shopify app dev command. Would you be able to supply that?

gonzaloriestra commented 2 weeks ago

Hi! Are you using Yarn 2.x or above? Because the CLI is only compatible with Yarn classic (1.x). Or NPM or PNPM.

We'll update the requirements here, because that was removed by mistake recently.

md-brethren commented 2 weeks ago

I'm getting the same issue here

Node version 18.20 Same shopify version and I'm on MacOS 15.0 beta.

17:18:36 │            remix │ Running pre-dev command: "npx prisma generate"
17:18:36 │         graphiql │ GraphiQL server started on port 3457
17:18:36 │ inventory-badges │ Bundling UI extension inventory-badges...
17:18:36 │ inventory-badges │ Parsed locales for extension inventory-badges at /Users/local/Documents/Projects/work/shopify-app/extensions/inventory-badges
17:18:36 │            remix │ npm
17:18:36 │            remix │  verb cli /Users/local/.nvm/versions/node/v20.10.0/bin/node /Users/local/.nvm/versions/node/v20.10.0/lib/node_modules/npm/bin/npm-cli.js
17:18:36 │            remix │ npm info using npm@10.2.3
17:18:36 │            remix │ npm info using node@v20.10.0
17:18:36 │            remix │ npm verb title npm exec prisma migrate deploy
17:18:36 │            remix │ npm verb argv "exec" "--" "prisma" "migrate" "deploy"
17:18:36 │            remix │ npm verb logfile logs-max:10 dir:/Users/local/.npm/_logs/2024-08-27T09_18_36_707Z-
17:18:36 │            remix │ npm verb logfile /Users/local/.npm/_logs/2024-08-27T09_18_36_707Z-debug-0.log
17:18:37 │            remix │ Prisma schema loaded from prisma/schema.prisma
17:18:37 │            remix │ Datasource "db": SQLite database "dev.sqlite" at "file:dev.sqlite"
17:18:37 │            remix │
17:18:37 │            remix │ 1 migration found in prisma/migrations
17:18:37 │            remix │
17:18:37 │            remix │
17:18:37 │            remix │ No pending migrations to apply.
17:18:37 │            remix │ npm verb
17:18:37 │            remix │  exit 0
17:18:37 │            remix │ npm info ok

╭─ error ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                          │
│  Failed to bundle extension inventory-badges. Please check the extension source code for errors.                                                         │
│                                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

The extension only contains :

import {
  reactExtension,
  useApi,
  AdminBlock,
  BlockStack,
  Text,
  Button,
} from '@shopify/ui-extensions-react/admin';

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, () => <App />);

function App() {
  // The useApi hook provides access to several useful APIs like i18n and data.
  const {i18n, data} = useApi(TARGET);
  console.log({data});

  return (
    // The AdminBlock component provides an API for setting the title of the Block extension wrapper.
    <AdminBlock title="Inventory Badges">
      <BlockStack>
        <Button variant="primary" size="large">Add a Badge</Button>
      </BlockStack>
    </AdminBlock>
  );
}

It doesn't even work when I generate a new extension as it throws the same error.

EDIT:

adding verbose logs

2024-08-27T09:25:17.445Z: Request to https://partners.shopify.com/api/cli/graphql completed in 691 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"dd0677410b6f7528aaede2e34d449874"
 - server-timing: processing;dur=357, socket_queue;dur=1.886, util;dur=0.7, cfRequestDuration;dur=626.999855
 - x-request-id: 5c7ee6fb-f5ad-4b33-87cd-50bd0538990c-1724750717

17:25:17 │       app-access │ 2024-08-27T09:25:17.447Z: Watching extension: app-access for:
17:25:17 │       app-access │ Rebuild and Redeploy Paths:
17:25:17 │       app-access │
17:25:17 │       app-access │
17:25:17 │       app-access │ Redeploy Paths:
17:25:17 │       app-access │   /Users/local/Documents/Projects/work/shopify-app/shopify.app.toml
17:25:17 │            remix │
17:25:17 │            remix │ ✘ remix v2.11.2 is not yet supported in the Community edition of Console Ninja.
17:25:17 │            remix │ We are working hard on it for you https://tinyurl.com/3h9mtwra.
17:25:17 │            remix │
17:25:17 │            remix │ Estimated release dates:
17:25:17 │            remix │   - Community users: around 15th October, 2024 (subject to team availability)
17:25:17 │            remix │   - PRO users:       priority access is available now
17:25:17 │            remix │
2024-08-27T09:25:17.673Z: Request to https://partners.shopify.com/api/cli/graphql completed in 771 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"61e372011469ab14cd6d195f87ff852c"
 - server-timing: processing;dur=427, socket_queue;dur=1.903, util;dur=0.2, cfRequestDuration;dur=677.999973
 - x-request-id: a99f745f-beac-4e68-9357-b38439a44178-1724750717

╭─ error ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                          │
│  Failed to bundle extension inventory-badges. Please check the extension source code for errors.                                                         │
│                                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

gonzaloriestra commented 2 weeks ago

@md-brethren that looks like a different error. Could you please open a new issue and add as many details as you can?

md-brethren commented 2 weeks ago

@md-brethren that looks like a different error. Could you please open a new issue and add as many details as you can?

@gonzaloriestra thought it was pretty similar due to the same extension bundle error. However, I was able to fix this and run the app after disabling Console Ninja for some reason. Not sure if @asoong has that extension as well.

asoong commented 1 week ago

Hi! Are you using Yarn 2.x or above? Because the CLI is only compatible with Yarn classic (1.x). Or NPM or PNPM.

We'll update the requirements here, because that was removed by mistake recently.

I'm running yarn 1.22.1

isaacroldan commented 4 days ago

@asoong I can't reproduce this using yarn 1.22.19, doing a quick search online seems like this could be related to your system. Maybe this stackoverflow answer might help? https://stackoverflow.com/a/76902985

let me know if it works

Shopify / cli