Sapper: process is not defined

[brielov]

Hi, I'm trying to set an environment variable that points to a json api. On dev environments it points to localhost and on production to the real domain. Using replace plugin on the server side works well, but when preload is called on the client side it crashes saying that process is not defined.

This is my rollup config

export default {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      replace({
        'process.env.BACKEND_URL': BACKEND_URL,
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      svelte({
        dev,
        hydratable: true,
        emitCss: true,
      }),
      resolve({
        browser: true,
        dedupe,
      }),
      commonjs(),

      legacy &&
        babel({
          extensions: ['.js', '.mjs', '.html', '.svelte'],
          runtimeHelpers: true,
          exclude: ['node_modules/@babel/**'],
          presets: [
            [
              '@babel/preset-env',
              {
                targets: '> 1%, not dead, not ie > 0, not op_mini all',
              },
            ],
          ],
          plugins: [
            '@babel/plugin-syntax-dynamic-import',
            [
              '@babel/plugin-transform-runtime',
              {
                useESModules: true,
              },
            ],
          ],
        }),

      !dev &&
        terser({
          module: true,
        }),
    ],

    onwarn,
  },

  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      replace({
        'process.env.BACKEND_URL': BACKEND_URL,
        'process.browser': false,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      svelte({
        generate: 'ssr',
        dev,
      }),
      resolve({
        dedupe,
      }),
      commonjs(),
    ],
    external: Object.keys(pkg.dependencies).concat(
      require('module').builtinModules ||
        Object.keys(process.binding('natives')),
    ),

    onwarn,
  },

  serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      commonjs(),
      !dev && terser(),
    ],

    onwarn,
  },
};

[Conduitry]

GitHub issues aren't the right place for support questions like this. Please ask on StackOverflow or in our Discord chat room.

[sdwvit]

@Conduitry terrible response, github issues are indexable and Discord is not

[antony]

@sdwvit it is the preference of the maintainers to handle support questions on discord, and bugs / feature requests on github issues. This is stated very clearly in the github issue template, and if people ignore it, their issues will be closed with this exact response.

[Conduitry]

github issues are indexable and for SO you need an account

That's a good point, since StackOverflow questions are not indexable, and for GitHub you don't need an account.

[ryanfiller]

So, uh... where can I look for the follow up answer to this question? Is there a StackOverflow link? Am I supposed to scroll through Discord and hope I find it?

[sdwvit]

@ryanfiller asking real questions over here

[sdwvit]

@Conduitry i dunno whatsup with my initial response, but you could have tried to be open minded and to think how is it inconvenient to use SO or Discord for someone who very rarely uses those tools, and only uses github. I do think we should help each other, have argumented discussion, instead of being toxic.

this is a perfect example why svelte can't get community mass

[ryanfiller]

I apologize if my response/question comes off as rude. I'm doing my best to find the answer to this question, but I keep ending up back here and getting more and more frustrated that I can't google the answer. I genuinely would appreciate a SO link if there is one.

As for Discord... I don't love having to go there to ask questions. I've had mixed results getting questions answered, it really just seems to depend who is online when you happen to ask. I've had great and indepth conversations, but I've also had questions buried and never addressed. I 100% understand this is the choice of the Svelte maintainers, I'm just voicing my opinion and experience with it.

@sdwvit If I come up with an answer about the ENV vars, I'll let you know.

[benmccann]

I was able to put this in the https://github.com/sveltejs/hn.svelte.dev example and it worked just fine. I did it in onMount to prove that it runs on the browser.

    import { onMount } from 'svelte';
    onMount(() => {
        alert('node env: ' + process.env.NODE_ENV);
    });

I'm not quite sure what issue you're having, but if you still have questions, it really would be best to ask elsewhere. One of the reasons we prefer StackOverflow and Discord for questions is that those venues help create good questions and are easier to discuss when things aren't clear. It's also more likely that other users from the community will see the question and chime in to help. Also, keeping the questions separate from the bugs and feature requests allows us to better manage those tickets. We have a ton of open issues and PRs as it is and simply wouldn't be able to manage those queues with questions mixed in as well

[sdwvit]

which kinda implies that your question on discord / SO may not be answered at all

questions may indicate problem with documentation

[habibrosyad]

@ryanfiller I think I've encountered this issue sometimes ago in my project, but not so sure how to reproduce it. At that time I solved it with a quick hack by setting all necessary env vars (that I want to be exposed in the client side) in the server.js and reference it in preload. Thus, I could avoid referencing process.env in my client codes (and not bothered to put my env in the replace plugin). Something like this:

In server.js (assuming you're using https://github.com/sveltejs/sapper-template)

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV, BACKEND_URL } = process.env;
const dev = NODE_ENV === 'development';

polka() // You can also use Express
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware({
            session: req => ({
                env: { BACKEND_URL }
            })
        })
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

And in your route file:

<script context="module">
    export function preload(page, { env }) {
        return { env };
    }
</script>

<script>
    export let env;
</script>

<p>{JSON.stringify(env, undefined, 2)}</p>