I upgraded React Native to 0.70.3, but in this upgrade, React Native has an issue getting the path of the component. I used to create an index.js file within the component directory and from there I reference component names so I can easily import them as below:
// ./src/components/index.js
export {default as Container} from './general/Container';
export {default as Wrapper} from './general/Wrapper';
export {default as Toast} from './general/Toast';
export {default as Box} from './general/Box';
then I import them as:
import {Container, Wrapper, Toast, Box} from '../components';
I wasn't getting any error in React Native below 0.70 but now I am getting the following error:
Cannot read property 'Container' of undefined
and when I change the above imports as below then it works fine.
import Container from '../../components/Container';
import Wrapper from '../../components/Wrapper';
import Toast from '../../components/Toast';
import Box from '../../components/Box';
Any idea how I can fix it?
Thank you in advance!
I'm using the package react-native-localize to provide localization in an app. I've already linked the library and it works fine running on a device.
Issue:
When I test a component that imports react-native-localize. I get the error react-native-localize: NativeModule.RNLocalize is null.
In order to resolve this null error I call jest.mock('react-native-localize'); at the top of the test file. But I still get an error pointing to NativeModule.RNLocalize is null. I've also provided the mock as mentioned in the package README to no avail.
import 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
import * as RNLocalize from 'react-native-localize';
// mocking the module here with jest.mock
jest.mock('react-native-localize');
it('renders correctly', () => {
renderer.create(<App />);
});
Question:
How can you resolve a NativeModule.RNLocalize is null error in test?
Test Stack Trace:
FAIL __tests__/App-test.js
● Test suite failed to run
react-native-localize: NativeModule.RNLocalize is null. To fix this issue try these steps:
• Run `react-native link react-native-localize` in the project root.
• Rebuild and re-run the app.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
• Check that the library was linked correctly when you used the link command by running through the manual installation instructions in the README.
* If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.
If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-localize
16 |
17 | import {NavigationContainer} from '#react-navigation/native';
> 18 | import * as RNLocalize from 'react-native-localize';
| ^
19 | import {Icon} from 'native-base';
20 | import {createStackNavigator} from '#react-navigation/stack';
21 | const Stack = createStackNavigator();
at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/module.js:17:9)
at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/index.js:3:1)
at Object.<anonymous> (src/modules/AppView.js:18:1)
at Object.<anonymous> (src/modules/AppViewContainer.js:2:1)
at Object.<anonymous> (App.js:23:1)
at Object.<anonymous> (__tests__/App-test.js:7:1)
I fixed this issue in my tests by adding these lines in my jest configuration file
jest.mock("react-native-localize", () => {
return {
getLocales: jest.fn(),
// you can add other functions mock here that you are using
};
});
I found the solution :- paste this code in your jest configuration file (setup.js)
jest.mock("react-native-localize", () => {
getLocales: jest.fn(), // use getLocales if you have used this, else use the one that you have used
// you can add other functions mock here that you are using
};
});
I have a pug file with the following...
#footer
script(type="module")
| import Vue from '/vue/vue.esm.browser.js'
| import { JRGVue } from '/ui/index.js'
| import VueMaterial from '/material/vue-material.js'
| (()=>{
| const vue = new JRGVue(Vue);
| vue.app.use(VueMaterial);
| vue.app.$mount('#jg-app');
| })();
I get
Uncaught SyntaxError: The requested module '/material/vue-material.js' does not provide an export named 'default'
When I change it to
import * as VueMaterial from '/material/vue-material.js'
I get
Uncaught TypeError: _vue2.default is not a constructor
What is the proper way to import the Vue Material library using ESM?
Update
It does seem to work with Vuetify
#footer
script(type="module")
| import Vue from '/vue/vue.esm.browser.js'
| window.Vue = Vue;
script(type="module")
| import * as Vuetify from '/vuetify/vuetify.js';
| import { JRGVue } from '/ui/index.js';
| Vue.use(Vuetify);
| const vue = new JRGVue(Vue);
| vue.app.$mount('#jg-app');
Update
No longer seems to be working with the newest version. It would be really nice to find a UI with native ESM support
In case the import refers to vue-material library, a correct way to import it is:
import VueMaterial from 'vue-material';
And bundle the application with it.
It's impossible to import it with native ES modules (<script type="module">).
It's possible to import packages that were built as ES modules (e.g. vue.esm.browser.js for vue) but vue-material doesn't have ES6 entry point.
In case /material/vue-material.js refers to vue-material/dist/vue-material.js, it is UMD module which cannot be imported by ES module without module interop.
ES module that could be imported is vue-material/src/index.js but it cannot be imported directly because the package uses source files that aren't compliant with specs (.vue, .scss) and need to be built.
A way to import vue-material UMD module at runtime is to use SystemJS for module interop.
Also, IIFE is an antipattern in module scope.
I am trying to add React Styleguidist to my project and am getting an "Unexpected token" compiler error.
I am using the Create react app to create the project. After it didn't work I created a new project and continue to get the same error when returning a component.
Here is the code for the simple component that I created to try to figure it out:
import React from 'react';
import React from 'react';
const Component1 = (props)=><div>Test</div>;
export default Component1;
Based on what I read at https://react-styleguidist.js.org/docs/getting-started.html it looks like I should only need to run npm install --save-dev react-styleguidist and then npx styleguidist server
I am sure that I am missing something, but have not been able to find anything that would explain the error below.
SyntaxError: /Users/seanlynch/Projects/style/src/Components/Component1.js: Unexpected token (3:28)
1 | import React from 'react';
2 |
> 3 | const Component1 = (props)=><div>Test</div>;
| ^
4 |
5 |
6 | export default Component1;
# ./node_modules/react-styleguidist/lib/index.js (./node_modules/react-styleguidist/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/index.js) 46:30-101
# ./node_modules/react-styleguidist/lib/index.js
# multi ./node_modules/react-styleguidist/lib/index ./node_modules/react-styleguidist/node_modules/react-dev-utils/webpackHotDevClient.js
add styleguide.config.js with follow lines
module.exports = {
propsParser: require("react-docgen").parse,
webpackConfig: require("react-scripts/config/webpack.config"),
};
I'm just getting started with react native and have created a base app with create-react-native-app.
I did some restructuring and made a few new folders and renamed the App.js to Home.js. I modified the app.json to contain an entry point that references the new Home.js file. When I load the app, nothing happens. There's no error, it just stays on the expo screen.
.
-components
-screens
-Home
Home.js
-config
-node_modules
-tests
app.json
app.json file:
{
"expo": {
"sdkVersion" : "23.0.0",
"entryPoint" : "./screens/Home/Home.js"
}
}
How do you define the entry point of the app?
if you are using Expo, you have to specify the entrypoint in your app.json file like this:
{
"expo": {
"entryPoint": "./src/app/index.js"
}
}
then, inside that file you need to register the app with Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT)
import Expo from 'expo'
...
class App extends Component {
...
}
export default Expo.registerRootComponent(App);
this way you can add your entry file wherever you want.
You need to update the app.json so that the entryPoint is the new path to the App.js.
{
"expo": {
"entryPoint": "./src/App.js",
...
}
}
However using Expo.registerRootComponent(App) causes the following error in SDK 32:
undefined is not an object (evaluating '_expo.default.registerRootComponent')
It can be fixed by importing registerRootComponent explicitly, rather than trying to access it via Expo.registerRootComponent.
Here is a sample App.js.
import { registerRootComponent } from 'expo';
class App extends React.Component {
...
}
export default registerRootComponent(App);
For Expo Projects
According to the current Expo documentation, if you want a different entry point than the App.js file, you can update the package.json - add a main field with the path to the desired entry point. Then inside the entry point file you'll have to also have to register the root component of the app. Expo was doing this automatically, when the entry point wasn't specified and was the App.js file
package.json
{
"main": "my/customEntry.js"
}
entryPointFile.js
import { registerRootComponent } from 'expo';
import MyRootComponent from './MyRoot';
registerRootComponent(MyRootComponent);
What if I want to name my main app file something other than App.js? - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
If your project is in managed workflow setup (the default one), as stated in the doc, you must import the registerRootComponent and call it with your root component as argument, in the file you wish to be the main one:
import { registerRootComponent } from 'expo';
const AnyName() { ... } // Your root component
registerRootComponent(AnyName)
And then, in your package.json file, change the "main" to this file relative path, like
{
"main": "src/main.js"
}
I created project by react-native-script. In default entrypoint of app (App.js), you export App which import from your entry.
- node_modules
- App.js
- build
- main.js
File App.js:
import App from './build/main'
export default App
I also prefer to put all sources in a separated folder, for instance src/, and I found a different solution:
in my package.json, generated by expo cli, I see that main attribute is node_modules/expo/AppEntry.js.
I copied node_modules/expo/AppEntry.js to src/expoAppEntry.js and just changed the App import to import App from './App'; so it points to my *src/App.tsx`
then of course I changed the package.json main attribute to src/expoAppEntry.js.
See a working example here https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js
For those who are using Expo with typescript, you dont have to add .tsx at the end of the entrypoint in app.json. For example your entrypoint can be:
{
"expo": {
"entryPoint": "./app/components/AppEntryPoint/App.component",
"name": "Sample App",
...
}
...
}
In this example the name of entrypoint component is App.Component.tsx. But not mentioning the extension will also work. Apart from this, in the root component, writing export default registerRootComponent(AppComponent) or registerRootComponent(AppComponent) both should work as exporting a component from a file only means that other files can use it as well. Not writing it should not be an issue here because we have mentioned in app.json that this is the root component. App.json will look up and start building the structure of the app from there itself.
The entry point can be found in node_modules/expo/AppEntry.js..
This is in Expo Typescript...
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import App from '../../src/App';
registerRootComponent(App);
In this you can change your entry point. Initially it is set to App, Look the import statement where that component is coming from.