Import Hell | Code Society | Page 1

sand lintel Sep 21, 2023, 3:13 AM

#

I am genuinely lost with the errors I have been getting in my project. I have created index.ts files to export the needed components but it has not seemed to help. Below is my project structure as well as the import lines that are not working.

src
├── App.js
├── OptionBar
│   ├── OptionBar.tsx
│   ├── index.ts
│   └── optionBarStyles.css
├── SortingVisualizer
│   ├── SortingVisualizer.tsx
│   ├── index.ts
│   └── sortingVisualizerStyles.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

import React from 'react'
import { SortingVisualizer } from './SortingVisualizer'; // fix

function App() {
  
  // Render the component's UI
  return (
    <SortingVisualizer />
  );
}

export default App;

burnt plinth Sep 21, 2023, 3:16 AM

#

can I see SortingVisualizer.tsx and the corresponding index.tsx file?

#

also, import SortingVisualizer from './SortingVisualizer/SortingVisualizer' should work there, no index file required

sand lintel Sep 21, 2023, 3:18 AM

#

sand lintel Sep 21, 2023, 3:18 AM

#

burnt plinth also, `import SortingVisualizer from './SortingVisualizer/SortingVisualizer'` sh...

i have tried that, but it was not working and i'm really not sure why.

burnt plinth Sep 21, 2023, 3:18 AM

#

does it work if you delete index.tsx?

sand lintel Sep 21, 2023, 3:18 AM

#

it does not

burnt plinth Sep 21, 2023, 3:19 AM

#

it might be a ts thing cause i notice your main App file is App.js not .ts

#

does it work if you explicitely add the .tsx to SortingVisualizer?

#

i dont think that would be it but worth trying

sand lintel Sep 21, 2023, 3:20 AM

#

it does not

#

i've now just removed the index.ts files and still not working

burnt plinth Sep 21, 2023, 3:20 AM

#

import SortingVisualizer from './SortingVisualizer/SortingVisualizer' so is this what you had then?

sand lintel Sep 21, 2023, 3:20 AM

#

src
├── App.js
├── OptionBar
│   ├── OptionBar.tsx
│   └── optionBarStyles.css
├── SortingVisualizer
│   ├── SortingVisualizer.tsx
│   └── sortingVisualizerStyles.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

burnt plinth Sep 21, 2023, 3:21 AM

#

is your import in App.js like the above?

sand lintel Sep 21, 2023, 3:21 AM

#

import React from 'react'
import SortingVisualizer from './SortingVisualizer/SortingVisualizer';

function App() {
  
  // Render the component's UI
  return (
    <SortingVisualizer />
  );
}

export default App;

is what i currently have

burnt plinth Sep 21, 2023, 3:21 AM

#

and what exactly is it saying?

sand lintel Sep 21, 2023, 3:22 AM

#

ERROR in ./src/App.js 5:0-70
Module not found: Error: Can't resolve './SortingVisualizer/SortingVisualizer' in '/Users/myname/Desktop/algo-visualizer/client/src'

#

should i just throw away the folders and keep them all within src for now? that's the only hope i'm seeing lol

burnt plinth Sep 21, 2023, 3:24 AM

#

you could try

#

that shouldnt affect it though

sand lintel Sep 21, 2023, 3:24 AM

#

okay, well i've gotten rid of the error.

burnt plinth Sep 21, 2023, 3:24 AM

#

but then again I cant quite see what is

#

what did you do?

sand lintel Sep 21, 2023, 3:24 AM

#

i now have this disgusting structure

src
├── App.js
├── OptionBar.tsx
├── SortingVisualizer.tsx
├── index.js
├── optionBarStyles.css
├── reportWebVitals.js
├── setupTests.js
└── sortingVisualizerStyles.css

burnt plinth Sep 21, 2023, 3:25 AM

#

interesting that it didnt like that old structure

sand lintel Sep 21, 2023, 3:25 AM

#

but i have to use .tsx at the end

#

and it is giving me this error

#

An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled.ts(5097)

burnt plinth Sep 21, 2023, 3:25 AM

#

did you use create-react-app on that?

