fix: vite was not compiling my modules properly

This was super annoying to fix.

client/package.json

@@ -39,19 +39,20 @@
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.4.1",
     "@mdx-js/react": "^1.6.22",
-    "@react-three/drei": "^7.9.0",
+    "@react-three/drei": "^7.12.5",
     "@react-three/fiber": "^7.0.7",
     "@types/react": "^17.0.21",
     "@types/react-router-dom": "^5.1.9",
-    "@types/three": "^0.131.1",
+    "@types/three": "^0.132.1",
     "esbuild": "^0.12.28",
     "polished": "^4.1.3",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.1",
-    "three": "^0.132.2",
-    "vite-plugin-ssr": "^0.3.1"
+    "three": "^0.133.0",
+    "vite-plugin-ssr": "^0.3.1",
+    "vite-tsconfig-paths": "^3.3.14"
   }
 }

client/src/App.tsx

@@ -1,9 +1,9 @@
+import Builder from 'components/Builder';
 import React from 'react';
 import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
-import Builder from 'components/Builder';
 
 // TODO: Add container with better margins
-const App = () => (
+export default () => (
   <BrowserRouter>
     <div>
       <ul>
@@ -20,5 +20,3 @@ const App = () => (
     </div>
   </BrowserRouter>
 );
-
-export default App;

client/src/components/Builder/index.tsx

@@ -1,7 +1,7 @@
-import { Canvas } from '@react-three/fiber';
 import React from 'react';
 import { Wrapper } from './styles';
 import Workspace from 'components/Builder/Workspace';
+import { Canvas } from '@react-three/fiber';
 
 export default () => {
   return (

client/src/globalStyle.ts

@@ -1,14 +1,12 @@
-import { createGlobalStyle } from 'styled-components';
 import * as tokens from 'style-dictionary-dist/variables';
+import { createGlobalStyle } from 'styled-components';
 
-const GlobalStyle = createGlobalStyle`
+export default createGlobalStyle`
   * {
     font-family: ${tokens.TypographyFamilyBase};
     border-radius: 0;
     border: 0;
     padding: 0;
     margin: 0;
   }
-`;
-
-export default GlobalStyle;
+`;

client/src/index.tsx

@@ -6,7 +6,7 @@ import GlobalStyle from 'globalStyle';
 ReactDOM.render(
   <React.StrictMode>
     <GlobalStyle />
-      <App />
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 );

client/src/stories/Button.stories.tsx

@@ -1,7 +1,7 @@
-import { Story, Meta } from '@storybook/react';
-import React from 'react';
+import { Meta, Story } from '@storybook/react';
 import Button from 'components/Elements/Button';
 import { ButtonProps } from 'components/Elements/Button/interface';
+import React from 'react';
 // Button.stories.ts | Button.stories.tsx
 
 export default {
@@ -17,4 +17,4 @@ export const Primary = Template.bind({});
 Primary.args = {
   primary: true,
   label: 'Button',
-};
+};

client/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "outDir": "./dist/",
+    "rootDir": "./src",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,

client/vite.config.ts

@@ -1,7 +1,8 @@
 import reactRefresh from '@vitejs/plugin-react-refresh';
 import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh()],
+  plugins: [reactRefresh(), tsconfigPaths()],
 });