Comments (33)
Unfortunately react-native has a problem when using the official babel-preset-react-native
together with babel-preset-react-es2015
. facebook/react-native#5747
Importing individual files does work for recompose, though.
So instead of
import { compose, lifecycle, withState, branch, renderComponent } from 'recompose';
you would have to do
import compose from 'recompose/compose';
import lifecycle from 'recompose/lifecycle';
import withState from 'recompose/withState';
import branch from 'recompose/branch';
import renderComponent from 'recompose/renderComponent';
from recompose.
The reason why it's not currently working in React Native is because of acdlite/change-emitter#2.
As soon as that is published, it will work.
from recompose.
@Minishlink, I just reached out via Twitter and it was released! 🙌
Thanks @acdlite!
from recompose.
@laxgoalie392 thank you, now I know how to create and test react-native with recompose ;-)
from recompose.
Updated package still fails with Couldn't find preset "es2015"
error.
from recompose.
@pbassut, yes. Simply delete node_modules/change-emitter/.babelrc
.
from recompose.
@rclai I got it working by removing my .babelrc
file and installing:
npm install babel-preset-es2015 --save
npm install babel-preset-react --save
from recompose.
I don't have a .babelrc
though. Is it supposed to be in the root folder or is it somewhere else? I tried installing those packages anyway, but it's still giving me the same error.
Edit: Oh never mind, I had to restart the packager.
from recompose.
@migueloller Sure, let's ping him on Twitter. recompose
is a pretty neat tool, so it's quite disappointing when you stumble upon this small issue.
By the way, I found a way to circumvent the problem by adding babel-preset-es2015
to my dependencies. Hope this helps!
from recompose.
@migueloller I'm reading what is files
in package.json
havent seen before that files can be used instead of npmignore, will merge I think ;-)
from recompose.
I will create it myself, not a big problem.
from recompose.
Not sure, good question! There's nothing web-specific to Recompose, so it should work, but I haven't confirmed.
from recompose.
Currently it doesn't because it imports module react
which is not available in React Native.
But my guess is that it will start working after facebook/react-native#2985 is resolved.
from recompose.
facebook/react-native#2985 is now resolved.
from recompose.
Just waiting for a release :)
from recompose.
This doesn't seem to be working still (or now?):
TransformError: /my-app/node_modules/change-emitter/lib/index.js:
Couldn't find preset "es2015" relative to directory "/my-app/node_modules/change-emitter"
I'm using the following versions:
"react": "^15.1.0",
"react-native": "^0.27.2",
from recompose.
The fix has been waiting on the master branch for 6 (SIX) months. What are you waiting for? ping @acdlite
from recompose.
@Minishlink, I'm sure that @acdlite is extremely busy with his work and given that he is a a contributor to various OSS projects probably has notifications turned off. 😕
I tried pinging him on Twitter a few months back but that didn't help at the time. Maybe we can ping him again?
from recompose.
For now I've fallen back to having a small script that patches the package.json
every time I run npm install
. Which is suboptimal, of course.
from recompose.
@migueloller Does this fix your issue? Not for me. :/
from recompose.
@Minishlink have you tried clean npm install? I think dependency should be updated even without recompose
update. But if you use yarn (not sure about package managers for native) seems like the simplest way is to update recompose. I can do that if needed.
from recompose.
@istarkov I did a yarn upgrade
and change-emitter
was indeed at the new version (0.1.3) so it seems there was another issue. Adding babel-preset-es2015
to my dependencies fixes the problem. One thing to note is that the issue happens when react-native packages a bundle for release, not for debug.
from recompose.
@Minishlink and @prontiol, I looked into this and it seems that because the package still published a .babelrc
there is an issue. I'll try sending another PR to change-emitter
so that this can be fixed.
from recompose.
Same issue here. Couldn't find preset "es2015"
from recompose.
Any quick fix for this until the package is published?
from recompose.
Thanks @migueloller!
from recompose.
Guys I've fixed change-emitter and seems like recompose reinstall should fix a problem
(change-emitter version 0.1.5 does not contain .babelrc
)
from recompose.
@istarkov, thanks!
I also saw that you have another PR in there (acdlite/change-emitter#7). If you merge the PR that I had made previously (acdlite/change-emitter#5) that would fix that issue as well by using files
in the package.json
.
from recompose.
I'm completely new to this library and I tried installing it tonight (through a react-native app). I started to get very excited about it... except that functions do not seem to be passed through. I just installed it and I just created this app through create-react-native-app
so I should be up to the latest and greatest. I get no errors, just missing properties. Am I doing something wrong? I'd really like to start developing apps using this library!
export default compose(
withState('value', 'updateValue', '2'),
withHandlers({
loginWithGoogle2: (props) =>
event => console.log(event)
}),
)((props) => {
console.log('props', props);
return <Text>test</Text>;
});
returns only props {"value":"2"}
from recompose.
Is any rn playground exists like https://snack.expo.io but with ability to import npm modules?
from recompose.
@istarkov not that i'm aware of. Just googled around for one. I can create a barebones github project if you want. it shouldn't be that hard to run if you have a mac
from recompose.
I've just created react-native example, all works as expected
https://github.com/istarkov/recompose-native-test/blob/master/App.js
@laxgoalie392 you can check, install, play
from recompose.
@istarkov ok i see where my problems are and it is in fact working as expected!
I had originally had the following code and the issue was that event
seems to be a massive object that was locking up everything. logging something simple worked.
withHandlers({
loginWithGoogle: (props) => (event) => console.log('event', event),
}),
But that lead me to log what was being passed as a function in the render phase... unfortunately, react-native logs functions as null which caused my confusion :_( They don't even show up as a property on an object when logged.
Anyways, I'm really excited to use this library and transform the way i currently write code! Thanks a lot!
from recompose.
Related Issues (20)
- renderNothing should export Nothing HOT 4
- Does TypeScript 3.4 enable typing of compose HOT 1
- Remove flow types in repo and support only in flow-typed repo HOT 1
- Key advantages in Docs HOT 2
- The best way to test a component that use getContext recompose HOT 1
- Get a lifecycle componentDidMount unmounted error HOT 1
- Rewriting mapPropsStream with Hooks or new Lifecycle Methods HOT 4
- compose hoc causes to lose typings
- Remove usage of `createFactory` HOT 4
- Why does `mapProps` remove `children`? HOT 2
- node-fetch vulnerability issue (denial of service) HOT 8
- Forked, Updated, and Published HOT 1
- fbjs dependency still present in lock file HOT 3
- Support React 17 HOT 2
- Suggest alternative to branch(), renderComponent(), renderNothing(), compose(), etc
- TypeError: Cannot read properties of undefined (reading 'apply')
- Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
- New patch required to mitigate high risk vulnerability
- Maintainers HOT 1
- This is GITHUB and not the European Parliament or NATO.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from recompose.