My package.json file:
"name": "it-incubator-todolist-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.11",
"@mui/material": "^5.15.11",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.0",
"@types/node": "^18.11.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@types/uuid": "^8.3.4",
"cross-env": "7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.2",
"react-scripts": "5.0.1",
"typescript": "~4.8.4",
"uuid": "^9.0.0",
"sass": "^1.69.7",
"sass-loader": "12.3.0",
"styled-components": "5.3.6"
},
"scripts": {
"start": "cross-env BROWSER=none react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/node": "16.7.13",
"@types/react": "17.0.20",
"@types/react-dom": "17.0.9",
"@types/react-redux": "7.1.22",
"@types/react-router-dom": "5.3.3",
"@types/react-test-renderer": "17.0.1",
"@types/redux-form": "8.3.3",
"@types/uuid": "8.3.4",
"@types/styled-components": "5.3.6",
"babel-plugin-styled-components": "2.0.7"
}
Hi. Normally in previous projects, I've installed the 'styled-components' dependency like so:
import styled from "styled-components";
Then in the .tsx component file I wrote:
const CustomInputStyled = styled
The tags should appear in suggestions, but they don't. Otherwise, if I remove:
import styled from "styled-components";
The tags reappear:
Could someone please explain why this happens? These source files were received from my teacher, so this project was not created with the command:
yarn create react-app my-app --template typescript

