webpack - CRA Rewired with multiple entries problem in dev - Uncaught SyntaxError: Unexpected token '<'

Question

I'm creating an Electron app who will use 2 or more entries to create many Electron windows.

For now, I have my main window and a licensing window.

The strangest thing about this problem is when I build the project, everything is fine, but when it's in dev, all my pages give me this error Uncaught SyntaxError: Unexpected token '<' on each js chunk.

Screenshot of the errors in the Electron browser

This is my config-overrides.js file:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const multipleEntry = require('react-app-rewire-multiple-entry')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const fs = require('fs')
const path = require('path')

module.exports = {
  webpack: function override(config, env) {
    // New config, e.g. config.plugins.push...
    config.resolve.plugins = config.resolve.plugins.filter(
      (plugin) => !(plugin instanceof ModuleScopePlugin),
    )
    config.target = 'electron-renderer'
    config.entry = {
      main: config.entry,
      licensing: path.resolve(__dirname, 'src', 'licensing.js'),
    }
    config.output.filename =  "static/js/[name].js"

    config.resolve.modules = ['node_modules']
    config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom'),
      '@setproduct-ui': path.resolve('./private_modules/@setproduct-ui'),
    }

    config.module.rules.push({
      test: /.(jsx|js)$/,
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'private_modules'),
      ],
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: 'defaults',
                },
              ],
              '@babel/preset-react',
            ],
          },
        },
      ],
    })
  
    config.plugins.push(
      new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, 'build', 'main.html'),
        template: path.resolve(__dirname, 'public', 'index.html'),
        chunks: ['main']
      }),
      new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, 'build', 'licensing.html'),
        template: path.resolve(__dirname, 'public', 'index.html'),
        chunks: ['licensing']
      })
    )

    fs.writeFile('webpackConfig.json', JSON.stringify(config, null, 2), function (err) {
      if (err) return console.log(err);
      console.log('webpackConfig');
    });

    return config
  }
}

My BrowserWindows loads their HTML like this:

mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000/main.html'
      : `file://${path.join(__dirname, '../build/main.html')}`,
  )

I tried to add the html-loader and it didn't changed a thing.

Like you can see in the bottom of the config-overrides.js I put a file creation to output the webpack config from CRA and look in it to get some clues.

In the file I found this object and I tried to duplicate it for both entries and it didn't worked as well as the 2 HtmlWebpackPlugin.

{
      "options": {
        "template": "C:\Users\mikaelboutin\Desktop\recon\public\index.html",
        "templateContent": false,
        "filename": "index.html",
        "publicPath": "auto",
        "hash": false,
        "inject": true,
        "scriptLoading": "blocking",
        "compile": true,
        "favicon": false,
        "minify": "auto",
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "base": false,
        "title": "Webpack App",
        "xhtml": false
      },
      "version": 4
    },

I tried many many things but now I lack of new ideas to make it work. Can someone help me on this?

Thanks in advance

question from:https://stackoverflow.com/questions/65928635/cra-rewired-with-multiple-entries-problem-in-dev-uncaught-syntaxerror-unexpec

Answer 1

Waitting for answers