<p dir="auto">Hello<br>
I am new to React and I am following some tutorials to learn more but in the first few steps, I face a problem that I can't find any solution for it. Even in the stack overflow, only one person had the same problem that no one answers it. problem explained well in the following link:<br>
<a href="https://stackoverflow.com/questions/62488064/compiler-issue-with-npm-react-package-lock-json-autoprefixer-version-9-8-1/62506484#62506484" rel="nofollow">https://stackoverflow.com/questions/62488064/compiler-issue-with-npm-react-package-lock-json-autoprefixer-version-9-8-1/62506484#62506484</a><br>
After trying lots of different things I found a solution to this problem that I posted under this question. I am not very sure that what I did is 100% correct but it solved my problem and I wanted to say whenever I create a new React project I have to change the "Kleur" value in dependency to not face the problem.<br>
I thought maybe this is a problem in React because I also uninstall the React and cleaned my cache and download a new React and create a new project but still had same problem.<br>
This is the error that I received.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/54753959/85247083-48157c00-b412-11ea-9618-c93d73ef01b5.png"><img src="https://user-images.githubusercontent.com/54753959/85247083-48157c00-b412-11ea-9618-c93d73ef01b5.png" alt="React_error" style="max-width: 100%;"></a></p>
<p dir="auto">Getting following error when I attempt to run a newly created project using following command<br>
npx create-react-app my-app<br>
cd my-app</p>
<p dir="auto">When I pass this --&gt; npm start command, I get following error in browser.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Package exports for '..\node_modules\autoprefixer\node_modules\kleur' do not define a valid './colors' target"><pre lang="Failed" class="notranslate"><code class="notranslate">./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Package exports for '..\node_modules\autoprefixer\node_modules\kleur' do not define a valid './colors' target
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/65842419/85186486-49567580-b267-11ea-91c9-00eab2827be0.png"><img src="https://user-images.githubusercontent.com/65842419/85186486-49567580-b267-11ea-91c9-00eab2827be0.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I did google and tried running following commands but no luck.<br>
npm I autoprefixer<br>
npm install node-saas-<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/latest/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/latest">@latest</a>..</p>
<p dir="auto">I have following versions listed as dependencies<br>
"autoprefixer": "^9.8.1",<br>
"react": "^16.13.1",<br>
"react-dom": "^16.13.1",<br>
"react-scripts": "3.4.1"</p>
<p dir="auto">Note: I tried running old project and that works fine... having issue only when I create a new project from scratch and run.<br>
please advise.</p>