我有一个定制的UI库，它由Reaction和样式化组件组成，我已经在库的Package.json中指定使用我的主要应用程序样式化组件
"peerDependencies": {
"react": "^18.2.0",
"nuka-carousel": "6.0.3",
"styled-components": "6.0.8"
},
but when i include the library in my app and run yarn install i noticed that it's installed in the library's node_module
因此，在try 访问我的应用程序主题时，组件会中断
- error Error [TypeError]: Cannot read properties of undefined (reading 'h1')
at /Users/user/Desktop/code/appclient/node_modules/ui-kit/lib/components/H1/styled/H1.js:16:36
at ke (/Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:17838)
at e.generateAndInjectStyles (/Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:19353)
at /Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:21658
at /Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:21771
at I (/Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:21998)
at renderWithHooks (/Users/user/Desktop/code/appclient/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
at renderForwardRef (/Users/user/Desktop/code/appclient/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18)
at renderElement (/Users/user/Desktop/code/appclient/node_modules/react-dom/cjs/react-dom-server.browser.development
如果我删除node_modules内的库中的styled-components
应用程序开始正常工作，因为它正在使用我的主应用程序的styled-components
如果我遗漏了什么可能导致问题的东西，请告诉我.如果有必要，我也可以提供更多的细节.谢谢!
编辑: 按要求添加库和我的主应用程序的json包
我的图书馆
{
"name": "uikit",
"version": "1.16.0",
"description": "A collection of components",
"main": "./lib/index.js",
"resolutions": {
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0",
"@babel/preset-env": "^7.22.10",
"jackspeak": "2.1.1"
},
"scripts": {
"compile:clean": "rimraf lib coverage",
"compile": "tsc -m es6 --outDir lib-",
"lint": "yarn run lint:eslint && yarn run lint:stylelint",
"test:full": "yarn lint && yarn test:unit",
"test:unit": "yarn jest",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"release": "yarn compile:clean && yarn compile",
"release:major": "yarn release && standard-version --release-as major",
"release:minor": "yarn release && standard-version --release-as minor",
"release:patch": "yarn release && standard-version --release-as patch",
"release:alpha": "yarn release && standard-version --prerelease alpha",
"start": "yarn storybook",
"prepare": "husky install"
},
"keywords": [
"components",
"icons"
],
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.22.10",
"@babel/core": "^7.22.10",
"@babel/eslint-parser": "^7.22.10",
"@babel/eslint-plugin": "^7.22.10",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.22.10",
"@babel/plugin-proposal-export-default-from": "^7.22.5",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.22.10",
"@babel/preset-env": "^7.22.10",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@babel/runtime": "^7.22.10",
"@mdx-js/loader": "^2.1.3",
"@storybook/addon-a11y": "^7.4.6",
"@storybook/addon-actions": "^7.4.6",
"@storybook/addon-docs": "^7.4.6",
"@storybook/addon-essentials": "^7.4.6",
"@storybook/addon-mdx-gfm": "^7.4.6",
"@storybook/addon-storysource": "^7.4.6",
"@storybook/addon-viewport": "^7.4.6",
"@storybook/addons": "^7.4.6",
"@storybook/react": "^7.4.6",
"@storybook/react-webpack5": "^7.4.6",
"@storybook/source-loader": "^7.4.6",
"@storybook/theming": "^7.4.6",
"@stylelint/postcss-css-in-js": "^0.38.0",
"@types/body-scroll-lock": "^3.1.0",
"@types/leaflet": "^1.9.0",
"@types/lodash": "^4.14.195",
"@types/luxon": "^3.2.0",
"@types/node": "^20.8.6",
"@types/react-motion": "^0.0.35",
"@types/react-test-renderer": "^18.0.0",
"@types/react-transition-group": "^4.4.5",
"@types/shortid": "^0.0.30",
"@typescript-eslint/eslint-plugin": "^5.45.1",
"@typescript-eslint/parser": "^5.45.1",
"autoprefixer": "^10.4.13",
"babel-loader": "^9.1.0",
"babel-plugin-module-resolver": "^5.0.0",
"babel-plugin-styled-components": "^2.0.7",
"css-loader": "^6.8.1",
"eslint": "^8.24.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jest-async": "^1.0.3",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.6.14",
"husky": "^8.0.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.1.2",
"jsdom": "^22.0.0",
"jsdom-global": "^3.0.2",
"postcss": "^8.4.18",
"postcss-syntax": "^0.36.2",
"react": "^18.2.0",
"rimraf": "^5.0.1",
"sass": "^1.55.0",
"sass-loader": "^13.3.2",
"standard-version": "^9.5.0",
"storybook": "^7.4.6",
"style-loader": "^3.3.3",
"stylelint": "^14.9.1",
"stylelint-config-recommended-scss": "^8.0.0",
"stylelint-config-standard": "^29.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.9.0",
"stylelint-scss": "^5.0.0",
"typescript": "^5.2.2",
"webpack": "^5.74.0",
"webpack-cli": "^5.0.0"
},
"dependencies": {
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"body-scroll-lock": "^4.0.0-beta.0",
"downshift": "^6.1.12",
"file-loader": "^4.1.0",
"fuzzysort": "^2.0.1",
"jasmine-reporters": "^2.5.0",
"jest-environment-jsdom": "^29.1.2",
"jest-fetch-mock": "^3.0.3",
"jest-jasmine2": "^29.1.2",
"jest-styled-components": "^7.1.1",
"leaflet": "^1.8.0",
"lodash": "^4.17.21",
"luxon": "^3.0.4",
"moment": "^2.29.4",
"nuka-carousel": "6.0.3",
"pluralize": "^8.0.0",
"prop-types": "^15.8.1",
"qs": "^6.11.2",
"react-addons-shallow-compare": "^15.6.0",
"react-autosuggest": "^10.0.2",
"react-dates": "^21.8.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-leaflet": "^4.0.2",
"react-moment-proptypes": "^1.8.1",
"react-motion": "^0.5.2",
"react-test-renderer": "^18.2.0",
"react-transition-group": "^4.4.5",
"react-truncate-markup": "^5.1.2",
"shortid": "^2.2.8",
"styled-components": "6.0.8",
"stylis": "^4.0.0",
"uniqid": "^5.4.0"
},
"peerDependencies": {
"react": "^18.2.0",
"nuka-carousel": "6.0.3",
"styled-components": "6.0.8"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"ts",
"tsx"
],
"testEnvironment": "jsdom",
"testRunner": "jest-jasmine2",
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy",
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"testPathIgnorePatterns": [
"/node_modules/",
"/lib/"
],
"collectCoverage": true,
"verbose": true,
"modulePathIgnorePatterns": [
"rpmbuild"
],
"roots": [
"<rootDir>",
"./src"
],
"modulePaths": [
"<rootDir>",
"./src"
],
"moduleDirectories": [
"node_modules"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/",
"<rootDir>/node_modules/fbjs",
"<rootDir>/node_modules/core-js",
"<rootDir>/node_modules/jasmine-reporters"
],
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
]
},
"husky": {
"hooks": {
"pre-commit": "yarn test"
}
}
}
我的主要应用程序
{
"name": "appclient",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean:next": "node clean_next.js",
"check:connection": "node check_connection.js",
"clean:check:connection": "yarn run clean:next && yarn run check:connection",
"dev": "yarn run clean:check:connection && NODE_ENV=development env-cmd next -p 3020",
"dev:otel": "OTEL_ENADLED='true' yarn run dev",
"build": "IS_BUILDING='true' NODE_ENV=production next build",
"start": "IS_BUILDING='false' next start",
"test": "NODE_ENV=test jest --coverage --testPathIgnorePatterns cypress/**",
"load_test": "siege -c10 -i -t30M -f ./tests/load_test_locations.txt",
"lint": "yarn run eslint && yarn run stylelint",
"eslint": "$(yarn bin)/eslint --ext .js,.jsx,.ts,.tsx src/**",
"stylelint": "$(yarn bin)/stylelint src/**",
"prepare": "husky install"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"stylelint"
]
},
"author": "",
"license": "ISC",
"dependencies": {
"@apollo/client": "3.8.5",
"@boiseitguru/cookie-cutter": "^0.2.1",
"@cloudnative/health": "^2.1.2",
"@cloudnative/health-connect": "^2.1.0",
"@datadog/browser-rum": "^4.50.1",
"@marvelapp/react-ab-test": "^3.1.0",
"@opentelemetry/exporter-trace-otlp-http": "^0.44.0",
"@opentelemetry/resources": "^1.17.1",
"@opentelemetry/sdk-node": "^0.44.0",
"@opentelemetry/sdk-trace-base": "^1.17.1",
"@opentelemetry/semantic-conventions": "^1.17.1",
"@optimizely/optimizely-sdk": "^4.10.0",
"@researchgate/react-intersection-observer": "^1.3.4",
"@stripe/react-stripe-js": "^2.3.1",
"@stripe/stripe-js": "^2.1.7",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/actioncable": "^5.2.9",
"actioncable": "^5.2.8",
"apollo-link": "^1.2.14",
"apollo-link-rest": "^0.9.0",
"array-move": "^4.0.0",
"axios": "^0.27.2",
"cypress-iframe": "^1.0.1",
"cypress-wait-until": "^2.0.1",
"deepmerge": "^4.3.1",
"device": "^0.3.11",
"dotenv": "^16.3.1",
"uikit": "1.16.1", // my custom package
"formik": "^2.4.5",
"graphql": "^15.8.0",
"graphql-ruby-client": "^1.11.9",
"html-react-parser": "^4.2.2",
"intersection-observer": "^0.12.2",
"isomorphic-fetch": "^3.0.0",
"libphonenumber-js": "^1.10.47",
"lodash": "^4.17.21",
"lru-cache": "^10.0.1",
"luxon": "^3.4.3",
"moment": "^2.29.4",
"next": "13.4.19",
"next-api-middleware": "^2.0.1",
"next-useragent": "^2.8.0",
"nuka-carousel": "^5.5.1",
"pino": "^8.16.0",
"pluralize": "^8.0.0",
"prop-types": "^15.8.1",
"qs": "^6.11.2",
"query-string": "^8.1.0",
"react": "^18.2.0",
"react-cropper": "^2.3.3",
"react-dates": "^21.8.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-google-login": "^5.2.2",
"react-inlinesvg": "^4.0.5",
"react-marquee-slider": "^1.1.5",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.16.0",
"react-scroll-to-component-ssr": "^1.0.0",
"react-sortable-hoc": "^2.0.0",
"react-spring": "^9.7.3",
"react-table": "^7.8.0",
"react-tooltip": "^5.21.5",
"react-waypoint": "^10.3.0",
"rxjs": "^7.8.1",
"sharp": "^0.32.6",
"styled-components": "^6.0.9",
"stylis": "^4.0.0",
"use-clipboard-copy": "^0.2.0",
"util": "^0.12.5",
"yup": "^1.3.2"
},
"devDependencies": {
"@jest/globals": "^29.7.0",
"@percy/cli": "^1.27.3",
"@percy/cypress": "^3.1.2",
"@stylelint/postcss-css-in-js": "^0.38.0",
"@types/jest": "^29.5.5",
"@types/lodash": "^4.14.199",
"@types/query-string": "^6.3.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"axios-mock-adapter": "^1.22.0",
"babel-jest": "^29.7.0",
"cypress": "^13.3.1",
"cypress-plugin-tab": "^1.0.5",
"env-cmd": "^10.1.0",
"eslint": "^8.51.0",
"eslint-config-next": "13.4.19",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-cypress": "^2.15.1",
"eslint-plugin-es": "^4.1.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-optimize-regex": "^1.2.1",
"husky": "^8.0.3",
"jasmine-reporters": "^2.5.2",
"jest": "^29.7.0",
"jest-canvas-mock": "^2.5.2",
"jest-cli": "^29.6.0",
"jest-environment-jsdom": "^29.6.4",
"jsdom": "^22.1.0",
"lint-staged": "^14.0.1",
"mochawesome": "^7.1.3",
"mochawesome-merge": "^4.3.0",
"postcss-styled": "^0.34.0",
"postcss-styled-syntax": "^0.5.0",
"postcss-syntax": "^0.36.2",
"prettier-eslint": "^15.0.1",
"react-test-renderer": "^18.2.0",
"stylelint": "^15.10.3",
"stylelint-config-recommended": "^13.0.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"typescript": "^5.2.2",
"webpack": "5.88.2"
},
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"jsx",
"js",
"ts",
"tsx"
],
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": [
"babel-jest",
{
"presets": [
"next/babel"
]
}
]
},
"transformIgnorePatterns": [
"node_modules/(?!(decode-uri-component|filter-obj|split-on-first|query-string)/)"
],
"modulePaths": [
"src",
"."
],
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js",
"jest-canvas-mock"
]
}
}