I am facing this issue after updating react-script V4 to "react-scripts": "^5.0.1" I also tried minify SVG files. it is on https://www.svgminify.com/ but that does not solve my issue of getting the same error after this. If I can ignore the check assets folder by react-script is there any way I can do this let me know so by that way I think the assets folder gets ignored then I will not throw an error is there any other solution also can fix this issue
This is my loader.svg file
<svg width="145" height="145" viewBox="0 0 145 145" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css"><![CDATA[
.dot {
animation: rotateme 1.5s linear infinite;
transform-origin: 50% 50%;
animation-direction: reverse;
}
.dot2 {
animation: rotateme 1.5s linear infinite;
transform-origin: 50% 50%;
}
.gear {
transform-origin: 50% 50%;
animation: rotateme 2s linear infinite;
}
@keyframes rotateme {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotateme {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotateme {
100% { -webkit-transform: rotate(360deg); }
}
]]></style>
</defs>
<path class="gear" d="M94.9109 78.0851C94.6133 77.8863 94.3019 77.7089 93.9791 77.5546C92.6065 76.9095 92.112 75.8381 92.4166 74.3759C92.6631 73.3721 92.6887 72.3266 92.4919 71.3118C91.9758 69.1902 92.7535 67.9467 94.6421 67.04C96.201 66.2946 96.4339 65.0941 95.5702 63.589C94.5847 61.8903 93.5598 60.2167 92.5456 58.5359C91.087 56.1133 90.3022 55.8768 87.7757 57.2529C86.5286 57.9338 85.4284 57.9052 84.2959 57.0559C83.2749 56.2532 82.1378 55.6104 80.9236 55.1494C79.1819 54.5366 78.5047 53.422 78.6122 51.5836C78.7197 49.7451 77.7485 48.9209 75.8886 48.9102C73.8351 48.9102 71.778 48.9102 69.7246 48.9102C66.9472 48.9102 66.3309 49.4907 66.3165 52.2644C66.3535 52.8235 66.2092 53.3796 65.9052 53.8502C65.6011 54.3208 65.1535 54.6809 64.6286 54.877C63.532 55.3715 62.3673 55.8267 61.4427 56.5614C59.7368 57.9196 58.178 58.0379 56.3324 56.823C55.0423 55.9737 53.7771 56.3499 52.9708 57.6257C51.6806 59.6576 50.4372 61.7255 49.2331 63.8112C48.5163 65.0404 48.8531 66.137 50.0501 66.9182C50.2759 67.0652 50.5124 67.1906 50.7453 67.3232C52.5371 68.3194 52.7451 68.8068 52.505 70.9069C52.3974 71.835 52.2541 72.8242 52.4656 73.7058C52.978 75.8273 52.2003 77.0744 50.2973 77.9775C48.742 78.6942 48.5055 79.9271 49.362 81.4251C50.3081 83.0449 51.2937 84.6504 52.2649 86.2415C53.9026 88.958 54.5226 89.1658 57.2821 87.7072C58.4432 87.0944 59.4789 87.1267 60.5289 87.8936C61.5142 88.6665 62.6066 89.2919 63.7721 89.75C65.6356 90.4022 66.4886 91.5419 66.3309 93.5774C66.2055 95.2116 67.2232 96.086 68.9147 96.111C70.1224 96.129 71.3266 96.111 72.5343 96.111H75.2149C77.9815 96.111 78.605 95.5233 78.6229 92.7531C78.5837 92.194 78.7275 91.6374 79.0327 91.1674C79.3379 90.6973 79.7879 90.3394 80.3145 90.1477C81.4111 89.6639 82.5723 89.1946 83.4933 88.4563C85.2027 87.0909 86.7614 86.9942 88.607 88.2019C89.8936 89.0441 91.1588 88.6713 91.9687 87.3919C93.2588 85.3599 94.5023 83.2922 95.7064 81.2065C96.4375 79.9594 96.1078 78.8699 94.9109 78.0851ZM72.4232 82.1525C69.8719 82.1298 67.4328 81.1005 65.6367 79.2883C63.8407 77.4762 62.833 75.0279 62.8331 72.4765C62.8473 69.9252 63.8686 67.4826 65.6747 65.6806C67.4808 63.8785 69.9255 62.8629 72.4769 62.8544C75.0314 62.8543 77.4822 63.8644 79.2949 65.6643C81.1075 67.4642 82.1349 69.9077 82.1529 72.4621C82.1548 73.7385 81.9041 75.0028 81.4153 76.182C80.9265 77.3611 80.2094 78.4319 79.305 79.3326C78.4006 80.2333 77.3269 80.9461 76.1458 81.4301C74.9647 81.9141 73.6996 82.1596 72.4232 82.1525Z" fill="#F3F5FF"/>
<path d="M124.211 30.6914C131.325 39.6507 135.994 49.7388 137.958 61.0561C138.776 65.5312 139.114 70.0808 138.965 74.6276C138.388 88.7044 133.948 101.43 125.444 112.694C119.298 120.866 111.319 127.481 102.15 132.006C95.2806 135.437 87.8639 137.638 80.2355 138.511C68.9856 139.859 57.5777 138.302 47.1007 133.988C46.0506 133.562 45.9216 133.164 46.3839 132.171C47.588 129.623 47.5235 129.662 50.154 130.605C55.6212 132.653 61.3398 133.954 67.155 134.472C82.2902 135.707 96.0612 131.968 108.468 123.255C118.879 115.955 126.24 106.218 130.748 94.3271C133.798 86.3488 135.129 77.8163 134.654 69.2879C134.141 58.7253 130.896 48.4765 125.236 39.5432C123.903 37.436 122.613 35.2894 120.799 33.5333C121.986 32.6482 122.903 31.4368 124.211 30.6914Z" fill="#84AFEF"/>
<path d="M20.7211 114.073C18.6999 111.922 17.1374 109.414 15.6071 106.905C10.7806 99.051 7.69716 90.2517 6.56548 81.1027C4.48693 64.417 8.13503 48.9927 17.5673 35.0737C25.6772 23.1077 36.6541 14.711 50.2901 9.84795C55.839 7.88368 61.6229 6.66066 67.4919 6.21053C78.1498 5.35403 88.349 7.13501 98.2221 11.1129C98.9388 11.3996 99.007 11.7401 98.749 12.4103C97.595 15.3955 97.5986 15.4314 94.5919 14.2954C86.4064 11.1432 77.6363 9.79848 68.8825 10.3533C55.4759 11.2385 43.4561 15.8328 33.0096 24.3978C23.692 32.0454 17.1911 41.6353 13.3602 53.0279C10.8686 60.4034 9.83993 68.1941 10.3319 75.9635C11.0168 88.3853 15.4277 100.313 22.9896 110.192C23.3802 110.704 23.7063 111.356 24.484 111.428C23.2225 112.302 22.2155 113.532 20.7211 114.073Z" fill="#84AFEF"/>
<path d="M38.6931 46.2012C34.8549 50.8098 32.418 56.1279 30.9451 61.8905C28.3218 72.1507 29.3325 82.1242 34.0917 91.535C40.4205 104.049 50.6339 111.718 64.3774 114.6C70.0234 115.783 75.8595 115.721 81.4789 114.417C82.4322 114.198 82.7977 114.463 83.0235 115.449C83.7044 118.38 83.7616 118.388 80.8266 118.929C71.561 120.677 61.982 119.527 53.3934 115.635C43.0975 111.073 35.4032 103.684 30.2964 93.6637C27.6368 88.4007 26.0092 82.6774 25.5015 76.8024C24.6951 68.0475 26.2862 59.7654 30.0276 51.8705C31.3268 49.1245 32.915 46.5249 34.7654 44.1155C35.0377 43.7572 35.2635 43.3808 35.5108 43.0117C36.6508 43.9928 37.7146 45.059 38.6931 46.2012Z" fill="#84AFEF"/>
<path d="M106.472 98.8023C109.407 94.7204 111.822 90.377 113.324 85.5426C116.592 75.0065 116.065 64.6712 111.424 54.669C105.619 42.1512 95.8495 34.242 82.5325 30.8052C76.3323 29.2019 69.8373 29.1146 63.5963 30.5508C62.618 30.773 62.0194 30.6726 61.9584 29.5294C61.9152 29.2658 61.848 29.0067 61.7577 28.7553C61.2453 26.6051 61.2382 26.5549 63.3812 26.1786C77.9167 23.6235 91.0331 26.8237 102.487 36.1664C111.639 43.6313 117.18 53.3503 119.043 64.9865C121.193 78.4254 118.008 90.6422 109.726 101.49C109.638 101.59 109.542 101.682 109.439 101.766C108.26 100.989 107.25 99.9806 106.472 98.8023Z" fill="#84AFEF"/>
<path class="dot2" d="M124.211 30.6949C123.261 31.8668 122.301 33.0279 120.796 33.5332C116.18 35.0921 112.123 31.4117 112.177 27.4983C112.216 24.7352 113.553 22.7248 116.026 21.5923C118.427 20.4957 120.76 20.8433 122.749 22.5814C124.849 24.4198 125.544 26.7456 124.706 29.4585C124.577 29.8849 124.376 30.2864 124.211 30.6949Z" fill="#F3F5FF"/>
<path class="dot" d="M106.472 98.8031C107.632 99.6049 108.638 100.61 109.439 101.771C110.55 104.792 110.135 107.469 107.647 109.655C105.497 111.547 102.064 111.601 99.7309 109.794C98.5415 108.904 97.6988 107.628 97.3471 106.184C96.9954 104.74 97.1565 103.219 97.8029 101.882C99.1146 99.1831 102.275 97.6814 105.067 98.4304L106.472 98.8031Z" fill="#F3F5FF"/>
<path class="dot2" d="M20.7211 114.075C21.9324 113.136 22.8712 111.792 24.4731 111.422C27.3401 110.609 30.1319 111.612 31.7266 114.028C32.4762 115.148 32.8493 116.478 32.7919 117.825C32.7346 119.172 32.2497 120.465 31.4076 121.518C30.5749 122.608 29.4091 123.395 28.0874 123.762C26.7658 124.128 25.3609 124.052 24.0862 123.546C22.8087 123.053 21.7187 122.171 20.9706 121.024C20.2226 119.877 19.8543 118.524 19.9182 117.156C19.9756 116.056 20.5598 115.128 20.7211 114.075Z" fill="#F3F5FF"/>
<path class="dot" d="M38.6934 46.2019C37.3518 45.4618 36.2482 44.3557 35.5111 43.0124C35.0722 42.0434 34.8798 40.9807 34.951 39.9192C35.0222 38.8577 35.3548 37.8303 35.9192 36.9285C36.4836 36.0268 37.2622 35.2786 38.1858 34.7507C39.1094 34.2227 40.1492 33.9315 41.2127 33.9027C43.9864 33.8776 46.0257 35.1856 47.2012 37.6476C48.3408 40.0307 48.0074 42.3817 46.3088 44.4029C44.5169 46.5531 42.1804 47.2447 39.4532 46.4563C39.1987 46.3811 38.9478 46.2879 38.6934 46.2019Z" fill="#F3F5FF"/>
</svg>
Failed to compile.
Error: Expected node, got `
.dot {
animation: rotateme 1.5s linear infinite;
transform-origin: 50% 50%;
animation-direction: reverse;
}
.dot2 {
animation: rotateme 1.5s linear infinite;
transform-origin: 50% 50%;
}
.gear {
transform-origin: 50% 50%;
animation: rotateme 2s linear infinite;
}
@keyframes rotateme {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotateme {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotateme {
100% { -webkit-transform: rotate(360deg); }
}
`
ERROR in ./src/assets/images/loader.svg
Module build failed (from ./node_modules/react-scripts/node_modules/@svgr/webpack/lib/index.js):
Error: Expected node, got `
.dot {
animation: rotateme 1.5s linear infinite;
transform-origin: 50% 50%;
animation-direction: reverse;
}
.dot2 {
animation: rotateme 1.5s linear infinite;
transform-origin: 50% 50%;
}
.gear {
transform-origin: 50% 50%;
animation: rotateme 2s linear infinite;
}
@keyframes rotateme {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotateme {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotateme {
100% { -webkit-transform: rotate(360deg); }
}
`
at one (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:12:11)
at all (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
at element (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
at one (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
at all (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
at element (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
at one (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
at all (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
at element (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
at one (C:\work\Nimbus-Frontend\node_modules\react-scripts\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
webpack compiled with 1 error