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!

You cant import json files like normal js files or npm modules. Use fs instead — Artur P., Mar 23 '18 at 03:47
@Artur is right! You need to read something before you continues to work in. https://stackoverflow.com/questions/30340005/importing-modules-using-es6-syntax-and-dynamic-path/30340066#30340066 — Francis Rodrigues, Mar 23 '18 at 03:49
To be clear it isn't just json files. I will be importing stylesheets, images and even typescript files. Will checkout out fs — SharpCode, Mar 23 '18 at 03:52
Hmmm this is still so confusing. I am thinking I can set up alias but the idea is in the react app I need to change the import. Would a conditional be fine? — SharpCode, Mar 23 '18 at 04:30
hmm conditional won't work as import can not be used inside them apparently — SharpCode, Mar 23 '18 at 05:47

SharpCode · Accepted Answer · 2018-04-03T01:49:23.627

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

inject-css which uses Sparkys file api to replace //css with the relevant import statement
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.

React import based on node variable

1 Answers1