React hooks 两个React实例的问题

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

最近在写一个react组件的时候，遇到了这个问题，因为这个组件是想作为npm包使用，然后在组件里面使用了useEffect，这个组件本身的package.json里安装了react和react-dom作为devDependencies，另外建了测试工程，测试工程里单独装了react和react-dom，用npm link的方式来测试这个组件，然后就遇到这个报错

/** npm 包的组件  package.name = 'demo-a' */
import * as React from 'react'
const title = '12345'
export default function(props) {
  console.log('React', React, (React || {}).version || '---')
  // 这里返回false，导致出现下面React.useState抛出异常
  console.log('React === window.React', React === window.React)
  const __react = (window.React || React)
  const [title, setTitle] = __react.useState('12345')
  return <div>{title}</div>
}
/** 
  项目中的react和npm包中的react不是同一个，
  console.log('React === window.React', React === window.React)
  返回false
*/
import * as React from 'react';
import DemoA from 'demo-a';
export default DemoA;

解决方式

主项目

module.exports = {
...
resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.jsx', '.ts', '.tsx', '.js'],
    alias: {
      '@': path.resolve(__dirname, '../src'),
      // 设置这个
      'react': path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    }
},
...
}

依赖采用
rollup.config.js
设置例外模块
externals: [‘react’, ‘vue’, ‘react-dom’]
设置打包方式
output.format = es
修改package.js

{
...
"peerDependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
},
...
}

// rollup.config.js
const path = require('path');
// const writeCss = require('./config/writeCss');
// 解析 json import json from 'xxx.json'
import json from 'rollup-plugin-json';
// 有时候你会使用npm安装依赖 rollup 不知道如何打破常规去处理这些依赖（node_modules）我们需要添加一些配置。
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import typescript from '@rollup/plugin-typescript';
import less from 'rollup-plugin-less';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import postcss from 'rollup-plugin-postcss'
import { uglify } from 'rollup-plugin-uglify';
const resolvePath = function(filePath) {
  return path.join(__dirname, '.', filePath)
}
console.log(resolvePath('src/index.tsx'))
const ENV = process.env.NODE_ENV;
export default {
  sourceMap: true,
  input: resolvePath('src/core/index.tsx'),
  output: {
    file: resolvePath('dist/index.bundle.js'),
    // input [a,b,...] 多文件时有问题 umd 格式有问题 [!] Error: UMD and IIFE output formats are not supported for code-splitting builds.
    // umd,amd,cjs,iife
    format: 'es',
    name: 'myLibrary',
    sourceMap: true,
  },
  plugins: [ // 在此处使用插件
    resolve({ browser: true, }),
    commonjs({
      include: [
        'node_modules/**',
        'src/**'
      ]
    }),
    json(),
    postcss({ extensions: ['.css', '.sss', '.pcss', '.less'], plugins: [] }),
    typescript(),
    // https://www.npmjs.com/package/@rollup/plugin-babel
    babel({
      exclude: 'node_modules/**', // 只编译我们的源代码
      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.tsx', '.ts']
    }),
    replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    ENV === 'production' && uglify()
  ],
  // 指出应将哪些模块视为外部模块, 外部的（externals），不会与你的库打包在一起
  externals: ['react', 'vue', 'react-dom']
};

打包结果

// 源文件
import * as React from 'react';
export default function() {
  const [title, setTitle] = React.useState('abc')
  return <div>{title}</div>
}
// 打包后的文件
import * as React from 'react';
function indexDemo () {
  var e = React.useState('abc'),
    t = e[0];
  return e[1], React.createElement('div', null, t)
}
export {
  indexDemo as
  default
};

[

](https://blog.csdn.net/u011393161/article/details/107807496)