how to solve errors when running webpack? - asp.net

Question

webpack problem became an error because of the typecript (ts and tsx) I changed it to javascript (js and jsx). the original code is the typescript I took from Github
Image webpack error
file webpack.config.js
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var releaseConfig = require("./webpack.config.release");
var isProductionEnvironment =
process.env.ASPNETCORE_ENVIRONMENT === "Production";
var path = require("path");
var merge = require("extendify")({ isDeep: true, arrays: "replace" });
var config = {
mode: "development",
entry: {
main: path.join(__dirname, "boot.jsx")
},
output: {
path: path.join(__dirname, "../api/", "wwwroot"),
filename: "[name].js",
publicPath: "/"
},
resolve: {
extensions: [".ts", ".tsx", ".jsx", ".js", ".styl", ".css"]
},
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
camelCase: true,
importLoaders: 2,
sourceMap: false,
localIdentName: "[local]___[hash:base64:5]"
}
},
{
loader: "stylus-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{ test: /\.css/, loader: "style-loader!css-loader" },
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
}
]
},
devtool: "inline-source-map",
plugins: [
// plugins should not be empty: https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices'[
new HtmlWebpackPlugin({
template: path.join(__dirname, "index.ejs"),
inject: true
})
// new webpack.NamedModulesPlugin()
// We do not use ExtractTextPlugin in development mode so that HMR will work with styles
]
};
if (isProductionEnvironment) {
// Merge production config
config = merge(config, releaseConfig);
}
module.exports = config;
and file webpack.config.relase.js
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
var config = {
mode: "production",
module: {
rules: [
// Use react-hot for HMR and then ts-loader to transpile TS (pass path to tsconfig because it is not in root (cwd) path)
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use:
"css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!stylus-loader"
})
},
{
test: /\.css/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
devtool: "",
externals: {
react: "React",
"react-dom": "ReactDOM"
},
plugins: [
new HtmlWebpackPlugin({
release: true,
template: path.join(__dirname, "index.ejs"),
useCdn: true,
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new ExtractTextPlugin("styles.css")
]
};
file package.json
{
"name": "aspnet.core.react.template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"postinstall": "dotnet restore ./api && dotnet restore ./api.test",
"build": "dotnet build ./api",
"test:api": "cd ./api.test && dotnet test",
"pretest:client": "npx tsc -p ./client-react.test/",
"test:client": "mocha --require ignore-styles --recursive client-react.test/build/client-react.test",
"test": "npm run test:api && npm run test:client",
"migrate": "cd ./api/ && node ../scripts/create-migration.js && dotnet ef database update",
"prestart": "docker-compose up -d",
"start": "cd ./api && cross-env NODE_PATH=../node_modules/ ASPNETCORE_ENVIRONMENT=Development dotnet watch run",
"start:release": "npm run prerelease && cd ./api/bin/Release/netcoreapp2.1/publish/ && dotnet api.dll",
"provision:prod": "ansible-playbook -l production -i ./ops/config.yml ./ops/provision.yml",
"prerelease": "cross-env ASPNETCORE_ENVIRONMENT=Production webpack --config ./client-react/webpack.config.js && cd ./api && dotnet publish --configuration Release",
"deploy:prod": "npm run prerelease && ansible-playbook -l production -i ./ops/config.yml ./ops/deploy.yml",
"ssh:prod": "ssh `grep 'deploy_user=' ./ops/hosts | tail -n1 | awk -F'=' '{ print $2}'`#`awk 'f{print;f=0} /[production]/{f=1}' ./ops/hosts | head -n 1`"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.41.2"
},
"dependencies": {
"#babel/core": "^7.7.2",
"#types/chai": "^4.1.7",
"#types/enzyme": "^3.9.1",
"#types/enzyme-adapter-react-16": "^1.0.5",
"#types/jsdom": "^12.2.3",
"#types/mocha": "^5.2.6",
"#types/react": "^16.8.10",
"#types/react-addons-test-utils": "^0.14.24",
"#types/react-dom": "^16.8.3",
"#types/react-router-dom": "^4.3.1",
"#types/sinon": "7.0.10",
"aspnet-webpack": "^3.0.0",
"aspnet-webpack-react": "^4.0.0",
"bootstrap": "4.3.1",
"chai": "^4.2.0",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"dom": "^0.0.3",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"extendify": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^3.0.1",
"global": "^4.3.2",
"html-webpack-plugin": "^3.2.0",
"ignore-styles": "^5.0.1",
"jsdom": "^14.0.0",
"mocha": "^6.0.2",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.8.5",
"react-hot-loader": "^4.8.0",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"sinon": "7.3.1",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^5.3.3",
"typescript": "^3.3.4000",
"url-loader": "^1.1.2",
"webpack-dev-middleware": "^3.6.1",
"webpack-hot-middleware": "^2.24.3",
"whatwg-fetch": "^3.0.0"
}
}
how to resolve the error, I beg for your help ... because I don't know much about reactjs with .net core?