What loader I need for JSX compile? - reactjs

Question

Hi I am new doing webpackconfig for compile my react js component and I am triying to compile it for publish in npm(I am unsing react I started using jsc classes etc but always the same error, so I translate to js, but again the same error :/ I'm lost) :
my babelrc:
{
"presets": ["es2015", "react"]
}
my package.json:
{
"name": "react-chat-bot42",
"version": "0.6.7",
"private": false,
"description": "An ES6 npm module Chat Bot!",
"main": "dist/index.js",
"scripts": {
"build": "babel src -d dist",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Iñigo Romero",
"license": "MIT",
"keywords": [
"Chabot",
"react"
],
"dependencies": {
"#babel/plugin-syntax-jsx": "^7.12.13",
"#babel/preset-react": "^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",
"webpack": "^4.29.6"
},
"devDependencies": {
"#babel/core": "^7.12.13",
"#babel/preset-env": "^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-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^5.0.2",
"html-webpack-plugin": "^5.0.0",
"webpack-cli": "^4.5.0"
},
"repository": {
"type": "git",
"url": "https://github.com/InigoRomero/npm-Chat-Bot"
}
}
my webpack.config.js:
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
}
}
The Error when I try to "webpack --mode=development" for compile:
ERROR in ./src/index.js 96:6
Module parse failed: Unexpected token (96:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| return (
> <div id="container" className="container">
| <div id="chat" className="chat">
| <div id="messages" className="messages"></div>
My source code:
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;
and IF I try the webpack with this loader:
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'
}
}
]
}
}
I got this error:
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\SapoArmado\Desktop\npm-Chat-Bot\node_modules\babel-preset-es2015\lib\index.js
Thanks for your time!

Answer 1

Does your source file have a .js or .jsx extension? If it contains JSX syntax it should be .jsx or else compiler will complain