Wednesday 29 December 2021

Configure imports relative to root directory in create-react-library library

I am trying to setup a react component library with create-react-library (which uses rollup under the hood) and port over our application's existing component library so that we can share it between applications. I am able to create the library, publish to a private git registry, and consume it in other applications. The issue is that I have had to change all of my imports to relative imports which is rather annoying as I am planning on porting over a large amount of components, hocs and utils.

The entry point of the package is the src dir. Say I have a component in src/components/Text.js and a hoc in src/hoc/auth.js. If I want to import withAuthentication from src/hoc/auth.js into my Text component, I have to import it like import { withAuthentication } from "../hoc/auth" but I'd like to be able to import with the same paths I have in my existing application so it's easy to port over components, like import { withAuthentication } from "hoc/auth"

I have tried a lot of config options, jsconfig.json the same as my create-react-app application, manually building my library with rollup rather then using create-react-library so I'd have more config options but to no avail.

Below are the relevant bits from my package.json as well as my jsconfig.json, any help would be greatly appreciated, I am sure I am not the only person who's had this issue.

Here's the package.json

{
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "files": [
    "dist"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^16.0.0",
    "react-html-parser": "^2.0.2",
    "lodash": "^4.17.19",
    "@material-ui/core": "^4.11.0",
    "react-redux": "^7.1.1",
    "redux": "^4.0.1",
    "redux-localstorage": "^0.4.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "react-router-dom": "^5.1.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "react-svg": "^12.0.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "microbundle-crl": "^0.13.10",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4"
  },
  "dependencies": {
    "node-sass": "^7.0.0"
  }
}

and here's the jsconfig:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}


from Configure imports relative to root directory in create-react-library library

No comments:

Post a Comment