Environment variables are broken

[empz]

Trying to load the access token from an environment variable (as it should be from the beginning instead of hardcoding it), breaks the build.

const Storyblok = new StoryblokClient({
  accessToken: process.env.STORYBLOK_PREVIEW_TOKEN,
  cache: {
    clear: "auto",
    type: "memory",
  },
});

Build throws the following error:

> Build error occurred
TypeError: Cannot read property 'env' of undefined
    at Object.320 (/workspace/nextjs-multilanguage-website/.next/server/pages/404.js:754:62)
    at __webpack_require__ (/workspace/nextjs-multilanguage-website/.next/server/webpack-runtime.js:25:42)
    at Object.125 (/workspace/nextjs-multilanguage-website/.next/server/pages/404.js:686:74)
    at __webpack_require__ (/workspace/nextjs-multilanguage-website/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/workspace/nextjs-multilanguage-website/.next/server/pages/404.js:861:52)
    at /workspace/nextjs-multilanguage-website/.next/server/pages/404.js:862:28
    at Object.<anonymous> (/workspace/nextjs-multilanguage-website/.next/server/pages/404.js:865:3)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32) {
  type: 'TypeError'
}

Looking into .next/server/pages/404 or .next/server/pages/[[...slug]].js we can see that something is messing up the process.env call. Seems like autoprefixer or something. Although I thought that was for CSS only, why is it messing up this simple nodejs code? No idea.

const Storyblok = new (external_storyblok_js_client_default())({
  accessToken: external_autoprefixer_namespaceObject.process.env.STORYBLOK_PREVIEW_TOKEN, // ???
  cache: {
    clear: "auto",
    type: "memory"
  }
});

[empz]

Okay it seems we need to use NEXT_PUBLIC environment variables. Although probably not a good idea to expose this to the browser. Or is it a requirement and doesn't impose any security risk?

[fgiuliani]

Hey @empz sorry for the late response.
Have you taken a look at the new approach using the new React SDK?

https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes

https://www.npmjs.com/package/@storyblok/react