具有全局形式React和Hooks的外部配置汇总

时间:2019-11-06 11:35:47

标签: reactjs react-hooks resolve rollup

很抱歉,如果此问题放在不正确的位置。 这是如何运作的? 运行我的Web应用程序时出现此错误

Uncaught Error: 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:

您可能使用了不匹配的React和渲染器版本(例如React DOM) 这是我的配置汇总

const pkg = require('./package.json')
const libraryName = 'sensedia-web-components'

export default {
input: src/${libraryName}.ts,
external: [
...Object.keys(pkg.peerDependencies),
...Object.keys(pkg.dependencies),
...Object.keys(pkg.devDependencies)
],
output: {
file: pkg.main,
name: camelCase(libraryName),
format: 'umd', sourcemap: true,
globals: {
'react': 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled'
}
},
watch: {
include: 'src/**',
},
plugins: [
json(),
typescript({ useTsconfigDeclarationDir: true }),
commonjs(),
resolve({
dedupe: ['react', 'react-dom'], // Default: []
}),
sourceMaps(),
],
}

这是我运行npm ls反应时的终端 enter image description here

我在库和Web应用程序中使用钩子

const Components = () => {
   const [select, setSelect] = useState({ label: '', value: '' })

   return (
      <Fragment>
         <Row justify={'center'}>
            <Col xs={12} sm={12} md={12} lg={12}>
               <SelectBox
                  name="select"
                  label="Test de label"
                  options={options}
                  value={select}
                  onChange={setSelect}
                  id="test"
                  clearable
               />
            </Col>
         </Row>
      </Fragment>
   )
}

export default Components

0 个答案:

没有答案