React-app-rewired: Specifying a different entry point (instead of index.js)

[Tobbe]

The readme has a section about overriding the entry point for the react app. Point 3 states

Override the react-dev-utils/checkRequiredFiles function to always return true (causing create-react-app to no longer try to enforce that the entry file must exist).

I did that, and that made the start script work. But instead I get this error

multi ./node_modules/react-scripts/config/polyfills.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js
Module not found: Can't resolve 'C:Users[path]srcindex.js' in 'C:Users[path]'

[Tobbe]

Solved it by setting config.entry[2] = 'FULL_PATH_TO_ENTRY_POINT'; in the regular override function :)

[Tobbe]

So I ended up replacing the path to appIndexJs instead of killing the checkRequiredFiles function.

This is the relevant part of my config-overrides.js

const originalPaths =
    require.cache[
        require.resolve(`${paths.scriptVersion}/config/paths.js`)
    ];

Object.assign(originalPaths.exports, {
    appIndexJs: 'src/index.jsx',
});

config.entry[2] = `${config.entry[2]}x`;

[Tobbe]

Unfortunately this isn't fully resolved yet :( Just realized it doesn't work for production builds. npm run build still wants the file to be named just index.js

> react-app-rewired build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'C:\Users[path]\src\index.js' in 'C:\Users[path]'

[Tobbe]

When building for deployment (npm run build) it turns out the same entry points aren't defined as when building for test (npm start). So I had to make the changing of entry points a little bit more flexible. It now looks like this:

config.entry = config.entry.map(entry => {
    if (entry.slice(-8) === 'index.js') {
        return `${entry}x`;
    }

    return entry;
});

With that change I can now create a deploy ready build :)

[benedictjohannes]

I successfully workaround this using dynamic import and React lazy loading of main component, might want to see in this gist

This way, while the entry point is still the unswitchable index.js, main component loaded by it can still be switched using environment variable.