try different pathing

jsconfig.json

@@ -1,6 +1 @@
-{
-  "compilerOptions": {
-    "baseUrl": "src"
-  },
-  "include": ["src"]
-}
+{ }

src/App.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
-import Frame from "components/Frame";
-import Header from "components/Header";
-import { VIEW_NAME_PASSAGE } from 'constants'
-import state from "state";
-import Passage from "views/Passage";
-import WordsRunner from "views/WordsRunner";
+import Frame from "./components/Frame";
+import Header from "./components/Header";
+import { VIEW_NAME_PASSAGE } from './constants'
+import state from "./state";
+import Passage from "./views/Passage";
+import WordsRunner from "./views/WordsRunner";
 
 function App() {
   const viewName = useRecoilValue(state.viewName);

src/components/Controls/PlayPauseButton.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useRecoilState } from "recoil";
-import Button from 'components/Button'
-import state from "state";
+import state from "../../state";
+import Button from '../Button'
 
 const PlayPauseButton = () => {
   const [isPlaying, setIsPlaying] = useRecoilState(state.isPlaying);

src/components/Controls/ResetButton.js

@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import { useSetRecoilState } from "recoil";
-import Button from 'components/Button'
-import state from "state";
-import { VIEW_NAME_PASSAGE } from "constants";
+import { VIEW_NAME_PASSAGE } from "../../constants";
+import state from "../../state";
+import Button from '../Button'
 
 const ResetButton = () => {
   const setIsPlaying = useSetRecoilState(state.isPlaying);

src/components/Controls/RestartButton.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useSetRecoilState } from "recoil";
-import Button from 'components/Button'
-import state from "state";
+import state from "../../state";
+import Button from '../Button'
 
 const RestartButton = () => {
   const setIsPlaying = useSetRecoilState(state.isPlaying);

src/components/Controls/WpmControl.js

@@ -1,7 +1,7 @@
 import React  from "react";
 import { useRecoilValue } from "recoil";
 import tw from 'twin.macro';
-import state from "state";
+import state from "../../state";
 import WpmSlider from "./WpmSlider";
 
 const Row = tw.div`flex gap-2 items-center w-full bg-gray-100`

src/components/Controls/WpmSlider.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import tw from 'twin.macro'
 import { useRecoilState } from "recoil";
-import state from "state";
+import state from "../../state";
 
 const SCALE = 50;
 const MIN = 2;

src/components/PassageText.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
-import TextArea from 'components/TextArea';
-import state from 'state'
+import state from '../state'
+import TextArea from './TextArea';
 
 const PassageText = () => {
     const [passage, setPassage] = useRecoilState(state.passage)

src/components/StartReadingButton.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useSetRecoilState } from 'recoil'
-import Button from 'components/Button'
-import state from 'state'
+import state from '../state'
+import Button from './Button'
 
 const StartReadingButton = () => {
   const setViewName = useSetRecoilState(state.viewName)

src/components/TimerEffect.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import state from "state";
+import state from "../state";
 
 const TimerEffect = () => {
   const timeoutRef = useRef();

src/components/Word.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
 import tw from 'twin.macro'
-import state from "state";
+import state from "../state";
 
 const Div = tw.div`text-6xl h-full bg-green-100 flex items-center justify-center`
 

src/index.js

@@ -1,10 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RecoilRoot } from "recoil";
-import App from "App";
-import GlobalStyles from "GlobalStyles";
-import TimerEffect from "components/TimerEffect";
-import reportWebVitals from "reportWebVitals";
+import App from "./App";
+import GlobalStyles from "./GlobalStyles";
+import TimerEffect from "./components/TimerEffect";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

src/state.js

@@ -1,5 +1,5 @@
 import { atom, selector } from "recoil";
-import { VIEW_NAME_PASSAGE, INITIAL_PASSAGE_TEXT } from 'constants'
+import { VIEW_NAME_PASSAGE, INITIAL_PASSAGE_TEXT } from './constants'
 
 const viewName = atom({
   key: "viewName",

src/views/Passage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import tw from 'twin.macro';
-import PassageText from 'components/PassageText'
-import StartReadingButton from 'components/StartReadingButton'
+import PassageText from '../components/PassageText'
+import StartReadingButton from '../components/StartReadingButton'
 import 'styled-components/macro';
 
 const Container = tw.div`flex flex-col flex-1 p-2 gap-2 bg-yellow-200`

src/views/WordsRunner.js

@@ -1,7 +1,7 @@
 import React from "react";
 import tw from 'twin.macro';
-import Controls from "components/Controls";
-import Word from "components/Word";
+import Controls from "../components/Controls";
+import Word from "../components/Word";
 
 const Stack = tw.div`flex flex-col gap-2 flex-1 bg-blue-100`