I have two repos:
- my-ui-lib: a UI library imported as a dependency in package.json
- my-app: a React app that imports components from my-ui-lib
I've bundled my UI library and am trying to update the package.json so that I can import the components like this:
import Button from "my-ui-lib/components/Button";
instead of
import Button from "my-ui-lib/build/components/Button";
In my my-ui-lib's package.json I have added this:
"exports": {
"./components/": "./build/components/",
"./constants/": "./build/constants/",
"./helpers/": "./build/helpers/",
"./hooks/": "./build/hooks/",
"./icons/": "./build/icons/"
},
I have also confirmed that the build folder is nested as expected when I open up node_modules inside of my-app:
▾ my-ui-lib/
▾ build/
▸ components/
▸ constants/
▸ helpers/
▸ hooks/
▸ icons/
However, I tried importing my button from just the root but it complains:
./src/App.js
Module not found: Can't resolve 'my-ui-lib/components/Button' in '/Users/edmund/Documents/src/my-app/src'
Only when I change it to import Button from "@twicapp/ui/build/components/Button"; does my page load properly.
I've tried updating the package.json file manually by:
- opening up
my-app/node_modules/my-ui-lib/package.json - changing up the exports field to remove slashes, periods, etc.
- refreshing my my-app server
But nothing seems to work. Am I missing something?
Here's my my-ui-lib package.json:
{
"name": "my-ui-lib",
"version": "0.12.41-beta.43",
"engines": {
"node": "14.x"
},
"exports": {
"./components/": "./build/components/",
"./constants/": "./build/constants/",
"./helpers/": "./build/helpers/",
"./hooks/": "./build/hooks/",
"./icons/": "./build/icons/"
},
"files": [
"build"
],
"dependencies": {
"@ant-design/icons": "4.3.0",
"@emotion/react": "11.4.1",
"@emotion/styled": "11.3.0",
"@fullcalendar/core": "4.4.2",
"@fullcalendar/daygrid": "4.4.2",
"@fullcalendar/react": "4.4.2",
"@material-ui/core": "4.12.3",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "4.0.0-alpha.60",
"@mui/lab": "5.0.0-alpha.45",
"@mui/material": "5.0.0-rc.0",
"@tippyjs/react": "4.2.5",
"antd": "3.26.20",
"clone": "2.1.2",
"cloudinary-core": "2.11.4",
"currency-symbol-map": "5.0.1",
"date-fns": "2.23.0",
"dompurify": "2.3.3",
"final-form": "4.20.2",
"history": "5.0.1",
"lodash": "4.17.21",
"notistack": "1.0.10",
"polished": "3.7.2",
"prop-types": "15.7.2",
"react-final-form": "6.5.3",
"react-helmet": "6.1.0",
"react-hook-form": "7.15.1",
"react-progressbar": "15.4.1",
"react-text-mask": "5.4.3",
"recharts": "2.0.0-beta.8",
"styled-theme": "0.3.3"
},
"devDependencies": {
"@babel/cli": "7.15.7",
"@babel/core": "7.15.5",
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/plugin-proposal-decorators": "7.15.4",
"@babel/plugin-proposal-do-expressions": "7.14.5",
"@babel/plugin-proposal-export-default-from": "7.14.5",
"@babel/plugin-proposal-export-namespace-from": "7.14.5",
"@babel/plugin-proposal-function-bind": "7.14.5",
"@babel/plugin-proposal-function-sent": "7.14.5",
"@babel/plugin-proposal-json-strings": "7.14.5",
"@babel/plugin-proposal-logical-assignment-operators": "7.14.5",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
"@babel/plugin-proposal-numeric-separator": "7.14.5",
"@babel/plugin-proposal-optional-chaining": "7.14.5",
"@babel/plugin-proposal-pipeline-operator": "7.15.0",
"@babel/plugin-proposal-throw-expressions": "7.14.5",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-syntax-import-meta": "7.10.4",
"@babel/preset-env": "7.15.6",
"@babel/preset-react": "7.14.5",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-image": "^2.1.1",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.0.5",
"@rollup/plugin-url": "^6.1.0",
"@storybook/addon-a11y": "6.3.12",
"@storybook/addon-actions": "6.3.12",
"@storybook/addon-essentials": "6.3.12",
"@storybook/addon-knobs": "6.3.1",
"@storybook/addon-links": "6.3.12",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/addon-viewport": "6.3.12",
"@storybook/addons": "6.3.12",
"@storybook/preset-create-react-app": "3.2.0",
"@storybook/react": "6.3.12",
"@storybook/storybook-deployer": "2.8.10",
"@svgr/rollup": "^5.5.0",
"@svgr/webpack": "^5.5.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "27.2.1",
"babel-loader": "8.2.2",
"babel-plugin-styled-components": "1.13.2",
"dotenv-webpack": "^7.0.3",
"eslint": "7.32.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jest": "24.4.2",
"eslint-plugin-json": "3.1.0",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.26.0",
"html-webpack-plugin": "^5.4.0",
"husky": "7.0.2",
"jest": "27.2.1",
"lint-staged": "11.1.2",
"prettier": "2.4.1",
"prettier-eslint-cli": "5.0.1",
"pretty-quick": "3.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",
"rollup": "^2.58.0",
"rollup-plugin-auto-external": "^2.0.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-multi-input": "^1.3.1",
"rollup-plugin-styles": "^3.14.1",
"styled-components": "5.3.1",
"webpack": "^5.58.2"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.3"
},
"scripts": {
"start": "start-storybook -p 9009",
"test": "jest",
"build": "rollup --config",
"build-storybook": "build-storybook -o ./docs -s ./.storybook/static",
"deploy-storybook": "storybook-to-ghpages --out=docs",
"eslint": "eslint --ignore-path .gitignore ./",
"eslint:fix": "eslint --fix --ignore-path .gitignore ./",
"prettier": "prettier -c ./",
"prettier:fix": "prettier --write ./"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"lint-staged": {
"*.js": "eslint --cache --fix"
}
}
