web-nextjs build bug

[a-r-db]

git clone https://github.com/brunolemos/react-native-web-monorepo.git
cd react-native-web-monorepo
yarn
yarn workspace web-nextjs build

Failed to compile.

../components\src\App.tsx:3:3
Type error: Module '"react-native"' has no exported member 'SafeAreaView'.

  1 | import React from 'react'
  2 | import {
> 3 |   SafeAreaView,
    |   ^
  4 |   ScrollView,
  5 |   StatusBar,
  6 |   StyleSheet,
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1

[a-r-db]

I'm trying to resolve this bug myself for the sake of the electron implementation.

My group hasn't decided on web-nextjs or web-cra yet, so I wanted to implement builds for both to see them each grow with the project and then decide on one or the other as the projects complexity reaches a certain level where leaving one behind would save time.

I have compiled a list of links that seemed helpful and relevant to your code implementation.

• monorepo
• next.js with-custom-babel-config
• next.js with-react-native-web
• react-native-web-typescript
• babel-plugin-react-native-web

[geofmureithi-zz]

@a93h Were you able to solve this issue?

[a-r-db]

@geofmureithi Realizing my start-up project didn't require any extra intricacies that react-native has to offer, I switched to Flutter. It's more of an organizer/planner concept so graphs and calendars are really all that's needed.
So no, sorry to disappoint.

[geofmureithi-zz]

@a93h Ok no problem.
For anyone peeking here:
I have been experiencing a similar error after running next dev and I got

Module not found: Can't resolve 'react-native-web/dist/cjs/exports/SafeAreaView' in [~]/packages/components/src'

I installed react-native-web on the components package and
I was able to run next dev but still building doesnt work.
If I crack it I will do a PR.

[geofmureithi-zz]

@brunolemos I have found the root of the problem though I haven't found a solution.
It seems during building web, next.config.js is not loaded. Finding out why could solve this issue.
Verifying: Include an invalid token in the web config and try both dev and build. The former works while the latter fails.

[lavaxun]

@brunolemos I have found the root of the problem though I haven't found a solution.
It seems during building web, next.config.js is not loaded. Finding out why could solve this issue.
Verifying: Include an invalid token in the web config and try both dev and build. The former works while the latter fails.

could you try this PR and see if it fixes the issue?
It works on my project.

#76

[geofmureithi-zz]

@lavaxun I cloned your repo and the problem persists.

[lavaxun]

@lavaxun I cloned your repo and the problem persists.

That's strange. May I know which version of node.js are you using?

Besides, can you try to switch to this branch fix/extend-rn-types?
and try this -> yarn workspace web-nextjs build

[geofmureithi-zz]

Aaah.. Yes. I missed switching the branch.
It works! Awesome. Could you explain what you think was happening?

[lavaxun]

@geofmureithi great to hear that! :)

I suspect that the next.js v10.x build command changes the sequences of loading up and merging the typescript definition file .d.tsx.

So I tried to merge the definition file from @types/react-native with the custom definition file from packages/web-nextjs/@types/react-native.d.ts.
And it works!

[darwin403]

Modify the following in next.config.js This fixes the issue. I think a better solution can be obtained.

module.exports = withTM({
  typescript: {
    ignoreBuildErrors: true, // this is the change
  },
  webpack(config) {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    return config
  },
})

While building next.js performs an additional check of typescript errors is the source of the problem.

https://github.com/vercel/next.js/blob/9d25194e7d4205af5d7640744a2927bd6d53006b/packages/next/build/index.ts#L183 which