I am setting up my ReactApp and just finished with it. So I wanted to make a settings class in a appsettings.ts file. So I can change some global variables easier.
But then all my issues started.
I know this problem is very common and there are tons of answers available but none of them have worked for me so far. I have searched through the internet to solve it but it still shows the same error.
This is the error I am getting:
ERROR in ../../../appsettings.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: [APP_DIR]\appsettings.ts: Unexpected token (2:11)
1 | export class APPSETTINGS {
> 2 | public static EMAIL_SENDER: string = "name@example.com";
| ^
3 | public static EMAIL_RECIPIENT: string = "name@example.com";
4 | public static YEAR: number = (new Date()).getFullYear();
5 | }
at instantiate ([APP_DIR]\node_modules\@babel\parser\lib\index.js:67:32)
at constructor ([APP_DIR]\node_modules\@babel\parser\lib\index.js:364:12)
at Parser.raise ([APP_DIR]\node_modules\@babel\parser\lib\index.js:3364:19)
at Parser.unexpected ([APP_DIR]\node_modules\@babel\parser\lib\index.js:3397:16)
at Parser.parseClassMemberWithIsStatic ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13888:12)
at Parser.parseClassMember ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13773:10)
at [APP_DIR]\node_modules\@babel\parser\lib\index.js:13715:14
at Parser.withSmartMixTopicForbiddingContext ([APP_DIR]\node_modules\@babel\parser\lib\index.js:12617:14)
at Parser.parseClassBody ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13694:10)
at Parser.parseClass ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13669:22)
at Parser.parseExportDeclaration ([APP_DIR]\node_modules\@babel\parser\lib\index.js:14178:25)
at Parser.maybeParseExportDeclaration ([APP_DIR]\node_modules\@babel\parser\lib\index.js:14135:31)
at Parser.parseExport ([APP_DIR]\node_modules\@babel\parser\lib\index.js:14058:29)
at Parser.parseStatementContent ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13020:27)
at Parser.parseStatement ([APP_DIR]\node_modules\@babel\parser\lib\index.js:12917:17)
at Parser.parseBlockOrModuleBlockBody ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13497:25)
at Parser.parseBlockBody ([APP_DIR]\node_modules\@babel\parser\lib\index.js:13489:10)
at Parser.parseProgram ([APP_DIR]\node_modules\@babel\parser\lib\index.js:12832:10)
at Parser.parseTopLevel ([APP_DIR]\node_modules\@babel\parser\lib\index.js:12822:25)
at Parser.parse ([APP_DIR]\node_modules\@babel\parser\lib\index.js:14674:10)
at parse ([APP_DIR]\node_modules\@babel\parser\lib\index.js:14716:38)
at parser ([APP_DIR]\node_modules\@babel\core\lib\parser\index.js:41:34)
at parser.next (<anonymous>)
at normalizeFile ([APP_DIR]\node_modules\@babel\core\lib\transformation\normalize-file.js:66:38)
at normalizeFile.next (<anonymous>)
at run ([APP_DIR]\node_modules\@babel\core\lib\transformation\index.js:21:50)
at run.next (<anonymous>)
at transform ([APP_DIR]\node_modules\@babel\core\lib\transform.js:22:41)
at transform.next (<anonymous>)
at step ([APP_DIR]\node_modules\gensync\index.js:261:32)
at [APP_DIR]\node_modules\gensync\index.js:273:13
at async.call.result.err.err ([APP_DIR]\node_modules\gensync\index.js:223:11)
@ ./src/Page/Main/index.tsx 24:0-60 204:60-76 298:42-58
@ ./src/App.tsx 5:0-31 14:38-42
@ ./src/index.tsx 3:0-24 4:50-53
webpack 5.75.0 compiled with 1 error in 4752 ms
I got this error after I imported APPSETTINGS into my react app. If I delete the usage, then everything compiles fine, but with it, it just gives me this error
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotenv = require('dotenv');
const CopyPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv.development === true;
const isEnvProduction = webpackEnv.production === true;
return {
target: 'web',
watch: isEnvDevelopment,
mode: isEnvProduction ? 'production' : 'development',
entry: "./src/index.tsx",
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/",
filename: isEnvProduction ? '[id].[hash].js' : '[name].bundle.js',
chunkFilename: isEnvProduction ? '[id].[hash].[chunkhash].chunk.js' : '[name].chunk.js',
},
devtool: isEnvDevelopment ? "source-map" : false,
devServer: {
compress: true,
port: 9000,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
https: true
},
historyApiFallback: true
},
resolve: {
mainFields: ['browser', 'main', 'module'],
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
// we use babel-loader to load our jsx and tsx files
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
"@babel/preset-env"
]
}
},
},
{
test: /\.(css|scss)$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: isEnvProduction ? '[sha512:contenthash:base64]' : '[sha1:contenthash:hex:5]_____[local]'
},
importLoaders: 2,
sourceMap: isEnvDevelopment,
}
},
{
loader: "resolve-url-loader",
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(eot|otf|webp|ttf|woff|woff2|jpe?g|png|gif|svg)$/,
type: 'asset/resource'
},
{
test: /\.(pdf)(\?.*)?$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "binary",
publicPath: "/binary"
}
},
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: isEnvProduction ? '[id].[hash].css' : '[name].bundle.css',
}),
new HtmlWebpackPlugin(),
new CopyPlugin({
patterns: [
{ from: 'src/static', to: '.' },
],
}),
new Dotenv({
path: isEnvProduction ? path.join(__dirname, "./.env.automated") : path.join(__dirname, "./.env")
}),
]
}
};
package.json
{
"name": "react-webapp",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"dev": "webpack serve --env development",
"build": "webpack --env production"
},
"author": "",
"license": "ISC",
"dependencies": {
"@aws-amplify/api": "^4.0.18",
"@aws-amplify/api-graphql": "^2.2.7",
"@aws-amplify/auth": "^4.3.8",
"@aws-amplify/cache": "^4.0.20",
"@aws-amplify/core": "^4.3.0",
"aws-amplify": "^4.3.0",
"classnames": "^2.3.1",
"detect-browser": "^5.2.1",
"dotenv-webpack": "^7.0.3",
"graphql-tag": "^2.12.5",
"ibantools": "^4.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading": "^2.0.3",
"react-router-dom": "^5.3.0",
"regenerator-runtime": "^0.13.9"
},
"devDependencies": {
"@babel/core": "^7.20.2",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/react": "^17.0.26",
"@types/react-dom": "^17.0.9",
"babel-loader": "^8.3.0",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.3.0",
"dotenv": "^10.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.3.0",
"node-sass": "^6.0.1",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.1.0",
"typescript": "^4.4.3",
"typescript-plugin-css-modules": "^3.4.0",
"webpack": "^5.75.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
}
}
You've installed @babel/preset-typescript but it's not added to the loader presets.
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
"@babel/preset-typescript"
"@babel/preset-env",
]
}
},
},
You may need to tweak the settings.