Ошибка - Хуки могут быть вызваны только внутри тела компонента функции - PullRequest
Новая
       72

Ошибка - Хуки могут быть вызваны только внутри тела компонента функции

0 голосов
/ 15 марта 2020

Я получаю сообщение об ошибке: Hooks can only be called inside the body of a function componen

На изображении видно, что я использую компонент функции: http://prntscr.com/rgk36s

Мой код связан с помощью Свернуть.

Что не так?

Мой конфиг накопления: 

import { readdirSync } from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.json'];
const CODES = [
  'THIS_IS_UNDEFINED',
  'MISSING_GLOBAL_NAME',
  'CIRCULAR_DEPENDENCY',
];

const getChunks = URI =>
  readdirSync(path.resolve(URI))
    .filter(x => x.includes('.js'))
    .reduce((a, c) => ({ ...a, [c.replace('.js', '')]: `src/${c}` }), {});

const discardWarning = warning => {
  if (CODES.includes(warning.code)) {
    return;
  }

  console.error(warning);
};

const env = process.env.NODE_ENV;

const commonPlugins = () => [
  external({
    includeDependencies: true,
  }),
  babel({
    babelrc: false,
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    extensions: EXTENSIONS,
    exclude: 'node_modules/**',
  }),
  commonjs({
    include: /node_modules/,
  }),
  replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
  resolve({
    extensions: EXTENSIONS,
    preferBuiltins: false,
  }),
];

export default [
  {
    onwarn: discardWarning,
    input: 'src/index.js',
    output: {
      esModule: false,
      file: pkg.unpkg,
      format: 'umd',
      name: 'myLibrary',
      exports: 'named',
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
        'styled-components': 'styled',
      },
    },
    plugins: [...commonPlugins(), env === 'production' && terser()],
  },
  {
    onwarn: discardWarning,
    input: getChunks('src'),
    output: [
      { dir: 'esm', format: 'esm', sourcemap: true },
      { dir: 'cjs', format: 'cjs', exports: 'named', sourcemap: true },
    ],
    plugins: commonPlugins(),
  },
];

Я не знаю, что не так, вы можете помочь мне решить мою проблему? Похоже, что реакция не связана с кодом.

  • Я пытаюсь создать свою библиотеку реагирования

Мой компонент прост: 

import React, {useState} from 'react';

const Bar = () => {
    const [value, setValue] = useState(0)

    return (
        <button onClick={() => setValue(value + 1)}>
            {value}
        </button>
    )
}

export default Bar

экспорт по индексному файлу: export { default as Bar } from './Bar';

и использование моего компонента в react-create-app: 

import * as React from 'react';
import './App.css'; 
import {Bar} from 'my-library';

function App () {
    return (
        <div className="App">
            <hr /> 
            <Bar />
        </div>
    );
}

export default App;
...