javascript - Conditional imports in React Native

Question

I'm having a bit of trouble getting conditional imports working in react native.

I have some files that are used in a react web app and in react native.

What I'd like:

if(process.env.REACT_PLATFORM === 'WEB') {
    import('some_file').then(({someFunc})=> someFunc())
}

Because 'some_file' imports react_router.

However, this import is still happening, and the RN metro bundler throws

UnableToResolveError: Unable to resolve module 'react-router' from 'some_file'.

Even If I replace it as:

if(false) {
    import('some_file').then(({someFunc})=> someFunc())
}

It still trys to load some_file. Is there anyway to only import/require this file if a condition is met?

Cheers!

EDIT: Things I've tried:

• Require instead of import.
• https://babeljs.io/docs/plugins/syntax-dynamic-import/

Answer 1

Platform specific imports;

You can place the import in a component with the native.js extension and it will only be bundled for mobile (ios/android). e.g. MyComponent.native.js Then you have a component for web with the same name but the .js extension. e.g. My Component.js

When you import MyComponent from './components/MyComponent', the correct one will be imported and the other ignored.