I was getting this error when I was trying to deploy my app in AWS linux ec2 server.
Module parse failed: Unexpected token
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.
| const container = document.getElementById('root');
| const root = createRoot(container);
> root.render(<Provider store={store}>
| <App />
| </Provider>);
webpack 5.73.0 compiled with 1 error in 4284 ms
The tsconfig.json wasn't reading any React. After setting up webpack and tsconfig I was still missing I think 2 lines of code in the tsconfig file
"jsx": "react-jsx"
And this in webpack
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: { allowTsInNodeModules: true }
}
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"baseUrl": "./",
"outDir": "./build",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"suppressImplicitAnyIndexErrors": true,
"importHelpers": true,
"noImplicitAny": true,
"removeComments": true,
"module": "es6",
"preserveConstEnums": true,
"jsx": "react-jsx"
},
"include": ["src/**/*"],
"exclude": ["build", "scripts"]
}
That fixed the error. I still need to optimize webpack and the devtool is killing the build process so, I had to take it out.
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
// watch: true,
mode: "production",
entry: "./src/index.tsx",
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'build')
},
optimization: {
chunkIds: 'named',
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
},
}),
new CssMinimizerPlugin(),
],
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'), // template file
filename: 'index.html', // output file
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', "@babel/preset-react"]
}
}
},
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer', {
overrideBrowserslist: ['last 3 versions', 'ie >9']
},
],
],
},
},
},
],
},
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"autoprefixer",
{
overrideBrowserslist: ['last 3 versions', 'ie >9']
},
],
],
},
},
},
'sass-loader'
],
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
use: ['file-loader']
},
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: { allowTsInNodeModules: true }
}
]
},
resolve: {
extensions: ["*",".ts", ".tsx", ".js", "jsx"]
},
}
Top comments (0)