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 引用解决了这个问题。