Как использовать React-хуки в моей библиотеке компонентов? - PullRequest
Новая
       11

Как использовать React-хуки в моей библиотеке компонентов?

3 голосов
/ 14 октября 2019

В настоящее время я создаю библиотеку компонентов, которая включена в проект Nextjs по ссылке NPM, и мне трудно заставить ее постоянно загружаться без ошибок. Последний из них -

Неправильный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

Это компонент Typescript, но, насколько я могу судить, все, что я сделал, хорошо, но он просто не занимается спортом. Вот код: 

        import React, { useEffect } from "react";
        import { FlagIcon } from "react-flag-kit";

        const LanguageSwitcher = () => {
            useEffect(() => {
                alert('Yo!');
            })
            return (
                <div className="w-full justify-end">
                    <button>
                        <div className="flex items-center">
                            <FlagIcon code="GB" /> <span className="block ml-2">English</span>
                        </div>
                    </button>
                </div>
            )
        }

        export default LanguageSwitcher

Затем он импортируется в другой компонент в библиотеке и затем импортируется на страницу Nextjs. Вот где появляется ошибка.

Я не уверен, является ли это проблемой компиляции веб-пакетов или машинописного текста, пробовал все разные цели, которые я могу придумать, пробовал гуглить все виды вещей, но ничто не кажется уместныммоя ситуация. Возможно, это даже не проблема React, но проблема с Typescript и Webpack, но мое знакомство с ними очень новое.

Моя конфигурация веб-пакета: 

        var path = require('path');
        module.exports = {
          entry: './src/index.ts',
          devtool: "source-map",
          output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'index.js',
            libraryTarget: 'commonjs2'
          },
          module: {
            rules: [
              {
                test: /\.ts(x?)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
              },
              {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
              }
            ]
          },
          resolve: {
            extensions: [ '.tsx', '.ts', '.js' ],
          }
        };

My tsconfig.json


    {
      "compilerOptions": {
        "outDir": "build",
        "module": "esnext",
        "target": "es6",
        "lib": ["es6", "dom", "es2016", "es2017"],
        "sourceMap": true,
        "allowJs": false,
        "jsx": "react",
        "declaration": true,
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "allowSyntheticDefaultImports": true
      },
      "include": ["src"],
      "exclude": ["node_modules", "build"]
    }

Буду признателен за любые указания или помощь!

Я также попытался вернуть все обратно к vanilla JS, и проблема не устранена, поэтому я думаю, что это может быть связано с веб-пакетом?

Редактировать

Вот мой полный файл package.json, а также то, что Nextjs имеет 

{
  "name": "some/package",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack --watch --mode=development",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.10.2",
    "webpack": "^4.41.1"
  },
  "devDependencies": {
    // ...
    "@types/react": "^16.9.5",
    "@types/react-dom": "^16.9.1",
    "react": "16.10.2",
    "react-dom": "^16.10.2",
    "ts-loader": "^6.2.0",
    "typescript": "^3.6.4",
    "webpack-cli": "^3.3.9"
  }
}

    "react": "16.10.2",
    "react-dom": "16.10.2"

1 Ответ

0 голосов
/ 29 октября 2019

Оказывается, это произошло из-за проблем с символьной реакцией в библиотеке компонентов

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

Исправлено путем выполнения шагов по ссылке: 

npm link ../myapp/node_modules/react // Run within the component library
...