I have just found out that Webpack 4 doesn't respect exports field in package.json, as shown in this issue: https://github.com/webpack/webpack/issues/9509
Is there any workaround for this issue? I found out that my package doesn't work in create-react-app, as its react-script is using Webpack 4.44.
Is there anything I can do to make my package works for Webpack 4? How shoud I update my package.json config?
{
"name": "glory",
"version": "1.0.3",
"author": "Hugo Sum",
"license": "MIT",
"type": "commonjs",
"files": [
"dist/"
],
"scripts": {
"build": "npx rollup -c",
"dev": "npx rollup -c -w",
"test": "npx jest",
"test:coverage": "npx jest --coverage",
"test:watch": "npx jest --watch",
"prepublish": "yarn build",
"analyze": "npx deoptigate -r esm src/preset.js",
"size": "npx size-limit",
"size:analyze": "npx size-limit --why"
},
"exports": {
".": {
"require": "./dist/cjs/index.js",
"default": "./dist/esm/index.js"
},
"./helper": {
"require": "./dist/cjs/helper.js",
"default": "./dist/esm/helper.js"
},
"./jsx": {
"require": "./dist/cjs/addon/jsx.js",
"default": "./dist/esm/addon/jsx.js"
},
"./virtual": {
"require": "./dist/cjs/addon/virtual.js",
"default": "./dist/esm/addon/virtual.js"
},
"./prefixer": {
"require": "./dist/cjs/addon/prefixer.js",
"default": "./dist/esm/addon/prefixer.js"
},
"./hydration": {
"require": "./dist/cjs/addon/hydration.js",
"default": "./dist/esm/addon/hydration.js"
},
"./keyframes": {
"require": "./dist/cjs/addon/keyframes.js",
"default": "./dist/esm/addon/keyframes.js"
},
"./global": {
"require": "./dist/cjs/addon/global.js",
"default": "./dist/esm/addon/global.js"
}
},
"dependencies": {
"@blackblock/joli-string": "^1.1.0",
"css-in-js-utils": "^3.1.0",
"inline-style-prefixer": "^6.0.0",
"is-in-browser": "^2.0.0",
"safe-is-obj": "^1.0.1"
},
"devDependencies": {
"@babel/core": "7.13.10",
"@babel/preset-env": "7.13.10",
"@babel/preset-react": "7.12.13",
"@babel/preset-typescript": "7.13.0",
"@jest-runner/electron": "3.0.0",
"@rollup/plugin-commonjs": "17.1.0",
"@rollup/plugin-node-resolve": "11.2.0",
"@size-limit/preset-small-lib": "4.10.1",
"@types/jest": "26.0.20",
"@typescript-eslint/eslint-plugin": "4.17.0",
"@typescript-eslint/parser": "4.17.0",
"babel-jest": "26.6.3",
"benchmark": "2.1.4",
"chai": "4.3.3",
"cross-blob": "2.0.0",
"deoptigate": "0.5.0",
"esbuild": "0.9.0",
"eslint": "7.21.0",
"eslint-config-prettier": "7.2.0",
"eslint-config-standard": "16.0.2",
"eslint-plugin-chai-expect": "2.2.0",
"eslint-plugin-chai-friendly": "0.6.0",
"eslint-plugin-const-immutable": "2.1.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-mocha": "8.1.0",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.3.1",
"eslint-plugin-standard": "5.0.0",
"esm": "3.2.25",
"husky": "5.1.3",
"jest": "26.6.3",
"lint-staged": "10.5.4",
"nyc": "15.1.0",
"ramda": "0.27.1",
"react": "17.0.1",
"react-is": "17.0.1",
"react-test-renderer": "17.0.1",
"rollup": "2.41.1",
"rollup-plugin-multi-input": "1.2.0",
"rollup-plugin-typescript2": "0.30.0",
"size-limit": "4.10.1",
"tiny-worker": "2.3.0",
"tslib": "2.1.0",
"typescript": "4.2.3",
"url-polyfill": "1.1.12",
"workerpool": "6.1.2"
},
"lint-staged": {
"**/*.js": [
"npx prettier --write"
]
},
"husky": {
"hooks": {
"pre-commit": "npx lint-staged",
"pre-push": "yarn test"
}
},
"keywords": [
"css",
"style",
"styles",
"pico",
"nano",
"lite",
"react",
"js",
"in-js",
"css-in-js",
"styled",
"component",
"styled-components",
"jsxstyle",
"rule",
"stylesheet"
]
}