Error with JSX in my React Library when Switching to Preact

Question

I have a really simple React library that I use with my own state management. It's just a Higher Order Component:

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
}

I can publish the library this way and I will get a syntax error about being unable to parse < in the JSX.

So I run the code through babel

//.babelrc

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

using this webpack config

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"]
          }
        ]
      },
}

this is the dependency and publish section of my 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'm using preact-compat per the website and still getting <undefined></undefined> https://github.com/developit/preact-compat#usage-with-webpack

Currently, running this through babel outputs react in the library and my library and Preact labels any HOC that use this library as <undefined></undefined>

IF I publish the un-babel'd code and it is simply the source cope at the top written in new ECMAScript, I get an unable to parse error on the < in the JSX.

However, if I were to reference the library NOT through node_modules but in a developer made files like myLibrary.js and use the un-babel'd code, it works.

How do I manage my dependencies correctly? Should React be a peerDependecy? Furthermore, how to get this library to work from the node_modules directory for BOTH React AND Preact?

Answer 1

I think you don't have resolve in your webpack file.

Could you please try with the 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'
        }
    }
    // ...
}