Виджет React Hooks работает при непосредственном использовании, но не при импорте из NPM - PullRequest
Новая
       41

Виджет React Hooks работает при непосредственном использовании, но не при импорте из NPM

0 голосов
/ 12 апреля 2020

У меня есть довольно простой пример виджета React Hooks, функция которого заключается в предоставлении контекстных хуков для предоставления состояния, которое может устанавливать несколько строк и переключать текущую тему Material UI. Вот рабочая демоверсия . Нажав на кнопку с надписью «СЛЕДУЮЩАЯ ТЕМА», вы увидите, что страница переключается между желтым и синим цветом, а также некоторые изменения текста, указывающие название темы.

Это надуманный пример, но идея в том, что в верхней части моего сайта я обертываю весь контент провайдерами контекста, чтобы любой вложенный виджет мог получить доступ к общему состоянию. Выглядит так: 

import React from "react";

import { AppContext } from "./AppContext";
import { ThemeContextProvider } from "./ThemeContext";

export default function App(props) {
  return (
    <div>
      <ThemeContextProvider>
        <AppContext>{props.children}</AppContext>
      </ThemeContextProvider>
    </div>
  );
}

Все работает, как я сказал в демонстрации, которую я связал выше. Но когда я публикую sh этот код на NPM и затем использую его в другом проекте, он в основном работает, за исключением одного фрагмента импорта - цвет темы не изменится. Все остальные изменения состояния работают правильно - все остальные изменения состояния являются текстовыми и проблем не возникает, но цвет не изменится.

Тема предоставляется пользовательским интерфейсом материалов, и я подозреваю, что существует проблема с тем, что я собираю весь этот код для публикации в NPM. Я использую Rollup - вот rollup.config. js: 

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import json from '@rollup/plugin-json';
const {terser} = require('rollup-plugin-terser');

import pkg from './package.json';

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    external(),
    // url({ exclude: ['**/*.svg'] }),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true
    }),
    resolve({
      preferBuiltins: true,
      browser: true
    }),
    commonjs({
      include: 'node_modules/**',
      browser: true,
      namedExports: {
        'node_modules/react/index.js': [
          'createContext',
          'useContext',
          'useEffect',
          'useState'
        ],
        'node_modules/react-is/index.js': [
          'ForwardRef',
          'Memo'
        ],
        'node_modules/prop-types/index.js': [
          'elementType'
        ]
      }
    }),
    terser(),
    json()
  ]
};

А вот мой пакет. json: 

{
  "name": "@data-factory/theme-context-test",
  "version": "0.0.1",
  "description": "Code from CodeSandbox",
  "author": "sellis42",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "engines": {
    "node": ">=8",
    "npm": ">=5"
  },
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c -w",
    "prepare": "npm run build",
    "predeploy": "cd example && npm install && npm run build"
  },
  "peerDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.9.2",
    "@material-ui/core": "^4.9.8",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.9.6",
    "@rollup/plugin-json": "^4.0.2",
    "cross-env": "^5.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "^3.4.0",
    "rollup": "^1.32.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-node-resolve": "^4.2.4",
    "rollup-plugin-peer-deps-external": "^2.2.2",
    "rollup-plugin-terser": "^4.0.4",
    "typeface-roboto": "0.0.75"
  }
}

Я чувствую, что есть чего-то не хватает в моей конфигурации накопительного пакета. Этот проект находится в моей локальной системе разработки и немного отличается от связанного кода. По сути, у меня есть весь код, который я публикую sh в root модуля виджета, и пример папки, которая демонстрирует, как использовать виджет. Я использую ссылку npm, чтобы примерный виджет мог использовать ее, и именно здесь я вижу проблему, которую пытаюсь решить. Я могу скопировать весь виджет root в подпапку примера sr c и импортировать его оттуда вместо NPM, и он снова заработает.

Буду признателен за любую помощь или идеи. Я могу поместить весь свой код в Git, если кто-то заинтересован в более глубоком рассмотрении.

1 Ответ

0 голосов
/ 13 апреля 2020

Я полностью обошел проблему, не используя ThemeProvider в ThemeContext. Вот что возвращает хук ThemeContext (сокращенный источник): 

return (
    <ThemeContext.Provider value={{theme, setTheme ... }}>
      <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
    </ThemeContext.Provider>
  );

Я изменил это на: 

return (
    <ThemeContext.Provider value={{theme, setTheme ... }}>
      {props.children}
    </ThemeContext.Provider>
  );

Тогда дети обязаны предоставить ThemeProvider. Пока я не использую ThemeProvider в своих хуках, мне кажется, что все в порядке.

Я не уверен, почему это так, но я могу с этим смириться.

...