Uncaught ReferenceError: production is not defined

[davidarny]

Hi! This is incredibly fast 🚀 🤘, but ...

... I'm trying to get it working with react. I'm using this example, and it compiles successfully. However, when adding out.js to html document (i.e. <script src="out.js"></script>) I'm having Uncaught ReferenceError: production is not defined error.

Here you can check a short demo I recorded on my local machine. Thanks!

UPD: Adding --sourcemap flag you can see the error occurs here

[evanw]

This is because you are not quoting your command-line arguments correctly for the shell you are using. From the readme:

If you're using esbuild to bundle React yourself instead of including it with a <script> tag in your HTML, you'll need to pass '--define:process.env.NODE_ENV="development"' or '--define:process.env.NODE_ENV="production"' to esbuild on the command line.

Note that the double quotes around "production" are important because the replacement should be a string, not an identifier. The outer single quotes are for escaping the double quotes in Bash but may not be necessary in other shells.

You need to use '--define:process.env.NODE_ENV="production"' not --define:process.env.NODE_ENV="production" because your shell eats the outer quotes.

Another alternative could be to use a JavaScript build script if you don't want to use command-line arguments.

[davidarny]

@evanw thanks! It works like a charm 🙌. Maybe it worths mentioning that cmd way won't work well on Windows shells ;)

BTW, do you plan to support using .svg in jsx?

[evanw]

BTW, do you plan to support using .svg in jsx?

What do you mean? Do you mean something like return <svg/>;? That should already work.

[davidarny]

@evanw the problem is I'm trying to use .svg=file loader, and I'm not sure how to use file name produced by loader. I'm trying to do this, but it doesn't work:

<svg {...props}>
      <use xlinkHref={svg} />
</svg>

I also tried to use text mode, but I don't know how to inline svg text into React.

The dataurl/file + <img src={svg} /> mode seems to work, but then I can't change svg stroke & fill (having a big codebase, so I can't just change the way styling works now).

Hoever, react-icons library works well

[davidarny]

I've made a workaround using text mode + dangerouslySetInnerHTML, but I don't think this is a best way

[evanw]

I've made a workaround using text mode + dangerouslySetInnerHTML, but I don't think this is a best way

This actually does sound like the best way to do it. I think it should be faster than running the svg file through the jsx transform since it uses the browser’s native parser.

In the future when the plugin API is released (issue #111), it will be possible to write an esbuild plugin to do what you’re proposing (interpret the svg file as a module that returns the contents as a jsx expression) if you still want to do that.

[ghost]

I just ran into this issue, and found this response. This is a little confusing, but I'm glad there's a workaround

[evanw]

Yeah sorry about this. The syntax of the define feature means this mistake is easy to make. I should add a warning for this case.

Note that if you're using esbuild via the CLI, the specific quote syntax described above won't work on Windows. The documentation has been changed to use backslash escapes instead, which I think should work on Windows too: https://esbuild.github.io/api/#define.

[ghost]

thanks - got the build working now! 10 boarding-school students will be happy you helped me get their websocket-server working ❤️

[donburks]

As this is the only post on the internet dealing with this specific error, I'm going to come back and add a comment here to say that I'm in the process of converting a CRA app to use esbuild and cannot get the production is not defined error to go away. I'm using a build script, as follows:

import esbuild from 'esbuild';
import svg from 'esbuild-plugin-svg';
import inlineImage from 'esbuild-plugin-inline-image';

esbuild
    .build({
        entryPoints: ['src/index.js'],
        define: {
          'process.env.NODE_ENV': 'production'
        },
        bundle: true,
        minify: true,
        sourcemap: true,
        outdir: 'esbuild',
        plugins: [svg(), inlineImage()],
        loader: { '.js': 'jsx' }
    })
    .catch((err) => {
      if (err) throw err
    });

And the exact same behaviour (deduced with sourcemap) as the OP is what I'm running into. Any suggestions given current version?

[hyrious]

@donburks change the define to

define: {
  'process.env.NODE_ENV': '"production"'
}

[donburks]

@donburks change the define to

define: {
  'process.env.NODE_ENV': '"production"'
}

This definitely resolved the issue (and illuminated three or four new ones that I get to track down), so thank you. I wouldn't have thought the same double-quote issue would have applied inside the build script, but I will know for the future.

[evanw]

This is already in the documentation linked above:

If you want to replace something with a string literal, keep in mind that the replacement value passed to esbuild must itself contain quotes. Omitting the quotes means the replacement value is an identifier instead:

❯ import * as esbuild from 'esbuild'

❯ (await esbuild.transform('id, str', {
    define: { id: 'text', str: '"text"' },
  })).code

'text, "text";\n'