Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SESSION_SECRET error on fresh scaffold #1168

Closed
JimLynchCodes opened this issue Jul 31, 2023 · 10 comments
Closed

SESSION_SECRET error on fresh scaffold #1168

JimLynchCodes opened this issue Jul 31, 2023 · 10 comments

Comments

@JimLynchCodes
Copy link

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

"@shopify/cli-hydrogen": "^5.0.1",

What version of Remix are you using?

"@remix-run/react": "1.17.1",

Steps to Reproduce

  • scaffold new project
  • run npm run dev

Expected Behavior

should work when visiting localhost:3000

Actual Behavior

crashes with this error:


Error: SESSION_SECRET environment variable is not set
    at Object.fetch (/Users/jim/Git-Projects/gettinggreener/server.ts:26:15)
    at /Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/core/src/standards/event.ts:350:19
    at /Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/shared/src/event.ts:29:9
    at ServiceWorkerGlobalScope.<anonymous> (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/shared/src/event.ts:77:9)
    at ServiceWorkerGlobalScope.[nodejs.internal.kHybridDispatch] (node:internal/event_target:741:20)
    at ServiceWorkerGlobalScope.dispatchEvent (node:internal/event_target:683:26)
    at ServiceWorkerGlobalScope.dispatchEvent (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/shared/src/event.ts:63:18)
    at ServiceWorkerGlobalScope.dispatchEvent (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/shared/src/event.ts:87:26)
    at ServiceWorkerGlobalScope.[kDispatchFetch] (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/core/src/standards/event.ts:382:13)
    at MiniOxygen.[kDispatchFetch] (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/core/src/index.ts:1134:31)
@JimLynchCodes
Copy link
Author

I tried creating a .env file with "SESSION_SECRET" but still getting the error

@frandiox
Copy link
Contributor

Can you try writing SESSION_SECRET="foobar" in your <root>/.env?

@JimLynchCodes
Copy link
Author

Thanks @frandiox 👍

Do the docs mention these env variables that needed to be added?

After adding SESSION_SECRET I'm now seeing this error:

StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.
TypeError: Cannot read properties of undefined (reading 'includes')
    at isMockShop (/Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/hydrogen-react/src/storefront-client.ts:56:58)
    at getPublicTokenHeaders (/Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/hydrogen-react/src/storefront-client.ts:115:10)
    at createStorefrontClient (/Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/hydrogen/src/storefront.ts:250:5)
    at Object.fetch (/Users/jim/Git-Projects/gettinggreener/server.ts:38:28)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at ServiceWorkerGlobalScope.[kDispatchFetch] (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/core/src/standards/event.ts:385:13)
    at /Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/mini-oxygen/dist/mini-oxygen/server.js:146:24
   GET  500  render  / 
TypeError: Cannot read properties of undefined (reading 'includes')
    at isMockShop (/Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/hydrogen-react/src/storefront-client.ts:56:58)
    at getPublicTokenHeaders (/Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/hydrogen-react/src/storefront-client.ts:115:10)
    at createStorefrontClient (/Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/hydrogen/src/storefront.ts:250:5)
    at Object.fetch (/Users/jim/Git-Projects/gettinggreener/server.ts:38:28)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at ServiceWorkerGlobalScope.[kDispatchFetch] (/Users/jim/Git-Projects/gettinggreener/node_modules/@miniflare/core/src/standards/event.ts:385:13)
    at /Users/jim/Git-Projects/gettinggreener/node_modules/@shopify/mini-oxygen/dist/mini-oxygen/server.js:146:24
   GET  500  render  /

thanks

@frandiox
Copy link
Contributor

frandiox commented Aug 1, 2023

Check your server.js or server.ts file and add values for all the missing environment variables that you find there. Or check this .env file from the demo-store.

What flow did you follow to create the project? Did you choose "mock.shop" or "link your store" option? Or you didn't see any option at all?

@JimLynchCodes
Copy link
Author