sand lintel Sep 21, 2023, 3:25 AM

#

but yeah this structure is quite disgusting. not a big deal bc it isn't a large project but

sand lintel Sep 21, 2023, 3:25 AM

#

burnt plinth did you use create-react-app on that?

yes i did

burnt plinth Sep 21, 2023, 3:26 AM

#

did you use the typescript template?

#

cause i'm noticing your main app file is still .js, but in typescript template it should be App.tsx

#

im wondering if its some weird typescript setting thats missing for resolving imports

sand lintel Sep 21, 2023, 3:27 AM

#

yeah i think i'm going to manually change that... i'm not sure what dependencies i'd need to change in package.json

burnt plinth Sep 21, 2023, 3:28 AM

#

what i'd actually recommend trying is create it with the vite typescript template instead of create react app

#

if you go outside that folder and run i think the command is npm init vite@latest, then following the prompts select the react + typescript template

#

then copy over the code you've written

#

i personally recommend using vite just cause its faster than the CRA template and from the average dev standpoint works the same

sand lintel Sep 21, 2023, 3:29 AM

#

oof that'd be quite a hassle :/

#

gah this is frustrating

burnt plinth Sep 21, 2023, 3:29 AM

#

https://create-react-app.dev/docs/adding-typescript/

Adding TypeScript | Create React App

Note: this feature is available with [email protected] and higher.

#

you could try this too

sand lintel Sep 21, 2023, 3:30 AM

#

i am getting this...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

burnt plinth Sep 21, 2023, 3:30 AM

#

although it doesnt mention anything about a tsconfig

#

hmm

#

to fix that you can follow what its saying
npm i -D @babel/plugin-proposal-private-property-in-object

#

the -D will add as a dev dependency as its asking you to do

sand lintel Sep 21, 2023, 3:32 AM

#

well, i did
npm install --save-dev @babel/plugin-proposal-private-property-in-object
and that allowed me to change my import from .js to .tsx

#

but still shouldn't need that .tsx, it's so weird

burnt plinth Sep 21, 2023, 3:32 AM

#

its probably some tsconfig option

#

does your project have a tsconfig.json file in it?

sand lintel Sep 21, 2023, 3:33 AM

#

it does not

burnt plinth Sep 21, 2023, 3:33 AM

#

that could be why

#

do npm install --save typescript @types/node @types/react @types/react-dom @types/jest

#

and then let me try to find the default tsconfig file

sand lintel Sep 21, 2023, 3:34 AM

