Search code examples
reactjsnpmstyled-componentsrollup

Creating an NPM package with Styled-Components: Styled-Components TypeError: t.hasOwnProperty is not a function

I'm creating an internal NPM package that contains the base layout for all of our ReactJS web applications. In this package, I am using styled-components for formatting the components, and rollup to build the package. Styled components is also used in the target application.

Here are the config files:

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,
  },
];

When I add the package to the reactJS application, everything seems fine, I can see the package, use it where it is required, but when I run and browse to it, I get the following error:

TypeError: t.hasOwnProperty is not a function

The code in question was working before I moved it to an NPM package,

Solution

  • So, after two weeks, it turns out that having an image in the theme was what was causing this. Changing the image from an import to a url reference fixed this problem.