JimLynchCodes commented Aug 10, 2023 •
edited
Loading

Hey @frandiox, I added those environment variables. It works only for the demo store, but when I try to use the values for my store it just crashes with errors about server side keys:

[1] https://github.com/Shopify/hydrogen/releases

StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.
Error: [object Object] - Request ID: 0416c546-25c5-481d-b76a-cf54d67b9e52
    at throwError (/Users/jim/trash/foo/gettinggreener/node_modules/@shopify/hydrogen/src/storefront.ts:436:9)
    at fetchStorefrontApi (/Users/jim/trash/foo/gettinggreener/node_modules/@shopify/hydrogen/src/storefront.ts:338:9)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at getLayoutData (/Users/jim/trash/foo/gettinggreener/app/root.tsx:204:16)
    at async Promise.all (index 1)
    at loader (/Users/jim/trash/foo/gettinggreener/app/root.tsx:49:41)
    at callRouteLoaderRR (/Users/jim/trash/foo/gettinggreener/node_modules/@shopify/remix-oxygen/node_modules/@remix-run/server-runtime/dist/esm/data.js:48:16)
    at callLoaderOrAction (/Users/jim/trash/foo/gettinggreener/node_modules/@remix-run/router/router.ts:3568:16)
    at async Promise.all (index 0)
    at loadRouteData (/Users/jim/trash/foo/gettinggreener/node_modules/@remix-run/router/router.ts:3001:19)
TypeError: Cannot destructure property 'headerMenu' of 'layout' as it is undefined.
    at Component (/Users/jim/trash/foo/gettinggreener/app/components/Layout.tsx:39:10)
    at renderWithHooks (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
TypeError: Cannot destructure property 'headerMenu' of 'layout' as it is undefined.
    at Component (/Users/jim/trash/foo/gettinggreener/app/components/Layout.tsx:39:10)
    at renderWithHooks (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
TypeError: Cannot destructure property 'headerMenu' of 'layout' as it is undefined.
    at Component (/Users/jim/trash/foo/gettinggreener/app/components/Layout.tsx:39:10)
    at renderWithHooks (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
TypeError: Cannot destructure property 'headerMenu' of 'layout' as it is undefined.
    at Component (/Users/jim/trash/foo/gettinggreener/app/components/Layout.tsx:39:10)
    at renderWithHooks (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/jim/trash/foo/gettinggreener/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
   GET  500  render  /

@frandiox
Copy link
Contributor

Hmm... perhaps you're using the wrong tokens?
Can you try running npx shopify hydrogen env pull and see if the resulting .env is different from what you have?

@lyctea
Copy link

lyctea commented Nov 2, 2023

Hmm... perhaps you're using the wrong tokens? Can you try running npx shopify hydrogen env pull and see if the resulting .env is different from what you have?

It's work！thank you！

@frandiox frandiox closed this as completed Nov 2, 2023
@madmath madmath reopened this Apr 7, 2024
@madmath
Copy link
Contributor

madmath commented Apr 7, 2024

I've hit this issue trying to link an existing (non-remix) hydrogen storefront. Pulling the env explicitly didn't work.

@frandiox
Copy link
Contributor

frandiox commented Apr 8, 2024 •
edited
Loading

I've hit this issue trying to link an existing (non-remix) hydrogen storefront. Pulling the env explicitly didn't work.

The SESSION_SECRET doesn't come with the env pull command because we don't download secrets with this command. Therefore, you need to add it to your environment variables locally. If the project you have reads from the .env file, then you should be able to add it there.

You can see where this error is thrown here in the template (your app code): https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/server.ts#L33 -- Therefore, you can also pass the secret in any other way that your project supports.

Let me know if that works 🤞

@blittle
Copy link
Contributor

blittle commented Jun 21, 2024

Closing for lack of feedback. Please re-open if still a problem.

@blittle blittle closed this as completed Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@madmath @blittle @frandiox @JimLynchCodes @lyctea