3

I have a React library called pp-shared-components. It lives on a github repo, so to install it I do the following in my package.json file.

"dependencies": {
    "pp-shared-components": "git+ssh://git@github.com/{org}/pp-shared-components.git#master",
}

In the pp-shared-components repo, I have an index.js file that imports React components and then exports then like so.

import ContentHeader from './components/content-header/ContentHeader.js';
import Wizard from './components/wizard/Wizard.js';

export {
  ContentHeader,
  Wizard
}

I use rollup to build my library.

My package.json in the pp-shared-components is as follows.

{
  "name": "pp-shared-components",
  "version": "1.0.0",
  "description": "PP Shared Library for Components.",
  "main": "build/index.cjs.js",
  "module": "build/index.esm.js",
  "browser": "build/index.js",
  "style": "build/index.css",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c --watch",
    "lint": "eslint --ext .js,.jsx .",
    "prepare": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/{org}/pp-shared-components.git"
  },
  "publishConfig": {
    "access": "public"
  },
  "devDependencies": {
    ...
    "rollup": "^1.17.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-filesize": "^6.1.1",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-local-resolve": "^1.0.7",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-externals": "^2.0.1",
    "rollup-plugin-node-globals": "^1.4.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-scss": "^1.0.2"
  },
  "peerDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

I can then import the components in another project like so

import { ContentHeader, Wizard } from 'pp-shared-components';

This all works fine locally, however, when I run this through Jenkins, I get the following error in the console

[INFO] ERROR in ./screens/main/Main.js
[INFO] Module not found: Error: Can't resolve 'pp-shared-components' in '/var/lib/jenkins/data/workspace/pp/src/main/client/screens/main'
[INFO]  @ ./screens/main/Main.js 6:15-55
[INFO]  @ ./app/App.js
[INFO]  @ ./index.js

Looking at the pp-shared-components folder in the node_modules folder within Jenkins, all the folders and files are exactly the same as they are in my local version?

I did notice that while in VSCode, there is a little tooltip that exclaims

module "/Users/{users}/git/pp/node_modules/pp-shared-components/build/index.cjs"
Could not find a declaration file for module 'pp-shared-components'. 
'/Users/{users}/git/pp/node_modules/pp-shared-components/build/index.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/pp-shared-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'pp-shared-components';`ts(7016)

Now, I don't use typescript anywhere in my pp-shared-components project.

Will I need to add a .d.ts file somewhere in the project and while I need to use typescript throughout my whole project?

Sort of lost at the moment and need some direction of what do next and if it is a case of adding a .d.ts file, what is involved in doing so? Is it as simple as adding declare module 'pp-shared-components' and that's that?

Any help would be greatly appreciated.

mcclosa
  • 943
  • 7
  • 29
  • 59
  • 2
    Hi! did you finally resolve the issue? im facing something similar! Thanks – Tirias Mar 23 '20 at 11:37
  • I'm having the same issue but I do have types, as I extract them with `rollup-plugin-dts`. I can import the library in another project locally, but as soon as I publish it to NPM and install it from there, I get an error that says `Can't resolve 'foo'`... – Danziger Apr 21 '22 at 15:46

0 Answers0