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.
You can probably not use these packages on the web since they're react native packages (Android and iOS) and not web packages.
Which means that you have to split the files that import and use these packages.
Example of creating a wrapper for CookieManager: cookieManagerWrapper.js(everything else: Android and iOS) and cookieManagerWrapper.web.js(Web only).
In the web specific js file, you don't import CookieManager but import an alternative web library instead to implement the same functionality as on mobile but with different code that works on the web.
Then you can import and use cookieManagerWrapper.js everywhere and react-native-web will automatically substitute it with the cookieManagerWrapper.web.js when available.
Some react native packages do work on web too when they're only consisting of platform independent JavaScript code. Also some packages have web implementations that can be aliased in webpack like react-native-gradients with react-native-web-gradients, sadly this is not the case with the packages mentioned in the question.
This file splitting with file.js, file.web.js, file.android.js and file.ios.js makes it possible to write different implementations for each platform. This is also great for some user interface code, you can use 3rd party react components on the web and 3rd party react native components on mobile that look similar to implement more complex user interactions since react native web supports all regular react code and jsx tags on the web.
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.
Related
I am working on a NextJs project. In it, I have found this piece of code inside next.config.js:
const withTM = require('next-transpile-modules')([
'some package',
'some package',
'emittery',
'#next/react-dev-overlay'
]);
I was wondering what is the purpose of this #next/react-dev-overlay and was not able to find anything online. The only thing was this unanswered question in the nextjs github issues. When I remove it, it seems that the project is working as expected. My question is what is the purpose of this #next/react-dev-overlay package and should I remove it?
The #next/react-dev-overlay package is a development-only overlay for React apps. It's used internally by Next.js to display the error messages you see in development.
This is what the error overlay looks like when a client-side error occurs in a Next.js app:
As to why that package was included in next.config.js, I can only guess that it's being used directly in that app, and needs to be transpiled to be used. Most of the times you wouldn't need to install it or use it directly.
I am using in a web application react-router.
When using import 'lodash' I import the whole lodash lib in my project.
Code splitting is about using an async import using import().then() to dynamically load chunk while the application is running.
Read about code splitting in react-router/web.
For example: function atRuntime() { import('lodash').then(() => {});}
This will import the library at runtime with an ajax request so it is not bundled in the main.js.
I'd like to recycle my code between web and native and we use a lot of code splitting for each page change.
My app has two main parts and some user will only visit one part so they don't need all user authenticated part.
I expect to be able to use tree shaking during react-native, but it is missing in react-router/native documentation.
What's react-native opinion about code splitting?
if you want to use webpack, you can try with haul https://github.com/callstack/haul
but i highly recommend this implementation without webpack -> https://www.npmjs.com/package/react-native-bundle-splitter
How to store a file on React Native, that once the system store that particular file, you won't need to rely on localhost to provide the access to the file itself.
I have a react native directory with files as shown:
...
|-android
|-ios
|-node_modules
...
|-App.js
|-tensorflow_inception_graph.pb
|-labels.txt
|-result.js
|
...
I'm importing the "tensorflow_inception_graph.pb" using the following line of code:
import model from 'MyTensorFlow/tensorflow_inception_graph.pb';
import model from 'MyTensorFlow/tensorflow_inception_graph.pb';
Likewise, I have also tried using the following line of code:
import model from './tensorflow_inception_graph.pb';
import model from './tensorflow_inception_graph.pb';
Result that I hoping to get:
I could run the application and access the files stated above without ever getting the error message like Debugging on physical phone. This indirectly also means that I could run the application without attach the cable to my physical phone.
I wonder am I doing wrongly in the first place, I find the documentation provided by the 'react-native-tensorflow' is inadequate for a beginner to react native like me.
I hope someone can shed some light on this for me. Thank you.
Background
I am using a library called baguettebox.js
You can see it here
Problem
When I import this into my project like
import * as BaguetteBox from 'baguettebox.js';
I get a warning flagged inside my IDE PhpStorm
Cannot resolve file 'baguettebox.js'
This is because the folder & package.json are called baguettebox.js.
The Package is actually found and works in my application, I just want a good way to handle this error.
It's the IDE issue. Please follow WEB-25805 for updates
I happen to need a file storage database and UploadFS seems to be the best option. My project is in Angular2 typescript and Meteor.
meteor add jalik:ufs-gridfs
So far it fails when I try to import the library like this:
import {UploadFS} from 'meteor/jalik:ufs'
The error thrown sais it couldn't find the library (on the client side).
I thought it may be because the library is in javascript while the rest of the project in typescript so I tried to write a stub ufs.d.ts, first handcrafted, then with dstmake, and then by hand again when I found I had to export the module UploadFS so that meteor (barbatus:typescript?) could see it:
declare module 'meteor/jalik:ufs' {
export module UploadFS{
interface UploadFS {
...
}
}
}
So far I had my ufs.d.ts stub file at the typings/ folder and linked in the main.d.ts. No errors at compile time. Meteor sad the DB was correctly created ... but then when I tried to use it broke.
I found that UploadFS was undefined so I supposed it wasn't referencing the library even though Meteor compiled without any error.
So I suppose the only thing I've have left is to translate jalik:ufs and jalik:ufs-gridfs to typescript by hand. Is that correct? Is there an easier way of making ufs work wit angular2-meteor?
Would you use some other storage solution? any advice either fixing this library or choosing another one?
I'm successfully importing that library and just suppressing the warnings with this line:
import 'meteor/jalik:ufs'; declare let UploadFS:any;
Keep an eye on https://github.com/meteor-typings and https://github.com/Urigo/angular2-meteor/issues/102 for proper type definitions in the future.
You should never have to re-implement a JavaScript library in TypeScript in order to use it.
import { UploadFS } from 'meteor/jalik:ufs';
console.log('UploadFS', UploadFS);
This gives me the UploadFS object and I think it's totally independent of angular2-meteor so I suppose that jalik:ufs should be working fine, even with those warnings generated by ts compiler.
About typings, those warning are very annoying, I know :) but you can pretend for now you don't see them.
Here's an example implementation of jalik:ufs I made for Angular1, but it will look pretty much the same with Angular2.
http://www.angular-meteor.com/tutorials/socially/angular1/handling-files-with-collectionfs