title: How to debug import of a javascript function in React?
body: <p>I have some functions in a javascript file (helpers.js) that are imported into a react file (caller.jsx).</p>
  <p>helpers.js:</p>
  <pre><code>async function one() {
    // ...
  }
  
  function two() {
    // ...
  }
  
  module.exports = { one, two }
  </code></pre>
  <p>caller.jsx:</p>
  <pre><code>const { one, two } = require(&quot;../utils/helpers&quot;)
  </code></pre>
  <p>When I run my local React server (<code>npm run start</code>), everything works fine.  I can use the app and it works.</p>
  <p>When I run a production build (<code>npm run build</code>) and serve up the javascript from that build, it doesn't work, and there's an error message in the console:</p>
  <pre><code>main.d780c23e.chunk.js:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;'
      at Module.&lt;anonymous&gt; (main.d780c23e.chunk.js:1)
      at Module.228 (main.d780c23e.chunk.js:1)
      at i ((index):3)
      at Module.375 (main.d780c23e.chunk.js:1)
      at i ((index):3)
      at t ((index):3)
      at Array.r [as push] ((index):3)
      at main.d780c23e.chunk.js:1
  </code></pre>
  <p>And the compiled code in the browser shows the problem at the exports of helpers.js, right at the equals sign (=):</p>
  <pre><code>            b.exports = {
                  one: function() { ... },
                  two: function() { ... }
                  }
              }
  </code></pre>
  <p>I have also tried importing the symbols in caller.jsx:</p>
  <pre><code>import { one, two } from &quot;../utils/helpers&quot;
  </code></pre>
  <p>In that case, the production build complains that the symbol is not exported.</p>
  <pre><code>./src/hooks/caller.jsx
  Attempted import error: 'two' is not exported from '../utils/helpers'.
  </code></pre>
  <p>And if I delete two, then it complains about one.</p>
  <p>It seems the CommonJS style of code (with module.exports) isn't working in the ESModule style of code (with import).</p>
  <p>However, I have some other files (call them caller2.jsx and helper2.js) where it is working for helper2.js to use <code>module.export</code> and caller2.jsx to use an import statement.</p>
  <p>I am flummoxed about how to tell what's going in.</p>
  <p>It IS exported, damnit!  Why does only the production compiler say it's not?</p>
  <p>Versions: node v16.10.0, npm 7.24.0, react 17.0.2, react-scripts 4.0.3.</p>
  <p><strong>EDIT</strong>: Some build info: we build using <code>npm</code>.  Here are the scripts in package.json:</p>
  <pre><code>&quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;
  }
  </code></pre>
  <p>As an example, here is the full output of <code>build</code>:</p>
  <pre><code>$ npm run build
  
  &gt; myapp@0.1.0 build
  &gt; react-scripts build
  
  Creating an optimized production build...
  Compiled successfully.
  
  File sizes after gzip:
  
    421.79 KB        build/static/js/2.9462f3d3.chunk.js
    23.57 KB         build/static/css/2.0a9ec390.chunk.css
    20.85 KB (+1 B)  build/static/js/main.2d21dfa5.chunk.js
    2.49 KB          build/static/css/main.8d569477.chunk.css
    1.73 KB          build/static/js/3.2618e91d.chunk.js
    1.17 KB          build/static/js/runtime-main.2616b467.js
  
  The project was built assuming it is hosted at /.
  You can control this with the homepage field in your package.json.
  </code></pre>
  <p><strong>EDIT 2</strong>: We are using hardhat, so we cannot use ESModule exports.  See for example <a href="https://github.com/nomiclabs/hardhat/issues/957" rel="nofollow noreferrer">this github issue</a>, or <a href="https://stackoverflow.com/questions/70342333/how-do-i-use-esmodule-imports-with-hardhat-that-uses-commonjs">this stackoverflow question</a>.</p>