title: Module not found: Error: Can't resolve 'fs' in '/home/bassam/throwaway/chakra-ts/node_modules/dotenv/lib' in freshly created chakra app
body: <p>Created app via <code>yarn create react-app chakra-ts --template @chakra-ui/typescript</code>.</p>
  <p>Added dotenv via <code>yarn add dotenv</code></p>
  <p>Added the following to <code>App.tsx</code> according to <a href="https://github.com/motdotla/dotenv#usage" rel="nofollow noreferrer">dotenv docs</a>:</p>
  <pre><code>import * as dotenv from 'dotenv';
  
  dotenv.config();
  </code></pre>
  <p>Now when I do <code>yarn build</code> it fails with the following:</p>
  <pre><code>Creating an optimized production build...
  Failed to compile.
  
  Module not found: Error: Can't resolve 'fs' in '/home/bassam/throwaway/chakra-ts/node_modules/dotenv/lib'
  
  
  error Command failed with exit code 1.
  </code></pre>
  <p>Here's my <code>package.json</code>:</p>
  <pre><code>{
    &quot;name&quot;: &quot;chakra-ts&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@chakra-ui/react&quot;: &quot;^2.2.4&quot;,
      &quot;@emotion/react&quot;: &quot;^11.0.0&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.0.0&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.0.1&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^14.1.0&quot;,
      &quot;@types/jest&quot;: &quot;^25.0.0&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^18.0.9&quot;,
      &quot;@types/react-dom&quot;: &quot;^18.0.4&quot;,
      &quot;framer-motion&quot;: &quot;^6.2.9&quot;,
      &quot;react&quot;: &quot;^18.1.0&quot;,
      &quot;react-dom&quot;: &quot;^18.1.0&quot;,
      &quot;react-icons&quot;: &quot;^3.0.0&quot;,
      &quot;react-scripts&quot;: &quot;5.0.1&quot;,
      &quot;typescript&quot;: &quot;^4.6.3&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.2&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  
  </code></pre>
  <p>Am I doing something wrong here?</p>
  <p><strong>Backstory</strong>: I was trying to upgrade another react app to react 18, but I kept getting this same error (the app builds error free in react 17). I wanted to reproduce the problem in a simpler app, and here it is.</p>