search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.36k stars 262 forks source link

[Bug]: Recent updates give me 'TypeError: config.plugins.map is not a function', crash #1734

Closed chouck-pthreemedia closed 6 months ago

chouck-pthreemedia commented 7 months ago

Please confirm that you have:

In which of these areas are you experiencing a problem?

App, Hydrogen custom storefront

Expected behavior

npm run dev should launch app locally without error.

Actual behavior

App doesn't launch locally, get this error in server console: │ config.plugins.map is not a function │ To investigate the issue, examine this stack trace: │ at registerCleanBugsnagErrorsFromWithinPlugins (~~/node_modules/@shopify/cli-hydrogen/node_modules/@shopify/cli-kit/dist/public/node/error-handler.js:137) │ at init (~~/node_modules/@shopify/cli-hydrogen/node_modules/@shopify/cli-kit/dist/public/node/base-command.js:29) │ at async runCLI (~~/node_modules/@shopify/cli-kit/dist/public/node/cli.js:68) │ at async runShopifyCLI (~~/node_modules/@shopify/cli/dist/index.js:34)

Verbose output

chrishouck@chriss-mbp jmlshopifystore % npm run dev --verbose
npm verb cli /Users/chrishouck/.nvm/versions/node/v18.17.1/bin/node /Users/chrishouck/.nvm/versions/node/v18.17.1/bin/npm
npm info using npm@10.2.4
npm info using node@v18.17.1
npm verb title npm run dev
npm verb argv "run" "dev" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/chrishouck/.npm/_logs/2024-02-05T16_01_56_480Z-
npm verb logfile /Users/chrishouck/.npm/_logs/2024-02-05T16_01_56_480Z-debug-0.log

> sanity-hydrogen-app@0.0.0 dev
> shopify hydrogen dev

╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  config.plugins.map is not a function                                        │
│                                                                              │
│  To investigate the issue, examine this stack trace:                         │
│    at registerCleanBugsnagErrorsFromWithinPlugins                            │
│    (~~/node_modules/@shopify/cli-hydrogen/node_m  │
│    odules/@shopify/cli-kit/dist/public/node/error-handler.js:137)            │
│    at init (~~/node_modules/@shopify/cli-hydroge  │
│    n/node_modules/@shopify/cli-kit/dist/public/node/base-command.js:29)      │
│    at async runCLI (~~/node_modules/@shopify/cli  │
│    -kit/dist/public/node/cli.js:68)                                          │
│    at async runShopifyCLI (~~/node_modules/@shop  │
│    ify/cli/dist/index.js:34)                                                 │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

    TypeError: config.plugins.map is not a function
npm verb exit 0
npm info ok

Reproduction steps

  1. npm i @shopify/cli
  2. npm run dev

Operating System

Mac OS Sonoma 14.3

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

"^3.55.3"

Shell

zsh

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

v18.17.1

What language and version are you using in your application?

No response

aurelienbobenrieth commented 7 months ago

Got it as well today on Windows 11.

I updated every packages I had in my project:

    "@shopify/app": "^3.55.3",
    "@shopify/app-bridge": "^3.7.10",
    "@shopify/app-bridge-react": "^3.7.10",
    "@shopify/cli": "^3.55.3",
    "@shopify/i18next-shopify": "^0.2.9",
    "@shopify/polaris": "^12.12.1",
    "@shopify/polaris-icons": "^8.2.0",
    "@shopify/ui-extensions": "^2024.1.1",
    "@shopify/ui-extensions-react": "^2024.1.1",

and the error message disappeared

kuschAlexander commented 7 months 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?

App, Hydrogen custom storefront

Expected behavior

npm run dev should launch app locally without error.

Actual behavior

App doesn't launch locally, get this error in server console: │ config.plugins.map is not a function │ To investigate the issue, examine this stack trace: │ at registerCleanBugsnagErrorsFromWithinPlugins (~/node_modules/@shopify/cli-hydrogen/node_modules/@shopify/cli-kit/dist/public/node/error-handler.js:137) │ at init (~/node_modules/@shopify/cli-hydrogen/node_modules/@shopify/cli-kit/dist/public/node/base-command.js:29) │ at async runCLI (~/node_modules/@shopify/cli-kit/dist/public/node/cli.js:68) │ at async runShopifyCLI (~/node_modules/@shopify/cli/dist/index.js:34)

Verbose output

chrishouck@chriss-mbp jmlshopifystore % npm run dev --verbose
npm verb cli /Users/chrishouck/.nvm/versions/node/v18.17.1/bin/node /Users/chrishouck/.nvm/versions/node/v18.17.1/bin/npm
npm info using npm@10.2.4
npm info using node@v18.17.1
npm verb title npm run dev
npm verb argv "run" "dev" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/chrishouck/.npm/_logs/2024-02-05T16_01_56_480Z-
npm verb logfile /Users/chrishouck/.npm/_logs/2024-02-05T16_01_56_480Z-debug-0.log

