Reactjs - Uncaught SyntaxError: Unexpected token <

Question

i create the reactjs app, test and compile it with webpack, it is fully functional and every thing is okay, once i need to make a production build it compiled successfully and dist folder created, now i copy the files in apache path, when the browse website i got this error :

Uncaught SyntaxError: Unexpected token <

This is my .htaccess file :

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Options -MultiViews
RewriteRule ^ index.html [QSA,L]

this is my .bablerc file

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "last 2 versions",
            "safari >= 7"
          ]
        }
      }
    ],
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/syntax-dynamic-import",
    "@babel/transform-runtime",
    "@babel/plugin-transform-react-jsx",
    "babel-plugin-transform-class-properties"
  ]
}

this is my package.json

{
  "name": "Test",
  "version": "1.0.0",
  "description": "My Test Project",
  "homepage": "/",
  "scripts": {
    "start": "webpack-dev-server --inline --history-api-fallback --progress --config webpack/dev.js",
    "build": "webpack --config webpack/prod.js --progress "
  },
  "keywords": [
    "reactjs"
  ],
  "author": "Author",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "babel-plugin-react-transform": "^3.0.0",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.1.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "sass-loader": "^7.3.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0",
    "webpack-filter-warnings-plugin": "^1.2.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/runtime": "^7.5.5",
    "@types/googlemaps": "^3.37.5",
    "@types/markerclustererplus": "^2.1.33",
    "@types/react": "^16.9.2",
    "availity-reactstrap-validation": "^2.6.0",
    "axios": "^0.19.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "base-64": "^0.1.0",
    "blob-to-base64": "^1.0.2",
    "chart.js": "^2.7.2",
    "chartjs-plugin-datalabels": "^0.3.0",
    "classnames": "2.2.6",
    "cors": "^2.8.5",
    "device-uuid": "^1.0.4",
    "draft-js": "^0.10.5",
    "firebase": "^5.3.0",
    "formik": "^1.5.8",
    "ip": "^1.1.5",
    "js-base64": "^2.5.1",
    "lodash": "^4.17.15",
    "match-sorter": "^4.0.1",
    "md5": "^2.2.1",
    "moment": "2.22.2",
    "moment-jalaali": "^0.8.3",
    "node-machine-id": "^1.1.12",
    "rc-slider": "^8.6.13",
    "rc-switch": "^1.6.0",
    "react": "^16.9.0",
    "react-advance-jalaali-datepicker": "^1.2.2",
    "react-autosuggest": "^9.3.4",
    "react-barcode-reader": "0.0.1",
    "react-big-calendar": "^0.20.3",
    "react-chartjs-2": "^2.7.4",
    "react-circular-progressbar": "^1.0.0",
    "react-contextmenu": "^2.9.4",
    "react-datepicker": "^1.5.0",
    "react-datepicker2": "^3.0.3",
    "react-device-detect": "^1.7.5",
    "react-dom": "^16.9.0",
    "react-dropzone-component": "^3.2.0",
    "react-file-base64": "^1.0.3",
    "react-google-maps": "^9.4.5",
    "react-headroom": "^2.2.4",
    "react-image-file-resizer": "^0.2.0",
    "react-intl": "2.4.0",
    "react-lines-ellipsis": "^0.13.2",
    "react-loadable": "5.4.0",
    "react-mousetrap": "^0.2.0",
    "react-perfect-scrollbar": "^1.5.3",
    "react-persian-datepicker": "^3.0.2",
    "react-polyfills": "0.0.1",
    "react-quill": "^1.3.1",
    "react-rater": "^5.1.0",
    "react-redux": "5.0.7",
    "react-rounded-image": "^2.0.2",
    "react-router-dom": "^4.2.2",
    "react-scroll-to-component": "^1.0.2",
    "react-select": "^2.4.4",
    "react-sortablejs": "^1.3.6",
    "react-table": "^6.10.0",
    "react-tagsinput": "^3.19.0",
    "react-transition-group": "^1.2.0",
    "react-yandex-maps": "^3.1.0",
    "reactstrap": "^6.5.0",
    "redux": "4.0.0",
    "redux-saga": "^0.16.0",
    "sortablejs": "^1.6.1",
    "utf8": "^3.0.0",
    "uuid": "^3.3.3",
    "video.js": "^7.6.0",
    "yup": "^0.27.0"
  }
}

This is my base.js (webpack common)

"use strict";
const path = require('path');
const fs = require('fs');

const publicPath = '/';
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);


const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  entry: {
    index: ['./src/index.js']
},
  output: {
    path: resolveApp('dist'),
    filename: 'assets/js/[name].[hash:4].js',
    chunkFilename: 'assets/js/[name].[hash:4].chunk.js',
    publicPath: publicPath,
    // hotUpdateChunkFilename: 'hot/hot-update.js',
    // hotUpdateMainFilename: 'hot/hot-update.json'
},

  resolve: {
    alias: {
      Components: path.resolve(__dirname, '../src/components/'),
      Brisky: path.resolve(__dirname, '../src/brisky_components/'),
      Containers: path.resolve(__dirname, '../src/containers/'),
      Assets: path.resolve(__dirname, '../src/assets/'),
      Util: path.resolve(__dirname, '../src/util/'),
      Routes: path.resolve(__dirname, '../src/routes/'),
      Constants: path.resolve(__dirname, '../src/constants/'),
      Redux: path.resolve(__dirname, '../src/redux/'),
      Data: path.resolve(__dirname, '../src/data/')
    }
  },
  module: {
    rules: [
      {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,


          use: {
              loader: "babel-loader",
              options: {
                   presets: ["@babel/preset-env"]
                }
          }
      },

    ]
  },

  plugins: [

    new CopyWebpackPlugin([
      {from:'src/assets/img',to:'assets/img'},
      {from:'src/assets/fonts',to:'assets/fonts'}
  ]),

  new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
      favicon: './public/favicon.ico'
  }),
  ]
};

This is my prod.js (production config)

'use strict'
const path = require('path');
const fs = require('fs');


const merge = require('webpack-merge')
const baseConfig = require('./base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');


let pathsToClean = [
  'dist'
]

let cleanOptions = {
  root: __dirname,
  verbose: false, // Write logs to console.
  dry: false
}

module.exports = merge(baseConfig, {
  mode: 'production',

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      // Scss compiler
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader?indentedSyntax"
        ]
      }
    ]
  },
  performance: {
    hints: "warning"
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    new MiniCssExtractPlugin({
      filename: "assets/css/[name].[hash:4].css"
    }),
    new FilterWarningsPlugin({
      exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
    })
  ]
})

after copying the dist folder i expected it work as web page without error

Answer 1

I did moudule config in my base.js.

after many tries i can find the point, it is related to apache server configuration.

the htaccess file should be like this :

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

and in apache2.conf i should point the working directory directly to the source html files like this (the contents of dist folder copied in "/var/www/html/")

<Directory /var/www/html/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride all
        Require all granted
        Order allow,deny
        allow from all
</Directory>

Answer 2

You did not provide any error context or stack trace, so I will need to guess: "@babel/react" preset is probably omitted during the build, so JSX hasn't been transpiled to valid JavaScript syntax.

Reason is: You included babel config twice - once in base.js config under babel-loader options, once in .babelrc. In this case options takes precedence and .babelrc is omitted.

I assume here, that .babelrc is the "complete" config, so remove options entry and update your Webpack module config:

rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  }
];