React-native-web: 0.7.2 probably module error

[steida]

I updated https://github.com/este/este to RNW 0.7.2

I don't know why dist is still imported. Any hint would be appreciated. Is Webpack 4 required? Or? Thank you.

[necolas]

You need to provide more information if you expect to get help.

What is this? Your build step? Your test suite? Did you clear the Babel cache? etc

[steida]

It's https://github.com/este/este/blob/master/package.json#L20 You can see I always clear babel cache. I am completely lost why it happens.

[necolas]

Ah, it's because babel-plugin-react-native-web is rewriting the paths to point to the ES modules. Removing the plugin should fix things and it's not needed if you're using a modern bundler. But I need to update the plugin it to so that it can be configured to rewrite the paths to ES _or_ CJS modules.

Looks like you might want to remove it from the native babel config too: https://github.com/este/este/blob/master/.babelrc.native#L12

[steida]

I removed babel plugin, update to 0.7, and then

index.js:368 Module not found: Error: Can't resolve 'AccessibilityInfo' in '/Users/steida/dev/este/node_modules/react-native/Libraries/react-native'
ModuleNotFoundError: Module not found: Error: Can't resolve 'AccessibilityInfo' in '/Users/steida/dev/este/node_modules/react-native/Libraries/react-native'
    at factoryCallback (/Users/steida/dev/este/node_modules/webpack/lib/Compilation.js:276:40)
    at factory (/Users/steida/dev/este/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
    at resolver (/Users/steida/dev/este/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
    at asyncLib.parallel (/Users/steida/dev/este/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
    at /Users/steida/dev/este/node_modules/async/dist/async.js:3888:9
    at /Users/steida/dev/este/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/steida/dev/este/node_modules/async/dist/async.js:1062:13)
    at /Users/steida/dev/este/node_modules/async/dist/async.js:969:16
    at /Users/steida/dev/este/node_modules/async/dist/async.js:3885:13
    at resolvers.normal.resolve (/Users/steida/dev/este/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
    at onError (/Users/steida/dev/este/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
    at loggingCallbackWrapper (/Users/steida/dev/este/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/Users/steida/dev/este/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/Users/steida/dev/este/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/Users/steida/dev/este/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/steida/dev/este/node_modules/tapable/lib/Tapable.js:252:11)

What I am doing wrong?

[steida]

[necolas]

The stack-trace is showing that you haven't aliased react-native to react-native-web

[steida]

Because you told me to remove babel-plugin-react-native-web. I am confused. Is it required or not? Should I import from react native web instead? Or?

[necolas]

You need to alias the package https://github.com/necolas/react-native-web/blob/master/website/guides/getting-started.md

[steida]

Still without a success.

[steida]

@necolas I made a branch with PR to 0.7.2 https://github.com/este/este/tree/rnw-072 There must be something wrong, but what? Thank you!

[necolas]

I don't have time to debug your project. The stacktrace shows that it is still importing from react-native, which means you haven't aliased the package to react-native-web. Use something like this for Babel https://www.npmjs.com/package/babel-plugin-module-resolver

[steida]

In case some other person is reading this. It seems babel-plugin-module-resolver has the same problem as webpack alias. I don't know why yet. Investigating.

[steida]

I am pretty sure it's a bug in React Native Web.

[necolas]

Stacktrace can help you see that the problem is…not here.

Could not resolve "react-native-web/Libraries/StyleSheet/StyleSheet" in…

That's because you have this kind of import reaching into React Native itself.

import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';

If you want to keep those imports of React Native internals, you need to configure the aliasing properly. Look at the docs to see you can use a regex for exact matches, e.g.,

{
  "^react-native$": "react-native-web"
}

[MrLoh]

For anyone else hitting this issue. The latest version of babel-plugin-react-native-web has an option to enable commonjs that fixes this error. Just use:

"plugins": [
  ["react-native-web", {"commonjs": true}]
]