Mike3355
Mike3355

Reputation: 12081

Module not found: Error: Package path . is not exported from package react

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

Answers (1)

Mike3355
Mike3355

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

Related Questions