> sanity-hydrogen-app@0.0.0 dev
> shopify hydrogen dev

╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  config.plugins.map is not a function                                        │
│                                                                              │
│  To investigate the issue, examine this stack trace:                         │
│    at registerCleanBugsnagErrorsFromWithinPlugins                            │
│    (~~/node_modules/@shopify/cli-hydrogen/node_m  │
│    odules/@shopify/cli-kit/dist/public/node/error-handler.js:137)            │
│    at init (~~/node_modules/@shopify/cli-hydroge  │
│    n/node_modules/@shopify/cli-kit/dist/public/node/base-command.js:29)      │
│    at async runCLI (~~/node_modules/@shopify/cli  │
│    -kit/dist/public/node/cli.js:68)                                          │
│    at async runShopifyCLI (~~/node_modules/@shop  │
│    ify/cli/dist/index.js:34)                                                 │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

    TypeError: config.plugins.map is not a function
npm verb exit 0
npm info ok

Reproduction steps

  1. npm i @shopify/cli
  2. npm run dev

Operating System

Mac OS Sonoma 14.3

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

"^3.55.3"

Shell

zsh

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

v18.17.1

What language and version are you using in your application?

No response

Hi, got same issue recently, but for deploy script.

Running npm prune seems working to me;

link to forum, where i find it: https://community.shopify.com/c/hydrogen-headless-and-storefront/hydrogen-cli-error-after-upgrading-from-2023-10-4-to-2024-01-0/m-p/2417620

chouck-pthreemedia commented 7 months ago

thank you @kuschAlexander , unfortunately that didn't do it for me :/

christiankozalla commented 7 months ago

