How to import js module into react public folder?

Question

I have a react public folder that contains a html file and a simple js file. Then I have an src folder which is outside the public folder. When I try to import something into that js file which is outside the public folder:

import OpenIdConnect from '@luigi-project/plugin-auth-oidc';

I get the next error:

Cannot use import statement outside a module

How can I use imports into the public folder?

Answer 1

Normally this means your node project is not setup to use ES Modules by default and is instead using common JS modules.

Without modifying config, in files with this restriction, instead of:

import someVar from './filePath';

// ...

export { anotherVar };

use istead:

const someVar = require('./filePath');

// ...

module.exports = anotherVar;

If you wish to pursue a more consistent solution, I would advice reading though the Node.js documentation and any other documentation relevant to any library/framework/tooling that you use to find a suitable solution.