I have a library that is written in TypeScript, that then has been compiled into one js file as an amd module.
I'm then trying to import { Stuff } from 'that/library'
but get an error message: Can't find variable: define;
can I not used AMD modules to import into my RN app?
bonus question: what bundling mechanism is used under the bonnet in react-native, it's clearly not Webpack..? and what types of modules are supported.
edit: just tried to recompile my library as System type module, that does not get recognised either react native: can't find variable: System;
React Native uses it's own packager, which relies on CommonJS (and ES6 Imports, transpiled by babel to, you guessed it, CommonJS). This answers both questions, UMD is not supported. There are different starter kits using webpack, though, if you would like to use it, for example this one.
Related
I'm creating a custom library for React Native. I initiated the library using react-native-create-library. The library has not any native code. It's just written in typescript. At some places, I need to use react-native packages like react-native-bip39 and react-native-libsodium. But when I import any one of them it doesn't work, instead, it gives error that .default.function() is undefined or null.
How I can import such libraries into my project.
I know there is some sort of relationship between React Native and Babel.
What I'm not sure of is whether it's just there if I want to use it and I must enable it somehow, or whether RN always transpiles with Babel.
It must be transpiling one way or another since RN uses JSX, which is not native to any JS engine.
That makes me think it's unlikely that there would be multiple transpilation paths, one for just JSX and one for the Babel+JSX combo.
The reason I ask is because I found a newish JS function String.fromCodePoint() that works on Android but not iOS.
Is this because the transpilation doesn't try to cover all modern JS features? Because it's a bug I should report? Something that the regular React Native transpiler doesn't handle but the Babel one would?
What exactly is the magnitude of my misunderstanding? (-:
Your'e right. React Native does get transpiled using Babel. You can see here all the babel transformers used for react native.
I don't believe you can avoid using babel, but if you wish to add transformers and plugins, you could, using you own .babelrc file. However, you'd still need the transformers which React Native uses, so to make it easier you could just use the react-native babel preset, which bundles for you all the transformers required by react-native. Additional transformers you would need to install and configure on your own.
I am trying to use SliderButton, I recently installed slider-button in my terminal,
npm install --save react-native-slider-button
and tried to import it, but somehow it did not work.
on website, I am supposed to write
var SliderButton = require("react-native-slider-button");
but my react-native is latest ver so i am guessing that I probably should not use require, how do I write code with using "import"?
You can replace require with import by placing the following at the top of your file:
import SliderButton from "react-native-slider-button"
export default class MyComponent extends Component {
...
}
You can't really just "import" this particular component. It was written using an earlier implementation of JS called CommonJS which is used in NodeJS. React Native now uses ES6 for module management. The SliderButton Component is a little problematic. First, it uses the CommonJS module syntax inside the component itself, including loading React and React Native in ways that are no longer supported. So parts of this module would have to be rewritten to work with current versions of react native. You could roll back to a previous react native version that supports CommonJS, or you could modify the Component to use the ES6-style module importation.
Im having a bit of an issue after upgrading to React Native 0.30. Using mocha, and babel I transpile the react native source before test run. I'm now seeing issues where modules cannot be found.
Here's an example:
Error: Cannot find module 'AssetRegistry'
The corresponding file can be found here https://github.com/facebook/react-native/blob/master/Libraries/Image/AssetSourceResolver.js#L21. It looks as if babel cannot locate the AssetRegistry file that is local in this directory.
Ok so it turns out that react-native-maps was calling an internal react-native library. react-native-mock has most of the internals mocked for react native however the internal library for the Image utility was not mocked.
I just used mockery to mock the library and all seems to work now.
Does React Native use require or import?
All I can find is an old tutorial using require(), but when I run react-native init, I'm getting a project that uses import. Is this due to recent changes in React Native?
What are the main differences?
Yes the latest React Native tutorials and examples use the new import syntax.
https://facebook.github.io/react-native/docs/tutorial.html
In terms of the differences between CommonJS (require) and ES6 modules (import), there are some good answers here:
Using Node.js require vs. ES6 import/export
I think most people prefer the new ES6 syntax. However no JS engines implement ES6 modules currently, so it needs to be converted by an ES6 transpiler (e.g. Babel) to require statements. React Native is setup to do this out of the box, so you can just start using import and it should just work.
The main difference is, that import is ECMAScript 6 syntax and require is ECMAScript 5. Both are interchangeable, but import has a nice syntax for renaming: export { MY_CONST as THE_CONST, myFunc as theFunc };.
React Native now uses Babel for "modules" compilation (doc). If scaffold an app with create-react-native-app, in folder node_modules, there is the Babel plugin named
babel-plugin-transform-es2015-modules-commonjs
, which is referenced across the app.
As name implies, this plugin just transforms ES2015 modules syntax to CommonJS.
For the main differences, I like this answer appearing in another post.