Babel 编译对象错误的 NPM React Packpage

问题描述

我做了我的第一个 npm packpage 并发布了等等...你可以用 npm i react-chat-bot42 安装 但是当我导入并添加到其他新应用程序时，我收到此错误（我正在使用 webpack --mode production 编译我的源代码并发布编译结果，您可以安装它 npm i react- chat-bot42) 如果我使用源代码通常一切正常，但是当我编译它 bon babel 并尝试 suar 结果我有这个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in,or you might have mixed up default and named imports.

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

Webpack.config.js:

    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',output: {
        path: path.resolve(__dirname,'dist'),filename: 'index.js'
      },module: {
        rules: [
                {
                    test: /\.js?$/,exclude: /node_modules/,use: {
              loader: 'babel-loader',options: {
                presets: ['@babel/env']
              }
            }
                }
            ]
      }
    }

我的包json：

{
  "name": "react-chat-bot42","version": "0.7.1","private": false,"description": "An ES6 npm module Chat Bot!","main": "dist/index.js","scripts": {
    "start": "webpack-dev-server --open --mode development","build": "webpack --mode production"
  },"author": "Iñigo Romero","license": "MIT","keywords": [
    "Chabot","react"
  ],"dependencies": {
    "@babel/plugin-Syntax-jsx": "^7.12.13","babel-preset-es2015": "^6.24.1","extract-text-webpack-plugin": "^3.0.2","path": "^0.12.7","react": "^16.14.0","react-dom": "^17.0.1"
  },"devDependencies": {
    "@babel/core": "^7.12.13","@babel/plugin-proposal-class-properties": "^7.12.13","@babel/plugin-transform-runtime": "^7.12.15","@babel/preset-env": "^7.12.13","@babel/preset-react": "^7.12.13","autoprefixer": "^10.2.4","babel-cli": "^6.26.0","babel-core": "^7.0.0-bridge.0","babel-loader": "^8.2.2","babel-preset-env": "^1.7.0","babel-preset-stage-2": "^6.24.1","css-loader": "^5.0.2","html-webpack-plugin": "^5.0.0","webpack": "^4.46.0","webpack-cli": "^4.5.0","webpack-dev-server": "^3.11.2"
  },"repository": {
    "type": "git","url": "https://github.com/InigoRomero/npm-Chat-Bot"
  }
}

我的源代码：

import React,{Component} from 'react';
import {Dprompts,DReplies,DnotFound} from './DefaultConstants'
//import './DefaultStyle.css'
const reactchatbot = props => {
  let
    prompts = props.Prompts ? props.Prompts : Dprompts,Replies = props.Replies ? props.Replies : DReplies,notFound = props.notFound ? props.notFound : DnotFound,botIcon = props.botIcon,userIcon = props.userIcon,input = '',text = '',product = '';
  window.onload = function() {
    let inputField = document.getElementById("input");
    inputField.addEventListener("keydown",(e) => {
      if (e.code === "Enter") {
        input = inputField.value;
        inputField.value = "";
        output();
      }
    });
  }
    
  function output() {
    let product2;
    let text2 = input.toLowerCase().replace(/[^\w\s]/gi,"").replace(/[\d]/gi,"").trim();
    text2 = text2
      .replace(/ a /g," ") 
      .replace(/i feel /g,"")
      .replace(/whats/g,"what is")
      .replace(/please /g,"")
      .replace(/ please/g,"")
      .replace(/r u/g,"are you");
    text = text2;
    if (compare()) { 
      product2 = compare();
    } else if (text2.match(/thank/gi)) {
      product2 = "You're welcome!"
    } else {
      product2 = notFound[Math.floor(Math.random() * notFound.length)];
    }
    product = product2;
    addChat();
  }

  function compare() {
    let reply;
    let replyFound = false;
    for (let x = 0; x < prompts.length; x++) {
      for (let y = 0; y < prompts[x].length; y++) {
        if (prompts[x][y] === text) {
          let replies = Replies[x];
          reply = replies[Math.floor(Math.random() * replies.length)];
          replyFound = true;
          break;
        }
      }
      if (replyFound) {
        break;
      }
    }
    return reply;
  }

  function addChat() {
    const messagesContainer = document.getElementById("messages");
    let userDiv = document.createElement("div");
    userDiv.id = "user";
    userDiv.className = "user response";
    userDiv.innerHTML = `<img src="`+ userIcon +`" class="avatar"><span>${text}</span>`;
    messagesContainer.appendChild(userDiv);

    let botDiv = document.createElement("div");
    let botImg = document.createElement("img");
    let bottext = document.createElement("span");
    botDiv.id = "bot";
    botImg.src = botIcon;
    botImg.className = "avatar";
    botDiv.className = "bot response";
    bottext.innerText = "...";
    botDiv.appendChild(bottext);
    botDiv.appendChild(botImg);
    messagesContainer.appendChild(botDiv);
    messagesContainer.scrollTop = messagesContainer.scrollHeight - messagesContainer.clientHeight;


    setTimeout(() => {
      bottext.innerText = `${product}`;
    },2000
    )

  }
        
        return (
      <div id="container" className="container">
        <div id="chat" className="chat">
          <div id="messages" className="messages"></div>
          <input id="input" type="text" placeholder="Say something..." autoComplete="off" autoFocus={true} />
        </div>
      </div>
        );
};

export default reactchatbot;

感谢您的时间！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）