SDK version: 44
My problem seems to be that I’m unable to install AppLoading on Expo.
Looking inside the package.json dependencies, I’m not able to find expo-app-loading
It says I have to install it manually by typing: expo install expo-app-loading in the terminal. I've tried doing so but nothing changes and I still can't see expo-app-loading installed in package.json dependencies.
As soon as I import AppLoading from 'expo-app-loading'; I get bombarded by errors that I've copy/pasted below:
Any help on how to solve this issue would be greatly appreciated!
1 | import React from ‘react’;
2 |
3 | import { AppLoadingProps } from ‘./AppLoading.types’;
4 | import NativeAppLoading from ‘./AppLoadingNativeWrapper’;
…/…/…/…/…/node_modules/expo-app-loading/build/AppLoadingNativeWrapper.js:2
Module not found: Can’t resolve ‘react’
1 | import * as SplashScreen from ‘expo-splash-screen’;
2 | import React from ‘react’;
3 |
4 | type Props = {
5 | autoHideSplash?: boolean;
…/…/…/…/…/node_modules/expo-modules-core/build/PermissionsHook.js:1
Module not found: Can’t resolve ‘react’
1 | import { useCallback, useEffect, useRef, useState } from ‘react’;
2 |
3 | import { PermissionResponse } from ‘./PermissionsInterface’;
4 |
C:/Users/Admin/node_modules/expo-modules-core/build/index.js
Module not found: Error: Can’t resolve ‘react-native-web/dist/exports/DeviceEventEmitter’ in ‘C:\Users\Admin\node_modules\expo-modules-core\build’
C:/Users/Admin/node_modules/expo-modules-core/build/EventEmitter.js
Module not found: Error: Can’t resolve ‘react-native-web/dist/exports/NativeEventEmitter’ in ‘C:\Users\Admin\node_modules\expo-modules-core\build’
C:/Users/Admin/node_modules/expo-modules-core/build/Platform.js
Module not found: Error: Can’t resolve ‘react-native-web/dist/exports/Platform’ in ‘C:\Users\Admin\node_modules\expo-modules-core\build’
C:/Users/Admin/node_modules/expo-modules-core/build/EventEmitter.js
Module not found: Error: Can’t resolve ‘react-native-web/dist/exports/Platform’ in ‘C:\Users\Admin\node_modules\expo-modules-core\build’
…/…/…/…/…/node_modules/expo-modules-core/build/SyntheticPlatformEmitter.web.js:5
Module not found: Can’t resolve ‘react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter’
3 | * registered in the API layer with NativeEventEmitter.
4 | */
5 | export { default } from ‘react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter’;
6 |
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat ‘C:\DumpStack.log.tmp’```
Related
After installing google-spreadsheet and running my react-native project it throws below error:
error: Error: Unable to resolve module path from D:\Projects\MyProject\node_modules\google-auth-library\build\src\auth\googleauth.js: path could not be found within the project or in these directories:
node_modules
19 | const gcpMetadata = require("gcp-metadata");
20 | const os = require("os");
> 21 | const path = require("path");
| ^
22 | const crypto_1 = require("../crypto/crypto");
23 | const transporters_1 = require("../transporters");
24 | const computeclient_1 = require("./computeclient");
So I manually installed path npm i path --save
Afterward, this error is gone and the same issue for fs module came. So again I installed fs module then it gave me the below error:
error: Error: While trying to resolve module `fs` from file
`D:\Projects\MyProject\node_modules\google-auth-library\build\src\auth\googleauth.js`, the package `D:\Projects\MyProject\node_modules\fs\package.json`
was successfully found. However, this package itself specifies a `main` module field that could not be resolved
When creating the SRC folder and inserting the appropriate items, react-native started giving this error:
AppEntry.js:1 Uncaught Error: Cannot find module '../../App'
Uncaught ReferenceError: process is not defined
index.js:1 ./node_modules/expo/AppEntry.js:3
Module not found: Can't resolve '../../App'
1 | import registerRootComponent from 'expo/build/launch/registerRootComponent';
2 |
> 3 | import App from '../../App';
4 |
5 | registerRootComponent(App);
From what I understand it is not finding the App with the path which is in "AppEntry.js".
However, AppEntry is by default in package.json:
"main": "node_modules/expo/AppEntry.js"
What should I do to fix?
You have moved your App.js or App.ts from root folder to 'src' so in appEntry you need to update your path from:
import App from '../../App';
To:
import App from '../../src/App';
Or you just can move back App.tsx to root folder
You can set the initializer path using the "main" property in package.json (note if you do so you need to write something like this.
import { registerRootComponent } from "expo";
import App from "./App";
export default registerRootComponent(App);
An example is https://github.com/trajano/spring-cloud-demo/blob/83887627274afa1970b5a0861e7c7d2e27efecce/expo-app/src/init/index.ts#L10-L13
with the package.json line https://github.com/trajano/spring-cloud-demo/blob/rework/expo-app/package.json#L5
Doing this gives you more flexibility, and I generally don't see the downside to doing it.
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 am setting up the plugin file of vuetify based on this reference:
https://vuetifyjs.com/en/getting-started/quick-start
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
export default new Vuetify({ ... });
Getting this error:
Failed to compile.
./src/plugins/vuetify.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/codes/hkiod-mpm/client/src/plugins/vuetify.js: Unexpected token (6:33)
4 | Vue.use(Vuetify);
5 |
> 6 | export default new Vuetify({ ... });
| ^
7 |
I am not sure what this ... means? Is this a new javascript syntax? How can I get this fix? Thanks.
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"),
};