Cannot find module 'react-native' error when trying to use ui-kitten library with react-native-web

Bug report

Describe the bug

A clear and concise description of what the bug is. Apologies if this is not the right place to post this, but I have seen a similar issue posted on the Expo Github, so I figured I would post it on the framework in question. In short, the issue is that I can’t get the UI-Kitten library to work with NextJS using react-native-web (the latter working fine without UI-Kitten). When creating a project based on with-react-native-web, and installing the dependencies, yarn add @ui-kitten/components@next @eva-design/eva@next react-native-svg, I get the following error when trying to use the library:

Error: Cannot find module 'react-native'
Require stack:
- /Users/andersravn/plantjammer/ui-kitten/node_modules/@ui-kitten/components/theme/modal/modalPanel.component.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/@ui-kitten/components/theme/application/applicationProvider.component.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/@ui-kitten/components/theme/index.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/@ui-kitten/components/index.js
- /Users/andersravn/plantjammer/ui-kitten/.next/server/static/development/pages/index.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/next-server/server/require.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/next-server/server/load-components.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/next-server/server/api-utils.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/next-server/server/next-server.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/server/next.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/server/lib/start-server.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/cli/next-dev.js
- /Users/andersravn/plantjammer/ui-kitten/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/andersravn/plantjammer/ui-kitten/node_modules/@ui-kitten/components/theme/modal/modalPanel.component.js:12:24)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/andersravn/plantjammer/ui-kitten/node_modules/@ui-kitten/components/theme/application/applicationProvider.component.js:15:32)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)

To Reproduce

I have made a repo to reproduce the error: https://github.com/andersravn/ui-kitten-nextjs.

Expected behavior

NextJS, with webpack/babel configuration, parses react-native imports as react-native-web in order to use the ui-kitten library.

System information

• OS: macOS
• Browser chrome
• Version of Next.js: latest
• Version of Node.js: 12.7.0

Additional context

Using the same libraries, react-native-web and ui-kitten, with create-react-app works as expected, so that’s why I’m guessing it’s something to do with the way NextJS parses the library files? I know very little about babel and webpack, but from reading here, it seems to have something to do with this.

Thanks for a great product.

[RWOverdijk]

I found the cause. It’s because ui-kitten hasn’t been transpiled yet. I also found a fix. I don’t know if it’s a workaround or a solution but this appears to be working for me.

1. Install these deps:

npm i --save next-compose-plugins next-transpile-modules

1. Update next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['@ui-kitten/components', 'react-native-svg']);

module.exports = withPlugins([withTM], {
  webpack: config => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    return config
  },
});

From what I’ve seen you’ll have to add all modules that need to be transpiled to the array. It gets a bit slower though, but it’s not by a whole lot.

[artyorsh]

@RWOverdijk yes, it should. We can’t allow js for multiple reasons. Please open an issue in our repo if you still have questions on it