Adding in fixes for Webpack build

package.json

@@ -17,6 +17,7 @@
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "express": "^4.17.3",
     "html-critical-webpack-plugin": "^2.1.0",
@@ -24,6 +25,8 @@
     "html-webpack-plugin": "^5.5.0",
     "image-minimizer-webpack-plugin": "^3.2.3",
     "mini-css-extract-plugin": "^2.6.0",
+    "postcss-loader": "^6.2.1",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",

src/components/App.jsx

@@ -27,12 +27,17 @@ const Box = (props) => {
 
 const App = () => {
   return (
+    <>
+      <nav>
+        nav
+      </nav>
       <Canvas>
         <ambientLight />
         <pointLight position={[10, 10, 10]} />
         <Box position={[-1.2, 0, 0]} />
         <Box position={[1.2, 0, 0]} />
       </Canvas>
+    </>
   );
 };
 

webpack.prod.js

@@ -10,7 +10,7 @@ const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 module.exports = merge(commonConfiguration, {
   mode: 'production',
   entry: {
-    popshop: path.resolve(__dirname, './src/scripts/app.js'),
+    portfolio: path.resolve(__dirname, './src/scripts/app.js'),
   },
   devtool: 'source-map',
   output: {