Creating an NPM package with Styled-Components: Styled-Components TypeError: t.hasOwnProperty is not a function
Creating an NPM package with Styled-Components: Styled-Components TypeError: t.hasOwnProperty is not a function
我正在创建一个内部 NPM 包,其中包含我们所有 ReactJS Web 应用程序的基本布局。在这个包中,我使用 styled-components 来格式化组件,并使用 rollup 来构建包。目标应用程序中也使用了样式化组件。
配置文件如下:
packages.json
{
....
"dependencies": {
"@azure/msal-browser": "^2.7.0",
"@microsoft/microsoft-graph-client": "^2.1.1",
"@microsoft/microsoft-graph-types": "^1.27.0",
"@microsoft/signalr": "^3.1.8",
"@types/react-custom-scrollbars": "^4.0.7",
"@types/react-html-parser": "^2.0.1",
"react-contextmenu": "^2.14.0",
"react-custom-scrollbars": "^4.2.1",
"react-html-parser": "^2.0.2",
"react-loading": "^2.0.3"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-image": "^2.0.5",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/axios": "^0.14.0",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"@types/react-router-dom": "^5.1.6",
"@types/styled-components": "^5.1.4",
"axios": "^0.21.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactjs-popup": "^2.0.4",
"rollup": "^2.33.3",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.29.0",
"styled-components": "^5.2.1",
"typescript": "^4.1.2"
},
"peerDependencies": {
"axios": ">=0.21.0",
"react": ">=17.0.1",
"react-dom": ">=17.0.1",
"react-html-parser": ">=2.0.2",
"react-router": ">=5.2.0",
"react-router-dom": ">=5.2.0",
"reactjs-popup": ">=2.0.4",
"styled-components": ">=5.2.1",
"typescript": ">=4.1.2"
},
...
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import image from '@rollup/plugin-image';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '@rollup/plugin-json';
import pkg from './package.json';
const plugins = [
resolve( { preferBuiltins: true, mainFields: [ 'browser' ] } ),
peerDepsExternal(),
commonjs(),
typescript( {
typescript: require( "typescript" ),
useTsconfigDeclarationDir: true
} ),
json(),
image(),
];
export default [
{
input: "src/index.ts",
output: {
file: pkg.module,
format: "esm",
sourcemap: true
},
plugins,
},
];
当我将包添加到 reactJS 应用程序时,一切似乎都很好,我可以看到包,在需要的地方使用它,但是当我 运行 并浏览到它时,我收到以下错误:
有问题的代码在我将其移动到 NPM 包之前是有效的,
所以,两周后,事实证明主题中有一张图片是造成这种情况的原因。将图像从导入更改为 url 引用解决了这个问题。
我正在创建一个内部 NPM 包,其中包含我们所有 ReactJS Web 应用程序的基本布局。在这个包中,我使用 styled-components 来格式化组件,并使用 rollup 来构建包。目标应用程序中也使用了样式化组件。
配置文件如下:
packages.json
{
....
"dependencies": {
"@azure/msal-browser": "^2.7.0",
"@microsoft/microsoft-graph-client": "^2.1.1",
"@microsoft/microsoft-graph-types": "^1.27.0",
"@microsoft/signalr": "^3.1.8",
"@types/react-custom-scrollbars": "^4.0.7",
"@types/react-html-parser": "^2.0.1",
"react-contextmenu": "^2.14.0",
"react-custom-scrollbars": "^4.2.1",
"react-html-parser": "^2.0.2",
"react-loading": "^2.0.3"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-image": "^2.0.5",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/axios": "^0.14.0",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"@types/react-router-dom": "^5.1.6",
"@types/styled-components": "^5.1.4",
"axios": "^0.21.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactjs-popup": "^2.0.4",
"rollup": "^2.33.3",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.29.0",
"styled-components": "^5.2.1",
"typescript": "^4.1.2"
},
"peerDependencies": {
"axios": ">=0.21.0",
"react": ">=17.0.1",
"react-dom": ">=17.0.1",
"react-html-parser": ">=2.0.2",
"react-router": ">=5.2.0",
"react-router-dom": ">=5.2.0",
"reactjs-popup": ">=2.0.4",
"styled-components": ">=5.2.1",
"typescript": ">=4.1.2"
},
...
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import image from '@rollup/plugin-image';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '@rollup/plugin-json';
import pkg from './package.json';
const plugins = [
resolve( { preferBuiltins: true, mainFields: [ 'browser' ] } ),
peerDepsExternal(),
commonjs(),
typescript( {
typescript: require( "typescript" ),
useTsconfigDeclarationDir: true
} ),
json(),
image(),
];
export default [
{
input: "src/index.ts",
output: {
file: pkg.module,
format: "esm",
sourcemap: true
},
plugins,
},
];
当我将包添加到 reactJS 应用程序时,一切似乎都很好,我可以看到包,在需要的地方使用它,但是当我 运行 并浏览到它时,我收到以下错误:
有问题的代码在我将其移动到 NPM 包之前是有效的,
所以,两周后,事实证明主题中有一张图片是造成这种情况的原因。将图像从导入更改为 url 引用解决了这个问题。