<p dir="auto">Hi, today I created a new react.js project in <strong>typescript</strong> template using this command :<br>
<code class="notranslate">npx create-react-app my-project-name --template typescript</code>.<br>
Then project's react version is: 16.13.1 .</p>
<p dir="auto">After completing this process, I ran it using this command: <code class="notranslate">npm start</code>. It ran successfully and I saw the result.<br>
Then when I tried to get install a new package like <code class="notranslate">react-router-dom</code>, I saw some of packages are removing from my project's <code class="notranslate">node_modules</code>.</p>
<p dir="auto">Now when I'm trying to run the project, it will getting an error as below:<br>
<code class="notranslate">./src/assets/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/styles/index.scss) Error: Package exports for 'C:\projects\sokna-pwa\node_modules\autoprefixer\node_modules\kleur' do not define a valid './colors' target</code>.</p>
<p dir="auto">But when I removed css files from index.tsx and App.tsx, it compiled successfully. Then the problem is in the css files.</p>
<p dir="auto">After too many long searchs, I tries this command from this <strong><a href="https://github.com/symfony/webpack-encore/issues/717" data-hovercard-type="issue" data-hovercard-url="/symfony/webpack-encore/issues/717/hovercard">#issue</a></strong> :<br>
<code class="notranslate">yarn add sass-loader@^7.0.1 node-sass --dev</code></p>
<p dir="auto">This command will fixes my project for temp but when I getting try to add a new package to my project, the last error will appears.</p>
<p dir="auto">How can I fix this ???<br>
Thank for your help</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>