MillerGregor / rne-cross-platform-example

A React Native Elements example app for android, iOS, and web that shares a single codebase
13 stars 5 forks source link

Hi, it's just a question #1

Open MichelDiz opened 6 years ago

MichelDiz commented 6 years ago

I've tested your implementation and it works perfectly. Now, I was wondering if it would be possible to have that same aproach with NextJS. They have a number of pre-shaped things including babel, webpack and others.

PS. I'm interested in react-native-elements.

I'm new to NextJS, but so far everything I've explored from them made me like it.

I tried to formulate something with your configs but I always have some problem or another. See the example below - it's the last alley I got stuck.

ref: https://github.com/zeit/next.js/tree/canary/examples

more refs: https://github.com/zeit/next.js/issues/858#issuecomment-359195296 https://spectrum.chat/thread/e055ef10-ea2f-4de6-8041-b4a2ca2f5e39

examples with RNW: https://github.com/aligos/next-rnw https://github.com/zeit/next.js/tree/canary/examples/with-react-native-web

Cheers

Error: Cannot find module 'ViewPropTypes'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.get ViewPropTypes [as ViewPropTypes] (/Volumes/HSierraDados/Dev-2018/PWA/AppPWA/node_modules/react-native/Libraries/react-native/react-native-implementation.js:119:32)
    at Object.<anonymous> (/Volumes/HSierraDados/Dev-2018/PWA/AppPWA/node_modules/react-native-elements/src/config/ViewPropTypes.js:3:23)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12) code: 'MODULE_NOT_FOUND' }
{ Error: Cannot find module 'ViewPropTypes'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.get ViewPropTypes [as ViewPropTypes] (/Volumes/HSierraDados/Dev-2018/PWA/AppPWA/node_modules/react-native/Libraries/react-native/react-native-implementation.js:119:32)
    at Object.<anonymous> (/Volumes/HSierraDados/Dev-2018/PWA/AppPWA/node_modules/react-native-elements/src/config/ViewPropTypes.js:3:23)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12) code: 'MODULE_NOT_FOUND'
jimmyshen007 commented 6 years ago

Encountered the same problem with next.js. The above error is because react-native-elements was trying to import from react-native instead of react-native-web. I didn't find a good way to change react-native-elements (the dependency of my project) import paths dynamically, but I tried re-transpile react-native-elements with a babel-plugin-module-resolver. Put the following into your node_modules/react-native-elements/.babelrc and run "yarn" & "yarn run build:dist" in react-native-elements. "plugins": [ ["module-resolver", { "alias": { "react-native": "react-native-web", } }] ]

The above can only solve the reac-native-web related issues. I was then stucked in a few other issues related to react-native-vector-icons. The following error is what I get:

Cannot convert undefined or null to object TypeError: Cannot convert undefined or null to object at Function.keys () at Object.createIconSet [as default] (/App/node_modules/react-native-elements/node_modules/react-native-vector-icons/dist/lib/create-icon-set.js:1:3150) at Object. (/App/node_modules/react-native-elements/node_modules/react-native-vector-icons/Octicons.js:6:68) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object. (App/node_modules/react-native-elements/src/helpers/getIconType.js:2:1) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3)

I guess some import paths from react-native-elements to react-native-vector-icons was messed up. Probably we need to wait for some examples for next.js later on.