This bug seems to be caused by a dependency of @shopify/cli-hydrogen: @shopify/cli-kit version 3.51.0 (the buggy code was released there: config.plugins.map(...)

I checked the currently latest released version 3.54.4 and it has got an update: [...config.plugins].map(...) ( https://github.com/Shopify/cli/blob/main/packages/cli-kit/src/public/node/error-handler.ts#L170 )

Now I think @shopify/cli-hydrogen will release an update soon, in which @shopify/cli-kit on version 3.54.4 or later will be included. But right now, you can add an override to your package.json

  "overrides": {
    "@shopify/cli-kit": "^3.54.4"
  }

Then run npm update @shopify/cli-hydrogen

shauns commented 7 months ago

I'm going to move this report over to the hydrogen project's repo. That workaround seems sound.

aurelienbobenrieth commented 7 months ago

@shauns well it was not on a hydrogen project in my case

shauns commented 7 months ago

@aurelienbobenrieth Its hard to be sure without seeing what your versions were prior to setting them. but what you set them to is what we'd expect -- CLI & app to be the same version for instance. If they weren't then totally possible to have an incompatibility there.

michenly commented 7 months ago

Thanks for raising this issue, we are addressing it in https://github.com/Shopify/hydrogen/pull/1741 which aim to be release March 1, 2024.

~~Please note that this work had been deprioritize ~~

resurrected in https://github.com/Shopify/hydrogen/pull/1786

chouck-pthreemedia commented 7 months ago

Wonderful! Thanks Michell for the update

On Thu, Feb 8, 2024 at 11:14 AM Michelle Chen @.***> wrote:

Thanks for raising this issue, we are addressing it in #1741 https://github.com/Shopify/hydrogen/pull/1741 which aim to be release March 1, 2024.

— Reply to this email directly, view it on GitHub https://github.com/Shopify/hydrogen/issues/1734#issuecomment-1934464484, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5B43ZBEJ6KRMKZ64MIGWATYST2XFAVCNFSM6AAAAABC5TDWQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZUGQ3DINBYGQ . You are receiving this because you authored the thread.Message ID: @.***>

jonrrivera commented 7 months ago

same issue on the Sanity Demo Commerce repo. tried @christiankozalla solution but unfortunately no luck using

  "overrides": {
    "@shopify/cli-kit": "^3.54.4"
  }

hope this gets addressed soon. is one one able to launch a new hydrogen store for the time being then?

fcisio commented 7 months ago

Hi @jonrrivera, the fix should work.

"overrides" is a npm / pnpm thing. I suspect you might be using yarn, if that's the case, you want to use "resolutions" instead.

"resolutions": {
    "@shopify/cli-kit": "^3.54.4"
}

You can also delete node_modules before a new fresh install.

jonrrivera commented 7 months ago

@fcisio thank you! might have also been an issue that I'm using Bun. Even tho it mentions resolving resolutions similar to npm / yarn

in this Sanity Demo Commerce repo, I'm confused as to where to add the 

"resolutions": {
    "@shopify/cli-kit": "^3.54.4"
}

since it only shopify/cli-kit only shows on the package-lock.json of the root

fcisio commented 7 months ago

@jonrrivera ahhhh Bun...

I was super excited about it but ended up not using it day to day, because it struggles with overrides/resolutions by design. This may be outdated by now, but the only way to achieve dependencies overrides is via the import statement themselves (which means, there is nothing you can do about node_modules).

So I think the answer is that Bun is not stable enough at this point in time to handle this use case.

Now for the second part of your question, the snippet goes in your package.json.

"dependencies": {},
"devDependencies": {},
"overrides": {
    "@shopify/cli-kit": "^3.54.4"
}

You are right when you say shopify/cli-kit only shows in the package-lock.json. That's what overrides/resolutions do. It instructs the package manager to prioritize a specific version for deep dependencies.

jonrrivera commented 7 months ago

really appreciate the help @fcisio ! doing this and using npm for it back and running for me :)

thosakwe commented 7 months ago

This bug seems to be caused by a dependency of @shopify/cli-hydrogen: @shopify/cli-kit version 3.51.0 (the buggy code was released there: config.plugins.map(...)

I checked the currently latest released version 3.54.4 and it has got an update: [...config.plugins].map(...) ( https://github.com/Shopify/cli/blob/main/packages/cli-kit/src/public/node/error-handler.ts#L170 )

Now I think @shopify/cli-hydrogen will release an update soon, in which @shopify/cli-kit on version 3.54.4 or later will be included. But right now, you can add an override to your package.json

  "overrides": {
    "@shopify/cli-kit": "^3.54.4"
  }

Then run npm update @shopify/cli-hydrogen

After applying this workaround, I started getting this error message when I ran npm run dev (AKA shopify app dev):

> shopify app dev                                                                                                                  

╭─ error ─────────────────────────────────────────────────────────────────────────────╮
│                                                                                     │
│  The requested module '@shopify/cli-kit/node/ruby' does not provide an export       │
│  named 'execThemeCheckCLI'                                                          │
│                                                                                     │
│  To investigate the issue, examine this stack trace:                                │
│    at <PROJECT_ROOT_DIR>/node_modules/                      │
│    (shopify/app/dist/cli/services/build/extension.js:3)                             │
│    at import { execThemeCheckCLI } from '                                           │
│    at SyntaxError: The requested module '                                           │
│    at _instantiate (node:internal/modules/esm/module_job:131)                       │
│    at run (node:internal/modules/esm/module_job:213)                                │
│    at import (node:internal/modules/esm/loader:316)                                 │
│    at async importModuleDynamicallyWrapper (node:internal/vm/module:431)            │
│    at async runCLI (@shopify/cli-kit/src/public/node/cli.ts:88)                     │
│      await run(undefined, options.moduleURL)                                        │
│                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────╯

    SyntaxError: The requested module '@shopify/cli-kit/node/ruby' does not provide an export named 'execThemeCheckCLI'

The fix for this was running npm update @shopify/app.

trajce commented 6 months ago

@frandiox I'm still experiencing this issue even after the update. OS: Windows 11 Node version: v21.2.0

I manually updated: "@remix-run" packages from 2.2.0 to 2.8.0. It builds fine. "@shopify/hydrogen": "2023.10.2" -> "^2024.1.2". It builds fine. "@shopify/remix-oxygen": "^2.0.1" -> "^2.0.3". It builds fine. "@shopify/cli-hydrogen": "^6.0.2" -> "^7.1.0". It builds fine.

But when i update "@shopify/cli": "^3.50.2", -> "^3.56.3" both yarn dev & npm run dev fail:

╭─ error ────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                            │
│  config.plugins.map is not a function                                                                      │
│                                                                                                            │
│  To investigate the issue, examine this stack trace:                                                       │
│    at registerCleanBugsnagErrorsFromWithinPlugins (@shopify/cli-kit/src/public/node/error-handler.ts:170)  │
│      config.plugins.map(async (plugin) => {                                                                │
│    at init (@shopify/cli-kit/src/public/node/base-command.ts:40)                                           │
│      await registerCleanBugsnagErrorsFromWithinPlugins(this.config)                                        │
│    at async runCLI (@shopify/cli/node_modules/@shopify/cli-kit/src/public/node/cli.ts:88)                  │
│      await run(undefined, options.moduleURL)                                                               │
│    at async runShopifyCLI (@shopify/cli/src/index.ts:42)                                                   │
│      await runCLI({                                                                                        │
│                                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Also, tried automatic updates with npx shopify hydrogen upgrade initially, but that also fails giving the error mentioned above.

contrebande-labs commented 6 months ago

Same. config.plugins.map is not a function

frandiox commented 6 months ago

The update is not released yet. Please keep "@shopify/cli": "3.52.0" (without ^) until the next release. I think that should fix it for now.

trajce commented 6 months ago

Checked my project local node_modules/cli-hydrogen/package.json. It seems like no matter how many times i reinstall it's still pinned to the wrong old version.

{
  "name": "@shopify/cli-hydrogen",
  "version": "7.1.0",
  "dependencies": {
    "@shopify/cli-kit": "3.52.0",
     ....
  }
}
frandiox commented 6 months ago

The fix is now released. Please h2 upgrade to latest, which should update automatically to "@shopify/cli": "3.56.3" and Hydrogen accordingly.

umxr commented 6 months ago

@frandiox Hey, I know this issue has been closed but i was wondering if you could help diagnose why im getting a different set of errors, i was running into the same config.plugins.map is not a function error. Following the suggestions in this thread allowed me to fix this, however i am now seeing the following

Some context, I created this project using an earlier version sanity-hydrogen-demo, im upgrading my project to match the version that they are using, so im not using the latest version of hydrogen

✘ [ERROR] Could not resolve "http"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:3:21:
      3 │ const http = require('http');
        ╵                      ~~~~~~

  The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "https"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:4:22:
      4 │ const https = require('https');
        ╵                       ~~~~~~~

  The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "zlib"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:5:21:
      5 │ const zlib = require('zlib');
        ╵                      ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "fs"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:6:19:
      6 │ const fs = require('fs');
        ╵                    ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:10:23:
      10 │ const Stream = require('stream');
         ╵                        ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "crypto"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:15:23:
      15 │ const crypto = require('crypto');
         ╵                        ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "url"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:17:20:
      17 │ const url = require('url');
         ╵                     ~~~~~

  The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "crypto"

    node_modules/cookie-signature/index.js:5:21:
      5 │ var crypto = require('crypto');
        ╵                      ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream"

    node_modules/stream-slice/index.js:3:24:
      3 │ var Transform = require('stream').Transform;
        ╵                         ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

here is why my package.json looks like

{
"dependencies": {
    "@headlessui/react": "^1.7.15",
    "@portabletext/react": "^3.0.4",
    "@remix-run/react": "^2.4.0",
    "@sanity/image-url": "^1.0.2",
    "@sanity/mutator": "^3.14.1",
    "@sanity/types": "^3.14.1",
    "@shopify/hydrogen": "~2023.10.2",
    "@shopify/remix-oxygen": "^2.0.2",
    "@tippyjs/react": "^4.2.6",
    "clsx": "^1.2.1",
    "embla-carousel-react": "^7.1.0",
    "eslist": "^1.0.0-beta.1",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "hydrogen-sanity": "^3.3.0",
    "isbot": "^3.6.12",
    "lodash.filter": "^4.6.0",
    "pluralize-esm": "^9.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intersection-observer": "^9.4.3",
    "react-social-media-embed": "^2.3.5",
    "tiny-invariant": "^1.3.1",
    "@hookform/resolvers": "^2.9.7",
    "@klevu/core": "^1.9.0",
    "@sanity/asset-utils": "^1.3.0",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/client": "^3.3.2",
    "@sanity/vision": "^3.2.4",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "class-variance-authority": "^0.7.0",
    "crypto-js": "^4.2.0",
    "embla-carousel-autoplay": "^7.0.5",
    "jwt-decode": "^4.0.0",
    "react-icons": "^4.12.0",
    "react-lazy-media": "^0.3.1",
    "react-router-dom": "^6.4.2",
    "react-slick": "^0.30.1",
    "react-tabs": "^5.1.0",
    "snakecase-keys": "^5.5.0",
    "use-react-router-breadcrumbs": "^4.0.0",
    "usehooks-ts": "^2.13.0",
    "yet-another-react-lightbox": "^3.12.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.4.0",
    "@shopify/cli": "3.52.0",
    "@shopify/cli-hydrogen": "7.1.0",
    "@shopify/oxygen-workers-types": "^3.17.2",
    "@shopify/prettier-config": "^1.1.2",
    "@types/eslint": "^8.37.0",
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.55.0",
    "eslint-plugin-hydrogen": "0.12.3",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "postcss": "^8.4.22",
    "prettier": "^3.1.1",
    "prettier-plugin-tailwindcss": "^0.5.9",
    "tailwind-merge": "^2.1.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.3.3",
    "@types/crypto-js": "^4.2.1",
    "@types/react-slick": "^0.23.13"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}
frandiox commented 6 months ago

@umxr If you are going to deploy to Oxygen, you might be missing proper configuration in remix.config.js. Check what we have here, especially the serverMainFields property. If you need more help please open a new issue since this is unrelated to the original problem in this thread 🙏