<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Create-React on blog.iankulin.com</title><link>https://blog.iankulin.com/tags/create-react/</link><description>Recent content in Create-React on blog.iankulin.com</description><generator>Hugo</generator><language>en-AU</language><lastBuildDate>Tue, 31 Jan 2023 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.iankulin.com/tags/create-react/index.xml" rel="self" type="application/rss+xml"/><item><title>Expired Packages Part II</title><link>https://blog.iankulin.com/expired-packages-part-ii/</link><pubDate>Tue, 31 Jan 2023 00:00:00 +0000</pubDate><guid>https://blog.iankulin.com/expired-packages-part-ii/</guid><description>&lt;p&gt;Following on from the previous post&amp;hellip;&lt;/p&gt;
&lt;p&gt;I went the nuclear route - deleted the node_modules folder, package-lock.json and installed the packages from packages.json. I still had some errors, but the react app at least ran correctly. Also, the messages are a bit more intelligible, and all of them cascade from this one.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#d8dee9;background-color:#2e3440;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;# npm audit report
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;nth-check &amp;lt;2.0.1
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;Severity: high
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;fix available via `npm audit fix --force`
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;Will install react-scripts@2.1.3, which is a breaking change
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;node_modules/svgo/node_modules/nth-check
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;From my, admittedly ignorant, viewpoint, there&amp;rsquo;s a couple of weird things going on here.&lt;/p&gt;
&lt;p&gt;The first is how the hell is installing &lt;a href="mailto:react-scripts@2.1.3"&gt;react-scripts@2.1.3&lt;/a&gt; a good idea, when the &lt;a href="https://www.npmjs.com/package/react-scripts"&gt;current version is 5.0.1&lt;/a&gt;. That does not seem like a good solution.&lt;/p&gt;
&lt;p&gt;The second is that is that the currently installed version of nth-check seems like it is 2.1.1 which is the current version, and certainly &amp;gt;2.0.1 which is the complaint. My basis for this claim is this encouraging part of package-lock.json:&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screen-shot-2023-01-23-at-1.39.10-pm.jpg" alt=""&gt;&lt;/p&gt;
&lt;p&gt;But if I check the installed version using &lt;code&gt;npm list nth-check&lt;/code&gt;, I get this bad news:&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screen-shot-2023-01-23-at-1.58.13-pm.png" alt=""&gt;&lt;/p&gt;
&lt;p&gt;So one version of css-select is using an old version of nth-check, likely this is the source of my troubles.&lt;/p&gt;
&lt;p&gt;As far as I can make out, the package-lock.json file&amp;rsquo;s purpose is to lock in particular versions of packages. If it&amp;rsquo;s committed with the rest of your code, it guarantees that when you rebuild the app, it will be the same as the one committed, without the need commit all the node modules you are depending on. Generally I don&amp;rsquo;t think you are meant to directly edit it, but it suddenly seems like a good idea.&lt;/p&gt;
&lt;p&gt;There&amp;rsquo;s about five dependencies on this package in package-lock.json, and I notice all of them except this one, start with the ^caret.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#d8dee9;background-color:#2e3440;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&amp;#34;nth-check&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;version&amp;#34;: &amp;#34;1.0.2&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;resolved&amp;#34;: &amp;#34;https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;integrity&amp;#34;: &amp;#34;sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;requires&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;boolbase&amp;#34;: &amp;#34;~1.0.0&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;In general, I think I should be doing this in packages.json, but the nth-check is not in there.&lt;/p&gt;
&lt;p&gt;After fruitlessly googling around and asking in a couple of discords, I check with ChatGPT to see what she thought.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://blog.iankulin.com/images/screen-shot-2023-01-24-at-10.14.51-am.png"&gt;&lt;img src="https://blog.iankulin.com/images/screen-shot-2023-01-24-at-10.14.51-am.png" width="828" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Well, I&amp;rsquo;d done all that, and a couple of humans had already told me not to jigger with &lt;code&gt;package-lock.json&lt;/code&gt;, so that was my next stop - I edited it to add the caret and tried &lt;code&gt;npm install&lt;/code&gt; - it just changes it back, which make sense.&lt;/p&gt;
&lt;p&gt;There&amp;rsquo;s another install script &lt;code&gt;npm ci&lt;/code&gt; which is supposed to use the &lt;code&gt;package-lock.json&lt;/code&gt; rather than doing it&amp;rsquo;s own check, that didn&amp;rsquo;t help either.&lt;/p&gt;
&lt;p&gt;I went back to googling, focusing on the react-scripts (which is basically responsible for building the template React app) and found &lt;a href="https://github.com/facebook/create-react-app/issues/11174"&gt;this issue&lt;/a&gt; on github.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://github.com/facebook/create-react-app/issues/11174"&gt;&lt;img src="https://blog.iankulin.com/images/screen-shot-2023-01-24-at-11.19.20-am.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Basically, it&amp;rsquo;s claimed to be a problem in how &lt;code&gt;npm audit&lt;/code&gt; works, and can&amp;rsquo;t be a real vulnerability since it&amp;rsquo;s just a tool being used during dev. That still doesn&amp;rsquo;t answer why they don&amp;rsquo;t just update their code to use the newer version on &lt;code&gt;nth-check&lt;/code&gt;, but in any case, it can be safely ignored.&lt;/p&gt;
&lt;p&gt;For people using CI tools that depend on an error free build, the react-scripts can be moved to a different section of the &lt;code&gt;packages.json&lt;/code&gt; file and an argument passed to npm audit to ignore those dependencies.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screen-shot-2023-01-24-at-11.15.54-am.jpg" alt=""&gt;&lt;/p&gt;
&lt;p&gt;So, what have I learned from this? I should have done more looking for answers for the exact error, instead of logically coming up with solutions and then searching for and pursuing them. But also, I have a clear idea of what &lt;code&gt;packages.json&lt;/code&gt; and &lt;code&gt;package-lock.json&lt;/code&gt; do now!&lt;/p&gt;</description></item></channel></rss>