I am trying to create a npm package for a single .tsx component however When I run wepback I keep getting this error:
ERROR in ./src/Chatbot.tsx 184:20
Module parse failed: Unexpected token (184:20)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| });
| };
> return !show ? (<button className={"".concat(css.chatbotToggler)} onClick={handleOpen}>
| <span className={"".concat(!showIcon ? css.none : css.notificationIcon)}>
| <span className={"".concat(css.exclamation)}>!</span>
@ ./src/index.ts 1:0-26 1:0-26
I have tried adding css loaders to my wepback.config.js as well:
const path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.ts",
output: {
path: path.resolve("build"),
filename: "index.js",
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".css"],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react"],
},
},
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
},
},
],
},
],
},
externals: {
react: "react",
},
};
The only Issues I can think of is that I am using a ternary to return two different states and maybe this is confusing it? Other that that I think perhaps the issue could be that I am using css modules and The loader doesn't match?
