React import based on node variable

Question

I am trying to figure this out an have not found anything helpful yet.

The idea is that in certain components or files I need to import a specific file based on the node variable.

Some example scripts that will be run include: USER=test yarn run build //or USER=test yarn run serve

Now depending on the USER variable I need to do imports like import `~/users/${process.env.USER}/config.json`;

This obviously doesn't worked and I am confused on how to get this to work. Surely there is a way to base imports on a node variable and then import from different folders and files based on that. Any help or links would be greatly appreciated!

Answer 1

So a workaround as it needs to be based on a node variable was to use FuseBox Sparky task runner and file Api to edit/replace in the App.tsx folder and include the appropriate stylesheet.

Still need to write a task to undo the edit after build or dev server has been closed.

Will leave question open for now and hopefully a cleaner solution is given otherwise I'll post more info and close it once I am done with this task :)

Edit (More info)

So created two sparky jobs

1. inject-css which uses Sparkys file api to replace //css with the relevant import statement
2. remove-css task that replaces the import statement with //css once we are done.

So the first one is the following:

Sparky.task('inject-css', async (context: SparkyContext) =>
{
    await Sparky
        .src('./src/~/App.tsx')
        .file('*',  (file: SparkyFile) =>
        {
            file.read();
            file.setContent(
                `${file.contents}`.replace(
                    '//css',
                    `import '~/user${context.user}/styles/site.scss';`
                )
            );
            file.save();
        })
        .exec();
}); 

and the second job is the same but with replace parameters reversed pretty much and it is called when the process exits. Having some issues with this part still but the idea is once the process is closed by either calling process.exit() or ctrl+c (on a Mac) then we remove the css import statement.

// ctrl + c event
process.on('SIGINT', () => {
    Sparky.exec('remove-css');
});

// process.exit called
process.on('exit', () => {
    Sparky.exec('remove-css');
});

// uncaught exception
process.on('uncaughtException', () => {
    Sparky.exec('remove-css');
});

Will update when I figure out why my build is having issues with the remove-css task.