build(deps)(example): update build script packages (#1069)

* build(deps): update react-scripts and react-app-rewired

* build(deps): remove customize-cra-react-refresh

* style: fix eslint warning in Details.js

* style: remove unuecessary "import React from 'react'"

examples/config-overrides.js

@@ -1,5 +1,4 @@
 const { addWebpackPlugin, addWebpackAlias, override } = require('customize-cra')
-const { addReactRefresh } = require('customize-cra-react-refresh')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const path = require('path')
 
@@ -8,6 +7,5 @@ module.exports = override(
     three$: path.resolve('./src/utils/three.js'),
     '../../../build/three.module.js': path.resolve('./src/utils/three.js'),
   }),
-  addReactRefresh()
   //addWebpackPlugin(new BundleAnalyzerPlugin())
 )

examples/package.json

@@ -9,7 +9,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-postprocessing": "^1.1.4",
-    "react-scripts": "3.4.3",
     "react-three-fiber": "^4.2.20",
     "three": "^0.120.1",
     "threejs-meshline": "^2.0.11",
@@ -49,8 +48,8 @@
     "@testing-library/react": "^10.4.3",
     "@testing-library/user-event": "^12.0.11",
     "customize-cra": "^1.0.0",
-    "customize-cra-react-refresh": "^1.1.0",
-    "react-app-rewired": "^2.1.6",
+    "react-app-rewired": "^2.2.1",
+    "react-scripts": "^5.0.1",
     "webpack-bundle-analyzer": "^3.8.0"
   }
 }

examples/src/App.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import create from 'zustand'
 import CodePreview from './components/CodePreview'
 import Backdrop from './components/Backdrop'

examples/src/components/Backdrop.js

@@ -1,4 +1,4 @@
-import React, { Suspense, useRef } from 'react'
+import { Suspense, useRef } from 'react'
 import { Canvas } from 'react-three-fiber'
 import Effects from './Effects'
 import Scene from './Scene'

examples/src/components/CodePreview.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import CopyButton from './CopyButton'
 import 'prismjs'

examples/src/components/CopyButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { copyToClipboard } from '../utils/copy-to-clipboard'
 
 /* 

examples/src/components/Details.js

@@ -1,6 +1,4 @@
-import React from 'react'
-
-export default function () {
+export default function Details() {
   return (
     <>
       <a href="https://github.com/pmndrs/zustand" className="top-right" children="Github" />

examples/src/components/Effects.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import { forwardRef } from 'react'
 import { useThree } from 'react-three-fiber'
 import { EffectComposer, DepthOfField, Vignette } from 'react-postprocessing'
 
-const Effects = React.forwardRef((props, ref) => {
+const Effects = forwardRef((props, ref) => {
   const {
     viewport: { width, height },
   } = useThree()

examples/src/components/Fireflies.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import React, { useRef, useMemo } from 'react'
+import { useRef, useMemo } from 'react'
 import { extend, useFrame } from 'react-three-fiber'
 import * as meshline from 'threejs-meshline'
 

examples/src/components/Scene.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Plane, useAspect, useTextureLoader } from 'drei'
 import { useFrame } from 'react-three-fiber'
 import Fireflies from './Fireflies'

examples/src/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles.css'
 import App from './App'