Ошибка с JSX в моей библиотеке React при переключении на Preact

Question

У меня действительно простая библиотека React, которую я использую со своим собственным управлением состоянием.Это просто компонент высшего порядка:

import React from 'react';
/**
 * 
 * @param {Object} state - Reference to SubState instance 
 * @param {Object} chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>{
    const newProps = {};
    for (let key in chunk){
        newProps[key] = state.getProp(chunk[key]);
    }
    return (<Comp {...newProps} {...props} />)
};

export {
    connect
}

Я могу опубликовать библиотеку таким образом, и у меня получится синтаксическая ошибка из-за невозможности анализа < в JSX.

Так что язапустите код через babel

//.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

, используя эту конфигурацию веб-пакета

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'index.js',     
        library: 'substateConnect',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ["babel-loader"]
          }
        ]
      },
}

, это раздел зависимостей и публикации моего package.json

 "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  },
  "files": [
    "index.js",
    "index.map",
    "src/index.js"  
  ],
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "substate": "^4.0.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  }

I 'используя preact-compat для каждого веб-сайта и получая <undefined></undefined> https://github.com/developit/preact-compat#usage-with-webpack

В настоящее время выполнение этого с помощью выходных данных babel реагирует в библиотеке и моей библиотеке, и Preact помечает любой HOC, который использует эту библиотеку, как <undefined></undefined>

ЕСЛИ я публикую не-babel'd-код, и это просто справочная информация в верхней части, написанная в новом ECMAScript, я получаю unable to parse ошибку на < в JSX.

Однако, если бы я ссылался на библиотеку НЕ через node_modules, а в разработчике, сделавшем файлы типа myLibrary.js, и использовал код un-babel'd, это работает.

Как правильно управлять своими зависимостями?Должен ли React быть взаимозависимостью?Кроме того, как заставить эту библиотеку работать из каталога node_modules для ОБА React AND Preact?

Answer 1

Я думаю, у вас нет resolve в вашем webpack файле.

Не могли бы вы попробовать с resolve config.

{
    // ...
    resolve: {
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat',
            // Not necessary unless you consume a module using `createClass`
            'create-react-class': 'preact-compat/lib/create-react-class',
            // Not necessary unless you consume a module requiring `react-dom-factories`
            'react-dom-factories': 'preact-compat/lib/react-dom-factories'
        }
    }
    // ...
}

Answer 2

Спасибо @Dominic за помощь в очистке моих зависимостей.

Так что в основном новые зависимости выглядят так:

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "substate": "^4.0.0",
  }

Важно отметить: мне не нужна React asзависимость.Любое использование webpack и babel строго для целей разработки и тестирования.

Фактический конечный продукт перешел от скомпилированного index.js файла к простому:

import React from 'react';
/**
 * 
 * @param {Object} state - Reference to SubState instance 
 * @param {Object} chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>{
    const newProps = {};
    for (let key in chunk){
        newProps[key] = state.getProp(chunk[key]);
    }
    return (<Comp {...newProps} {...props} />)
};

export {
    connect
}

Предположение (иЯ думаю, что безопасным и справедливым является тот факт, что любой, кто использует это, будет компилировать по мере необходимости и alias вступать в действие в своем существующем реактивном проекте.

Это предположение позволило мне удалить любой миниатюрный файл, веб-пакет или любую реальную компиляцию из реальной библиотеки.По сути, просто используйте этот файл как обычный компонент высшего порядка, React сделает все остальное с помощью упаковщика, и замена React на Preact в соответствии с документацией будет работать по мере необходимости.

Спасибо всем.