How can I render emoji in my React app (using Webpack)?

问题

I've tried using emojis in my React components in a few different ways (i.e. ✨, {'\u2728'}, and a few component libraries). Every way works with my dev build of the code and fails with my prod build of the same code.

The prod build outputs the Unicode value of the emoji despite the method I use in the code, so I think it has something to do with my Webpack config, but I cannot find any solution on the web.

Dev output

Prod output

回答1:

While making sure I had all the details to ask my question, I did some digging on something I hadn't looked up before and found my answer.

My searching led me to this GitHub issue (link) where someone was having this issue using create-react-app. Ultimately, the issue was an underlying issue with UglifyJS which required an ascii_only argument to be passed in that step.

I checked out the current version of create-react-app's Webpack config and added the relevant bits to my project and it fixed my solution. Here's the source I used (link).

The minimum config needed looks like:

    optimization: {
      minimize: isEnvProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              // Turned on because emoji and regex is not minified properly using default
              // https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            },
          },
        }),
      ],
    },

来源：https://stackoverflow.com/questions/63177398/how-can-i-render-emoji-in-my-react-app-using-webpack