Home > Software design >  npm link not resolving
npm link not resolving

Time:08-31

I have two barebones react apps. I'm trying to import a component from one into the other, and my link command isn't enough to resolve the module I need.

cd ~/workspace/export-test
npm link

cd ~/workspace/import-test
npm link export-test
npm run build

ERROR in ./src/HelloWorld.js 2:0-39
Module not found: Error: Can't resolve 'export-test' in '/Users/username/workspace/import-test/src'

What am I doing wrong?

~/workspace/import-test/

// src/HelloWorld.js
import { ImportMe } from 'export-test'

// package.json
// The exact same as export-test, except for name

~/workspace/export-test/:

// src/index.js
...
import ImportMe from './ImportMe';
render(<ImportMe />, document.getElementById('root'));
...

// src/ImportMe.js
const ImportMe = () => {
    return <h1>I have been imported!</h1>;
};
export default ImportMe;

// package.json
{
"name": "export-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=production"
},
"author": "",
"license": "ISC",
"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
},
"devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0"
}

Misc.

npm list -g
/Users/username/.nvm/versions/node/v16.17.0/lib
├── [email protected] -> ./../../../../../workspace/export-test

CodePudding user response:

Just to make it clear.

When npm link is used main property in package.json have to point to a file you want to export.

In this case, it was index.js, but it should be src/index.js

  • Related