#

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/typescript
npm WARN   peer typescript@">= 2.7" from [email protected]
npm WARN   node_modules/fork-ts-checker-webpack-plugin
npm WARN     fork-ts-checker-webpack-plugin@"^6.5.0" from [email protected]
npm WARN     node_modules/react-dev-utils
npm WARN   3 more (react-scripts, tsutils, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peerOptional typescript@"^3.2.1 || ^4" from [email protected]
npm WARN node_modules/react-scripts
npm WARN   react-scripts@"^5.0.1" from the root project

changed 2 packages, and audited 1529 packages in 2s

245 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

burnt plinth Sep 21, 2023, 3:35 AM

#

so in your root folder (not src), create a file called tsconfig.json and paste the following in:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

sand lintel Sep 21, 2023, 3:36 AM

#

so within client?

burnt plinth Sep 21, 2023, 3:36 AM

#

whatever folder is the one created by create-react-app

sand lintel Sep 21, 2023, 3:36 AM

#

okay, done

burnt plinth Sep 21, 2023, 3:36 AM

#

did you also run that npm i command for installing typescript and all associated things?

sand lintel Sep 21, 2023, 3:37 AM

#

npm i created errors.

#

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   typescript@"^5.2.2" from the root project
npm ERR!   peer typescript@">= 2.7" from [email protected]
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from [email protected]
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from [email protected]
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"^5.0.1" from the root project
npm ERR!   1 more (tsutils)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"^5.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from [email protected]
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"^5.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:

burnt plinth Sep 21, 2023, 3:38 AM

#

have you added any additional packages aside from the default ones?

#

i just created a fresh one with create-react-app to get that tsconfig, in which case i could also send you the dependencies in package.json to fix that up

sand lintel Sep 21, 2023, 3:39 AM

#

yeah if you could send over the package.json that'd be great. here's mine:

{
  "name": "client",
  "version": "0.1.0",
  "proxy": "http://127.0.0.1:5000",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.5.5",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "axios": "^1.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "typescript": "^5.2.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

burnt plinth Sep 21, 2023, 3:39 AM

#

this is how it comes from the box

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.53",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },

sand lintel Sep 21, 2023, 3:39 AM

#

npm i worked now

#

removed 25 packages, changed 3 packages, and audited 1504 packages in 2s

245 packages are looking for funding
  run `npm fund` for details

burnt plinth Sep 21, 2023, 3:39 AM

#

cool

#

is it letting you import now?

sand lintel Sep 21, 2023, 3:41 AM

#

ah now i need to install axios one sec

sand lintel Sep 21, 2023, 3:41 AM

#

burnt plinth is it letting you import now?

not without the .tsx...

#

oh, well my app is still app.js

burnt plinth Sep 21, 2023, 3:42 AM

#

try changing to App.tsx

#

and then index.js to index.ts

sand lintel Sep 21, 2023, 3:43 AM

#

could you send over your index.ts file?

burnt plinth Sep 21, 2023, 3:43 AM

#

oh my bad its index.tsx

#

which is

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

#

with this setup I'm able to import using your original setup (minus the index.ts file)

sand lintel Sep 21, 2023, 3:45 AM

#

i think it's finally working

#

jeeeeez that was frustrating

#

thank you v much @burnt plinth

burnt plinth Sep 21, 2023, 3:45 AM

#

so for learning, reason was probably because you added typescript in without adding the config files and such

sand lintel Sep 21, 2023, 3:45 AM

#

yeah, for sure.

burnt plinth Sep 21, 2023, 3:45 AM

#

in the future, make sure to use the typescript template

sand lintel Sep 21, 2023, 3:46 AM

#

yes!

burnt plinth Sep 21, 2023, 3:46 AM

#

npx create-react-app --template typescript

sand lintel Sep 21, 2023, 3:46 AM

#

yeah i just npx create-react-app

burnt plinth Sep 21, 2023, 3:46 AM

#

or better yet, next time i'd recommend using vite npm init vite@latest

#

same developer experience but it runs faster

sand lintel Sep 21, 2023, 3:46 AM

#

now to recreate my components folder and export files... let's hope i don't mess it up lol

timber hare Sep 21, 2023, 3:52 AM

#

btw

#

whats your tsconfig.json look like?

#

https://www.typescriptlang.org/tsconfig#paths

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

#

check this out for future reference

#

can make imports super easy

sand lintel Sep 21, 2023, 3:53 AM

#

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": [
      "src"
    ]
  }

#

exactly like the template

timber hare Sep 21, 2023, 3:53 AM

#

should add paths :)

#

makes life easy

#

:D

sand lintel Sep 21, 2023, 3:53 AM

#

that does look really cool...

#

not sure why my work doesn't use that hmm

timber hare Sep 21, 2023, 3:54 AM

#

Its been convention to use it at a couple places ive been at

#

@ usually == the src/ directory

#

at least thats what Ive seen and now use

sand lintel Sep 21, 2023, 3:55 AM

#

oh, then maybe they do. we use index.ts for exports obviously and then just export { component } from './components'

timber hare Sep 21, 2023, 3:55 AM

#

so importing is like import x from @/components/Something

#

yeah potentially then, idk

sand lintel Sep 21, 2023, 3:55 AM

#

yes that's what we have

#

but we also have multiple subfolders within our root admin folder

rancid streamBOT Sep 21, 2023, 3:55 AM

#

Gotcha

You call a bad discord mod an admin-is-traitor.

sand lintel Sep 21, 2023, 3:55 AM

#

like marketing, finance, etc

#

with separate src's so i guess the paths do probably end at the src level

timber hare Sep 21, 2023, 3:55 AM

#

makes sense

#Import Hell