Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: Cannot read properties of null (reading 'useContext') #676

Open
kaqiinono opened this issue Jul 17, 2023 · 4 comments
Open

Comments

@kaqiinono
Copy link

基于antd react的一个扩展组件库。antd加入到peerdependency中并在webpack的externals中进行排除,and安装在devDependency中,打包后并软链到实际项目进行组件测试,提示错误如下:
image

执行pnpm uninstall antd后,组件能正常展示
设置config.resolve.symlinks为true和false都不起作用。
请问何解

father配置:

import { defineConfig } from 'father';

export default defineConfig({
  esm: {
    input: 'src', // 默认编译目录
    output: 'es',
    platform: 'browser', // 默认构建为 Browser 环境的产物
    transformer: 'babel', // 默认使用 babel 以提供更好的兼容性
  },
  // 以下为 cjs 配置项启用时的默认值,有自定义需求时才需配置
  cjs: {
    input: 'src', // 默认编译目录
    output: 'lib',
    platform: 'browser', // 默认构建为 Node.js 环境的产物
    transformer: 'babel', // 默认使用 esbuild 以获得更快的构建速度
  },
  umd: {
    name: 'components',
    output: 'dist',
    externals:{ 'react': 'React', 'react-dom': 'ReactDOM', 'antd': 'antd' },
    // chainWebpack:function (config){
    //   config.resolve.symlinks(true)
    //   return config
    // }
  },
});
@kaqiinono
Copy link
Author

@kaqiinono
Copy link
Author

{
  "name": "dumi-demo2",
  "version": "0.0.1",
  "description": "A react library developed with dumi",
  "sideEffects": false,
  "main": "lib/index.js",
  "unpkg": "dist/components.min.js",
  "module": "es/index.js",
  "types": "es/index.d.ts",
  "files": [
    "dist",
    "lib",
    "es"
  ],
  "scripts": {
    "start": "npm run dev",
    "dev": "dumi dev",
    "build": "father build",
    "build:watch": "father dev",
    "docs:build": "dumi build",
    "prepare": "husky install && dumi setup",
    "doctor": "father doctor",
    "lint": "npm run lint:es && npm run lint:css",
    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
    "prepublishOnly": "father doctor && npm run build"
  },
  "authors": [],
  "license": "MIT",
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "lint-staged": {
    "*.{md,json}": [
      "prettier --write --no-error-on-unmatched-pattern"
    ],
    "*.{css,less}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --parser=typescript --write"
    ]
  },
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0",
    "antd": ">=5.7.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.6",
    "@commitlint/config-conventional": "^17.6.6",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@umijs/lint": "^4.0.72",
    "antd": "^5.7.0",
    "dumi": "^2.2.1",
    "eslint": "^8.45.0",
    "father": "^4.2.3",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "prettier": "^3.0.0",
    "prettier-plugin-organize-imports": "^3.2.3",
    "prettier-plugin-packagejson": "^2.4.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "stylelint": "^15.10.1"
  }
}

@wsyxl365
Copy link

基于antd react的一个扩展组件库。antd加入到peerdependency中并在webpack的externals中进行排除,and安装在devDependency中,打包后并软链到实际项目进行组件测试,提示错误如下: image

执行pnpm uninstall antd后,组件能正常展示 设置config.resolve.symlinks为true和false都不起作用。 请问何解

father配置:

import { defineConfig } from 'father';

export default defineConfig({
  esm: {
    input: 'src', // 默认编译目录
    output: 'es',
    platform: 'browser', // 默认构建为 Browser 环境的产物
    transformer: 'babel', // 默认使用 babel 以提供更好的兼容性
  },
  // 以下为 cjs 配置项启用时的默认值,有自定义需求时才需配置
  cjs: {
    input: 'src', // 默认编译目录
    output: 'lib',
    platform: 'browser', // 默认构建为 Node.js 环境的产物
    transformer: 'babel', // 默认使用 esbuild 以获得更快的构建速度
  },
  umd: {
    name: 'components',
    output: 'dist',
    externals:{ 'react': 'React', 'react-dom': 'ReactDOM', 'antd': 'antd' },
    // chainWebpack:function (config){
    //   config.resolve.symlinks(true)
    //   return config
    // }
  },
});

你好,我这边用link到global之后调用也是一直同样的错。然后我试着上传到npm后项目安装使用就正常了 没有报错,你可以试下

@wchbrad
Copy link

wchbrad commented Sep 9, 2024

请问,umd形式的产物,你们使用script导入使用时,有问题么?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants