Attempted import errors in react-native-web monorepo architecture

Question

Hi there,

I am following this article to setup a react-native + web code sharing. Here is the repo link with bare-bone monorepo setup as described in above article.

I successfully did setup bare-bone monorepo app as described in above article, than i ported my existing react-native app code to this architecture(in the components folder) and got mobile app working and everything.

I am getting some errors when i try to run web app(which used react-native-web to convert react-native to web). Its not that i was not expecting some errors, i know react-native-web is yet not that stable and not that up to date for react-native version above 0.55 and all those gotchas.

But the errors i am getting here are more related to my webpack config i think. My config-override.js file is basically the same as original one except this part(which i changed in a hope to get through the errors i will mention below):

const appIncludes = [
  resolveApp('src'),
  resolveApp('../components/src'),
  resolveApp('../../node_modules/react-navigation-deprecated-tab-navigator'),
  resolveApp('../../node_modules/react-native-color-matrix-image-filters'),
  resolveApp('../../node_modules/react-native-htmlview'),
  resolveApp('../../node_modules/react-native-loading-spinner-overlay'),
  resolveApp('../../node_modules/@react-native-community/async-storage'),
  resolveApp('../../node_modules/react-native-cookies'),
  resolveApp('../../node_modules/react-native-router-flux'),
  resolveApp('../../node_modules/react-native-actionsheet'),
  resolveApp('../../node_modules/react-native-autocomplete-input'),
  resolveApp('../../node_modules/react-native-circular-progress'),
  resolveApp('../../node_modules/react-native-google-places-autocomplete'),
  resolveApp('../../node_modules/react-native-image-progress'),
  resolveApp('../../node_modules/react-native-image-zoom-viewer'),
  resolveApp('../../node_modules/react-native-image-pan-zoom'),
  resolveApp('../../node_modules/react-native-keyboard-aware-scroll-view'),
  resolveApp('../../node_modules/react-native-linear-gradient'),
  resolveApp('../../node_modules/react-native-permissions'),
  resolveApp('../../node_modules/react-native-phone-input'),
  resolveApp('../../node_modules/react-native-picker-select'),
  resolveApp('../../node_modules/react-native-progress'),
  resolveApp('../../node_modules/react-native-push-notification'),
  resolveApp('../../node_modules/react-native-snap-carousel'),
  resolveApp('../../node_modules/react-native-svg'),
  resolveApp('../../node_modules/react-native-tab-view'),
  resolveApp('../../node_modules/react-navigation-drawer'),
  resolveApp('../../node_modules/react-navigation-stack'),
  resolveApp('../../node_modules/react-native-screens'),
  resolveApp('../../node_modules/react-navigation-tabs'),
  resolveApp('../../node_modules/@react-navigation'),
  resolveApp('../../node_modules/react-native-router-flux'),
  resolveApp('../../node_modules/react-native-gesture-handler'),
  resolveApp('../../node_modules/react-navigation'),
]

Couple or errors i am getting on yarn workspace web start are:

import {
    Grayscale
} from 'react-native-color-matrix-image-filters';

It gives:

Attempted import error: 'Grayscale' is not exported from 'react-native-color-matrix-image-filters'.

If i just remove this import and its use, i than get:

Attempted import error: 'react-native-cookies' does not contain a default export (imported as 'CookieManager').

On:

import CookieManager from 'react-native-cookies';

While playing around, i also got:

...../node_modules/react-native-router-flux/src/navigationStore.js
Attempted import error: 'TabBarBottom' is not exported from 'react-navigation-deprecated-tab-navigator' (imported as 'DEPRECATED_TabBarBottom').

I am pretty sure this is something wrong with my webpack/babel config(config-override.js file). And i certainly know i will get more errors after resolving these. And this setup might end up not working at all for us. But it worths a try and i must be able to get through these errors with your help.

Thanks.

Answer 1

I was able to get past this error by adding: config.module.strictExportPresence = false in the config-override.js

Now i am stuck on further issues.

Original issue in the question is gone by this. I will post with any other related updates if i have any.