Node: Exports field in package.json is not working - node.js

Question

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"
}
}

Answer 1

I couldn't get exports to work. This is how I worked around it. I had to change the build + publish only the dist folder

Answer 2

You'd better check your my-app project, make sure which build tools you use(webpack or rollup or something else?)
Build tools often offer your some fields to configure the moduleResolution strategy in their configuration file, such as webpack.config.json.
By the way, exports field of package.json will work well when you take node module resolution to import module.
For example:
set up a project like this:
tool
/-- dist
/-- add.js
/-- types
/-- index.d.ts
package.json
add.js:
module.exports.add = function(a, b) { return a + b }
index.d.ts:
/**
* add two number
*
* #example
* ```typescript
* const c = add(1, 2)
*
* // result: c === 3
* ```
*/
export declare function add(a: number, b: number): number;
package.json:
{
"name": "tool",
"exports": {
".": {
"require": "./dist",
},
"./*": {
"require":"./dist/*.js",
"types": "./types/index.d.ts"
}
}
}
in tool directory, run yarn link;
then, setup another project to import tool package, this project will be like:
practice
main.js
package.json
main.js:
const { add } = require("tool/add")
add(1, 3)
package.json:
{
"name": "practice"
}
then, in practice directory, run yarn link tool, you will see the changes:
practice
/-- node_modules
/-- tool
package.json
main.js
When you open the practice project and look at main.js in vscode, you will find that there're no type hints about add! But we have configured the types in exports field of package.json!
To your surprise , we could run main.js by node main.js, no errors no warns!
This is because when node executes the file, it will look at exports field and follow its content, but vscode type hints system don't know this and never give you a hint!
how to solve it?
Just add a jsconfig.json file under practice directory:
{
"compilerOptions": {
"moduleResolution": "Node16"
}
}
Do you get it? Yes, we adopt this format to tell vscode the moduleResolution strategy, then you could see the type hints when you hover on the add.
So, when you build your app, the build tools maybe offer you configuration field to resolve the module path. Search it!