Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Non-dead JavaScript is removed during build

See original GitHub issue

Describe the bug

react-scripts build seems to be removing inline JavaScript code from index.html that should not be removed. It happens to code paths that are conditional and the condition contains a build-time ‘%VARIABLE%’.

Workaround: move the build-time variable outside of the condition.

Did you try recovering your dependencies?

No, it’s a newly created project.

Which terms did you search for in User Guide?

NODE_ENV, index.html, variables

Environment

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
  Binaries:
    Node: 8.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.1-salomvary1 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 68.0.1
    Safari: 12.1.1
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-scripts: 3.0.1 => 3.0.1 
  npmGlobalPackages:
    create-react-app: 3.0.1

Steps to reproduce

Create a new app with create-react-app.
Edit public/index.html and add a the snipped below after <body>.
Run npm run build.
Open build/index.html

    <script>
      console.log('%NODE_ENV%');
      var nodeEnv = '%NODE_ENV%';
      if ('%NODE_ENV%' === 'production') {
        console.log('This is production!');
      }
      if (nodeEnv === 'production') {
        console.log('This is REALLY production!');
      }
    </script>

Expected behavior

build/index.html should contain the minified version of the entire snippet with %NODE_ENV% replaced with production.

Actual behavior

This is what build/index.html contains instead (note that the first if block is entirely missing):

<script type="text/javascript">
console.log("production");var nodeEnv="production";"production"===nodeEnv&&console.log("This is REALLY production!")
</script>

Reproducible demo

https://github.com/salomvary/create-react-app-bug

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

heyimalexcommented, Aug 5, 2019

The PR I linked to handles it. The issue is in the order the plugins run: minification is happening before interpolation, so '%NODE_ENV%' === 'production' is removed before %NODE_ENV% is replaced with production.

0reactions

miraagecommented, Jul 30, 2019

@salomvary I have completely missed the point you’re raising. This is very interesting… Webpack DefinePlugin replaces occurence with a quoted value (e.g. if you write process.env.NODE_ENV === 'production', you get "production" === 'production'). One may expect InterpolatePlugin behaving in the same matter, but apparently not. Both code and docs (docs are not mentioning that InterpolatePlugin behaves differently compare to DefinePlugin) need to be updated.

Top Results From Across the Web

Ask Question

I got this error after upgrade react-leaflet to version 3.2.0 to fix an error while removing markers with permanent tooltips from the map....

How to detect dead code in a frontend project

Bonus: Detect unused dependencies with depcheck. Using ESLint to detect and remove dead code. ESLint is perhaps the most widely used JavaScript ......

Supported Browsers and Features

This project supports a superset of the latest JavaScript standard. ... of browsers based on global usage ( > 0.2% ) for production...

Moment.js Throws in the Towel: "It is not dead, but it is ...

If so, it's the automatic removal of dead code when bundling JavaScript files into a single file.

Building Packages

Babel is a popular JavaScript compiler that allows you to transform future code into a format that works in current environments, such as...