React : "Module not found " when importing component from a local project

Question

In a React ProjectA, I want to import and use a ./src/components/package/MyComponent from React projectB.

ProjectB is successfully compiled, without any errors. In ProjectB index.js file I have exported the component

import ReactDOM from "react-dom";
import App from './App';
import "./app.css";

export { default as MyComponent } from './components/package/MyComponent';

ReactDOM.render(<App />, document.getElementById("root"));

In PojectA package.json file, I have imported the projectB module

"dependencies": {
    "@somescope/projectB": "file:../projectB",
    "axios": "^0.19.2",
    "date-fns": "^2.10.0",
    "interweave": "^12.5.0",
    "lodash": "^4.17.15",
    "material-icons": "^0.3.1",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-grid-system": "^6.2.4",
    "react-intersection-observer": "^8.26.2",
    "react-scripts": "3.2.0"
  },

I have run "npm install", "npm install @somescope/projectB" and "npm install --save ../projectB", to install the projectB module into projectA. After running these commands I can see projectB is present under projectA/node_modules folder.

But when I try to import and use the MyComponent :

import {MyComponent} from "@somescope/projectB";

and run "npm start" command it is giving below error in console :

Module not found: Can't resolve '@somescope/projectB'

Can anyone please help, what am I doing wrong and how to resolve this error?

Answer 1

export { default as MyComponent } from './components/package/MyComponent';

That line seems like you made a default export. If that is the case then to import that component you would need to do this:

import MyComponent from "@somescope/projectB";

I removed the {} since it might be a default export.