Reputation: 12081
I am getting following error in my react application. This issue started when I renamed some components and deleted some. However I look closely and imports and component names are correct. I did a fresh checkout, renamed one component and got the same issue.
ERROR in ./src/components/courses/CourseList.js 7:0-40
Module not found: Error: Package path . is not exported from package ....../view/node_modules/@types/react (see exports field in ....../view/node_modules/@types/react/package.json)
ERROR in ./src/components/topics/TopicListDetail.js 7:0-51
Module not found: Error: Package path . is not exported from package ...../view/node_modules/@types/react (see exports field in ...../view/node_modules/@types/react/package.json)
both components are only imported in one place
import TopicList from "../../components/topics/TopicList";
import CourseList from "../../components/courses/CourseList";
Both follow the same conventions
function TopicList() {
let topicList = [];
for(let i = 0; i < topicList.length; i++) {
topicList.push(
<NavLink to={"/topic/" + i} className="" key={"popular-topic-" + i}>
<div className="">
<img src={"http://placeimg.com/100/100/people?" + i}
className="rounded-full hover:bg-sky-700" alt={"topic" + i} />
</div>
</NavLink>
);
}
return (
<div className="">
pretty tailwind css
</div>
)
}
export default TopicList;
I deleted my node_modules
and package-lock.json
and ran npm i
. I am not seeing any errors in the js. I am not sure where to look at this point.
Here are where they are imported
import TopicList from "../../components/topics/TopicList";
import CourseList from "../../components/courses/CourseList";
function Home() {
return (
<Fragment>
<div className="box-border hover:box-content max-width: 640px; ">
<TopicList/>
<CourseList/>
</div>
</Fragment>
)
}
export default Home;
{
"name": "view",
"version": "0.1.0",
"private": true,
"dependencies": {
"@popperjs/core": "^2.11.5",
"@react-buddy/ide-toolbox": "^2.1.2",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"@types/react": "^18.0.10",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-minimal-side-navigation": "^1.9.2",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",
"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": {
"@tailwindcss/typography": "^0.5.2",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24"
}
}
advice?
Upvotes: 2
Views: 8859
Reputation: 12081
The issue for me ended up being image imports in the js file.
I had these mock valus:
import Course1 from "../../ui/course-1.png";
const [popularCourse] = useState([
{
ID: 1,
title: "Learning How to Create Beautiful Scenes in Illustrator in 60 minutes",
tutor: {
ID: 1,
name: "Lana Marandina",
username: "lanamara",
dp: "http://placeimg.com/100/100/people?tutor-" + 1,
},
duration: "82 min",
poster: Course1
},
Then add them to a list
var courseList = [];
for(let i = 0; i < popularCourse.length; i++){
courseList.push(
<NavLink to={"/course/" + popularCourse[i].ID} className="" key={"popular-course-" + i}>
<div className="rounded-lg p-2" style={{
background: "#e2e2e2 url(" + popularCourse[i].poster +") no-repeat center"
}}>
<div className="h-56">
<div className="">
<img src={popularCourse[i].tutor.dp} className="rounded-full" alt="popular-course"/>
</div>
</div>
The array path for poster was wrong, but the IDE gave me a very unhelpful error.
Upvotes: 0