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

asoong · 2024-08-21T15:59:13Z

Please confirm that you have:

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.)
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

The text was updated successfully, but these errors were encountered:

gordonhirsch · 2024-08-23T15:13:21Z

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 · 2024-08-26T10:21:39Z

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 · 2024-08-27T09:22:47Z

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 [email protected]
17:18:36 │            remix │ npm info using [email protected]
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 · 2024-08-27T09:47:07Z

@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 · 2024-08-27T13:28:30Z

@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 · 2024-09-03T05:32:23Z

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 · 2024-09-11T10:19:23Z

@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

isaacroldan · 2024-09-27T13:18:27Z

Closing for now, if you still have issues post a comment and I'll reopen the issue @asoong

asoong added the Type: Bug Something isn't working label Aug 21, 2024

lucyxiang added the Area: @shopify/app @shopify/app package issues label Sep 3, 2024

isaacroldan closed this as completed Sep 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

asoong commented Aug 21, 2024

gordonhirsch commented Aug 23, 2024

gonzaloriestra commented Aug 26, 2024

md-brethren commented Aug 27, 2024 •

edited

Loading

gonzaloriestra commented Aug 27, 2024

md-brethren commented Aug 27, 2024

asoong commented Sep 3, 2024

isaacroldan commented Sep 11, 2024

isaacroldan commented Sep 27, 2024

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

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

Comments

asoong commented Aug 21, 2024

Please confirm that you have:

In which of these areas are you experiencing a problem?

Expected behavior

Actual behavior

Verbose output

Reproduction steps

Operating System

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

Shell

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

What language and version are you using in your application?

gordonhirsch commented Aug 23, 2024

gonzaloriestra commented Aug 26, 2024

md-brethren commented Aug 27, 2024 • edited Loading

gonzaloriestra commented Aug 27, 2024

md-brethren commented Aug 27, 2024

asoong commented Sep 3, 2024

isaacroldan commented Sep 11, 2024

isaacroldan commented Sep 27, 2024

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

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

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

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

md-brethren commented Aug 27, 2024 •

edited

Loading