使用 Styled-Components 创建 NPM 包：Styled-Components TypeError: t.hasOwnProperty is not a function

Question

我正在创建一个内部 NPM 包，其中包含我们所有 ReactJS Web 应用程序的基本布局。在这个包中，我使用 styled-components 来格式化组件，并使用汇总来构建包。样式化的组件也用于目标应用程序。

这里是配置文件：

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 包之前，有问题的代码正在运行，

Answer 1

因此，两周后，事实证明，主题中包含图像是造成这种情况的原因。将图像从导入更改为 url 引用解决了这个问题。