React SyntaxError：意外的标记“<”

Question

29.12.2022 UPDT:

When I visit all routes of initial nesting(such as / or /company or /users and so) my bundle.js comes from /static/js/bundle.js , it contains js and all is fine. But when I visit pages with more route nesting by entering it's url or refreshing page being on them it gives me error, cuz bundle.js now comes not from /static/js/bundle.js but for example from /company/static/js/bundle.js and it contains html. So error occurs

[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (bundle.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (vendors~main.chunk.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (main.chunk.js:1)

So it seems like i have to change webpack configuration to give /static/js/bundle.js on every request no matter what nesting, but i can't get where i should change that

This is my config-overrides.js file:

const path = require("path");
// const TerserPlugin = require("terser-webpack-plugin");
const { DefinePlugin } = require("webpack");
const rewireSvgSpriteLoader = require("react-app-rewired-svg-sprite-loader");
// const webpack = require("react-app-rewired");
// const { devServer } = require('react-app-rewired/config-overrides')

module.exports = {
   webpack: function override(config, env) {
      config.resolve = {
         ...config.resolve,
         alias: {
            ...config.alias,
            "@components": path.resolve(__dirname, "src/components"),
            "@pages": path.resolve(__dirname, "src/pages"),
            "@hooks": path.resolve(__dirname, "src/hooks"),
            "@mock": path.resolve(__dirname, "src/mock"),
            "@scss": path.resolve(__dirname, "src/scss"),
            "@services": path.resolve(__dirname, "src/services"),
            "@store": path.resolve(__dirname, "src/store"),
            "@interfaces": path.resolve(__dirname, "src/types"),
            "@utils": path.resolve(__dirname, "src/utils"),
            "@ui": path.resolve(__dirname, "src/ui"),
            "@modals": path.resolve(__dirname, "src/modals"),
            "@assets": path.resolve(__dirname, "src/assets"),
            "@http": path.resolve(__dirname, "src/http"),
         },
      };
      config.module.rules = [
         ...config.module.rules,
         {
            test: /\.module\.scss$/,
            include: path.resolve(__dirname, "./src/components"),
            use: [
               {
                  loader: "sass-resources-loader",
                  options: {
                     resources: require("./src/scss/scss-resourses"),
                  },
               },
            ],
         },
      ];
      config = rewireSvgSpriteLoader(config, env);

      config.resolve.modules = [path.resolve("src")].concat(config.resolve.modules);
      config.output = {
         ...config.output,
         publicPath: "",
      };
      config.plugins = [
         ...config.plugins,
         new DefinePlugin({
            "process.env.URL": JSON.stringify(process.env.URl),
            "process.env.API_URL": JSON.stringify(process.env.API_URL),
            "process.env.EDITOR_URL": JSON.stringify(process.env.EDITOR_URL),
         }),
      ];
      return config;
   },

   devServer: function(configFunction) {
      return function(proxy, allowedHost) {
         const config = configFunction(proxy, allowedHost)

         config.historyApiFallback.disableDotRule = true
         return config
      }
   }
}

Answer 1

I think the first screenshot is not your JS file, but an error message from the server. It's included as a JS file (in place of your JS script into your main HTML) and this cause the error what you see in the console.

It could be a response to a bad HTTP call with a bad URL in your script tag. I see a strange comment after "manifest" with a possible error message "only files inside the public(...)", but since I can't see the full response, I can't tell what the problem is.

If you can, please copy the entire server response to help me figure out what is the root cause. If I had to guess it's a react router misconfiguration where your URL points out of your public folder.

Answer 2

An SPA server should return the index.html for all paths that aren't real files, so it's understandable that you'd see a HTML page for an otherwise not-found path. This is so the SPA application can do routing itself.

Right now it looks like you're probably on https://vgokna.ru/company/ , and that page attempts to load scripts from . instead of / , so https://vgokna.ru/company/static/js/... gets requested (and since it would otherwise 404, the server returns the index.html page). You'll need to make sure the HTML page attempts to load scripts (and other assets) from the server root instead of the page's directory. IOW, if you'd have

<script src="static/js/bundle.js">

you'd need

<script src="/static/js/bundle.js">

instead.

Answer 3

The issue was in this lines in config-overrides.js

config.output = {
     ...config.output,
     publicPath: "",
};

I had to change public path because path of static files of js( /static/bundle.js ) was conflicting with public path of react(/static/images/**.png etc), so i couldn't get js properly