typescript 无法读取null的属性(阅读“useContext”)

hyrbngr7  于 2023-03-31  发布在  TypeScript
关注(0)|答案(2)|浏览(172)

我目前正在使用TypeScript和Rollup从Material UI创建组件库。我已经成功发布了该包,但当我尝试将其导入到新项目时,我收到以下错误:
“未捕获的类型错误:无法读取null的属性(阅读'useContext')”
我不知道是什么原因导致了这个错误,因为当我在本地测试时,库工作正常。我已经检查了我的依赖项,一切似乎都很正常。还有其他人遇到过这个问题吗?或者对如何解决它有任何建议?提前感谢您提供的任何帮助。
package.json

{
  "name": "*****",
  "version": "0.1.24",
  "engines": {
    "node": ">=8.3.0"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },
  "repository": "https://github.com/****/****.git",
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "absoluteRuntime": false
        }
      ]
    ]
  },
  "dependencies": {
    "@changesets/cli": "^2.26.0",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/dm-sans": "^4.5.9",
    "@fontsource/material-icons": "^4.5.4",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.10",
    "@tabler/icons": "2.6.0",
    "@tabler/icons-react": "2.7.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.12",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "cross-env BABEL_ENV=production babel src -d dist",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "prepare": "husky install",
    "release": "npm publish && yarn changeset",
    "rollup": "rollup -c"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-image": "^3.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-terser": "^0.4.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@rollup/plugin-url": "^8.0.1",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "auto": "^10.43.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "cross-env": "^7.0.3",
    "eslint": "^8.35.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-node": "^4.1.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "file-loader": "^6.2.0",
    "husky": "^8.0.0",
    "prettier": "^2.8.4",
    "prop-types": "^15.8.1",
    "rollup": "^3.20.2",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "style-loader": "^3.3.1",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0"
  },
  "lint-staged": {
    "*": [
      "eslint src --ext .js,.jsx,.ts,.tsx --fix",
      "prettier --write src"
    ]
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "type": "module"
}

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import url from '@rollup/plugin-url';
import dts from 'rollup-plugin-dts';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

import packageJson from './package.json' assert { type: 'json' };

export default [
    {
        input: 'src/index.tsx',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
                name: 'react-ts-lib',
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true,
            },
        ],
        plugins: [
            url({
                // by default, rollup-plugin-url will not handle font files
                include: ['**/*.woff', '**/*.woff2'],
                // setting infinite limit will ensure that the files
                // are always bundled with the code, not copied to /dist
                limit: Infinity,
            }),
            external(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: './tsconfig.json' }),
            postcss(),
            terser(),
        ],
    },
    {
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'esm' }],
        external: [/\.css$/],
        plugins: [dts()],
    },
];
juud5qan

juud5qan1#

另一个讨论此类设置的潜在问题、可能的解决方案和最佳实践的链接是here

bpsygsoo

bpsygsoo2#

如果你遇到了React和React DOM的多次安装导致的问题,删除这些包并将以下代码段添加到你的package.json文件中应该可以解决这个问题:

"peerDependencies": {
  "@emotion/react": "^11.5.0",
  "@emotion/styled": "^11.3.0",
  "@types/react": "^17.0.0 || ^18.0.0",
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
  "@types/react": {
    "optional": true
  },
  "@emotion/react": {
    "optional": true
  },
  "@emotion/styled": {
    "optional": true
  }
}

通过将这些对等依赖项添加到package.json文件中,您可以指定代码正常运行所需的包版本。“可选”:true标志允许这些包作为可选依赖项安装,这意味着它们不会被多次安装并导致冲突。
请确保在更新package.json文件后运行npm install或yarn install,以确保更改生效。这应该可以解决多次安装React和React DOM的任何问题,并确保代码顺利运行。

相关问题