I'm trying to link two applications together. I have two projects. Both projects using Vue(2). One being the main project and the other a componet lib. I succesfully linked the two projects together with npm link. However my main project is giving an error.
ERROR Failed to resolve entry for package "#hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "#hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json.
My main application is using vite and the component application is using webpack.
in my main.js I'm importing it like any other lib
import thqComponentLibrary from "#hitfoyb/my-component-library/dist/MycomponentLibrary.umd";
import "#hitfoyb/my-component-library/dist/MycomponentLibrary.css";
Vue.use(MycomponentLibrary);
my main application vite.config.js
optimizeDeps: {
include: ['#hitfoyb/my-component-library']
},
Any help on why the application is giving the error and how do I resolve it?
./src/components/showStudent/showStudent.js
Module not found: Can't resolve '#material-ui/data-grid' in 'C:\Users\USER\Desktop\Database\client\src\components\showStudent
Code below in showstudent was copied directly from materialui website for tables
You are using DataGrid but it's not installed in the project.
Choose your favorite package manager, install #material-ui/data-grid.
// with npm
npm install #material-ui/data-grid
// with yarn
yarn add #material-ui/data-grid
Now, you have to import the component as below. To avoid name conflicts the component is named DataGrid.
import { DataGrid } from "#material-ui/data-grid";
I type:
npm test
and I get:
It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.
I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.
This is the repo/branch of this question.
When I type npm start. Everything flows swiftly and with no errors.
The error occurs because jestdom is not able add canvas, which we need to do. For me this happened because I was using lottiefiles for the application.
Here is how I fixed it for my react application.
Install jest-canvas-mock as below .
npm i jest-canvas-mock
Then go to setup file like setup-tests.js and import jest-canvas as below .
import "jest-canvas-mock";
Now run test, you should not get errors any more.
I solved it by following this instructions.
Thanks CherryDt.
Installing npm i jest-canvas-mock
and Importing import "jest-canvas-mock" in set-up file; works for me
New to React Native:
I started a brand new project with Expo init and then I followed the instructions mentioned inhttps://reactnavigation.org/docs/hello-react-navigation
I run the project with expo start and I get this error.
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.
invariant
browser.js:38:14
runApplication
AppRegistry.js:193:13
__callFunction
MessageQueue.js:425:19
__guard$argument_0
MessageQueue.js:112:6
__guard
MessageQueue.js:373:10
callFunctionReturnFlushedQueue
MessageQueue.js:111:4
callFunctionReturnFlushedQueue
[native code]:0
Any suggestions?
Open the index.js, the content of the file should be like this:
import { AppRegistry, Platform } from 'react-native';
import App from './App';
AppRegistry.registerComponent('X', () => App);
if (Platform.OS === 'web') {
const rootTag = document.getElementById('root') || document.getElementById('X');
AppRegistry.runApplication('X', { rootTag });
}
If you have this error Invariant Violation: “main” has not been registered you have to replace the 'X' by 'main'.
Another example :
If you have this error Invariant Violation: “app” has not been registered you have to replace the 'X' by 'app'.
For android :
Open ./android/app/src/main/java/[multiple folders]/MainActivity.java
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
#Override
protected String getMainComponentName() {
return "X";
}
The 'X' of MainActivity.java and index.js must match.
This worked for me:
delete node_modules and your lockfile (package-lock.json / yarn.lock)
change the expo package version in package.json to 38.0.8
run yarn or npm install
run expo install react-native-safe-area-context
The problem is that if you are using expo then you have to registerComponent differently. All the information is in the docs. https://docs.expo.io/versions/latest/sdk/register-root-component/
import { registerRootComponent } from 'expo';
import React from 'react';
import { View } from 'react-native';
class App extends React.Component {
render() {
return <View />;
}
}
registerRootComponent(App);
In my case, the problem was solved when I called
AppRegistry.registerComponent(appName.toLowerCase(), () => App);
in index.js. So it looks like the first parameter is to be passed based on what error message is shown. In my case, my project name was AwesomeProject and the error reported by Metro was:
Invariant Violation: "awesomeproject" has not been registered.
so I figured that adding toLowerCase() will solve the problem and it did!!
However, I was facing this problem when trying to run it on macos using npx react-native run-macos and after this was solved, I tried to invoke the iOS version, then I got Invariant Violation: "AwesomeProject" has not been registered.
So finally I got both working by registering the App twice as below:
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName.toLowerCase(), () => App);
The same also works with npx react-native run-android.
workarounded by:
AppRegistry.registerComponent('main', () => App);
In my case I was missing some packages which are mandatory to install.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
index.js
AppRegistry.registerComponent("X", () => Root);
If you are facing this issue in Android then make sure that both mainactivity.java and index.js contains same "X"
mainActivity.java
#Override
protected String getMainComponentName() {
return "X";
}
If you are facing this issue in iOS then make sure that both AppDelegate.m and index.js contains same "X"
AppDelegate.m
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:#"X" initialProperties:nil];
Change your index.js .
import { AppRegistry, Platform } from "react-native";
import { registerRootComponent } from "expo";
import App from "./App";
import { name as appName } from "./app.json";
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
if (Platform.OS == "android") {
registerRootComponent(App);
} else {
AppRegistry.registerComponent(appName, () => App);
}
In my case, I had a class that existed solely to model the structure of a meal i.e not a react class component. I forgot to export that class but was calling it in the application new Meal(foo, bar .....) and that triggered this error. I found it by just tracing my steps to the most recent addition I had made before I started getting this error.
In my case it a specific package called graphql-type-json that was the problem.
So the 2nd part of the error was referring to the real issue:
A module failed to load due to an error and AppRegistry.registerComponent wasn't called."'
The loading of the incriminated package was throwing an error 'GraphQLError: Syntax Error: Expected Name, found "}".' which stopped the App loading and threw the Invariant Violation error.
After removing precisely the graphql-type-json (yarn remove graphql-type-json) package, expo loaded fine again.
If you're using react-native-reanimated and Expo, make sure to install it using:
expo install react-native-reanimated
See the documentation for further help
import app name from app.json like this:
import {name as appName} from './app.json';
then add appname in registerComponent
AppRegistry.registerComponent(appName, () => App);
The main reason to get this error is that, for some reason, App.js is not functioning properly. It may be because that you are running the server from a wrong folder. In my case, I always got another error along with this error, so I kept fixing those and this error got resolved automatically.
It can happen after you've used expo prebuild --clean and when in your Podfile/AppDelegate.m was some 3rd party library specific import, like react-native-maps, or Google Maps API Key.
You'd need to put back these imports into Podfile/AppDelegate.m, next cd ios, next pod install. Still, expo start might be not enough and you'd need to build your project using Xcode. After building & running your code on Xcode, the error will be gone and the emulator will start.
There is some difference between how Expo and Xcode build/simulate the app, but I'm at quite an early stage regarding distinguishing these differences. I've also noticed sometimes you need to first build the project on Xcode first, if the app isn't installed on the simulator yet, and only then running the app from simulator launched via expo start --dev-client. Otherwise, I was getting an error Error: The development client (com.XYZ.ABC) for this project is not installed. Please build and install the client on the simulator first. or Invariant Violation: Native module cannot be null. or Invatian Violation: 'main' has not been registered....
If you have changed the application and package name using react-native-rename,
in the file ios/AppName/AppDelegate.mm
Synchronize the application name with the app.json file by finding the lineUIView *rootView = RCTAppSetupDefaultRootView(bridge, #"AppName", nil);
I'm not great at diagnosing these stack traces but my project just suddenly started throwing this error. I installed react-native-skeleton-content which then threw errors for react-native-gesture-handler here I am thinking that gesture handler was just a result of some other peer dependency updating.
I uninstalled both and voila. The expo server runs again and processes the app just fine. Had I slept on it I never would have known but yeah, as a newbie, try deleting a new package you just installed and it's dependencies. It's likely the cause of a new issue.
I finally found a solution that worked for me!
I just execute it again:
npm install -g expo-cli
ps.: In my case, it may have happened because I tried to install Turtle CLI and had to remove it to free disk space. This may have corrupted the expo files.
For iOS, we need to make one additional change in ios>appName>AppDelegate.mm file,
Search for RCTAppSetupDefaultRootView and update old_app_name to new_app_name
Even tho module is installed and it exists, Flow cannot resolve it and throws error.
See below:
1) Inside bash I ran flow and it throws error that module is not found
user#pc:~/code/project$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/functionalities/Growth/index.js:3:25
Cannot resolve module react-redux.
1│ // #flow
2│ import React from "react"
3│ import { connect } from "react-redux"
4│
5│ type Props = {
6│ children: Function
Found 1 error
2) Below command checks whether directory exists and it does
user#pc:~/code/project$ ls node_modules | grep react-redux
react-redux
I tried to remove and reinstall both node_modules directory and yarn.lock file.
Versions should be matching:
flow version
Flow, a static type checker for JavaScript, version 0.77.0
.flowconfig:
[version]
0.77.0
This is very likely bug with Flow, I also submitted issue.
How to fix it
You have two options:
stub the dependency by hand
bring in flow-typed to find the dependency type
file/stub it for you
I use option 2 but it is nice to know what is happening underneath
Option 1
In .flowconfig, add a directory under [libs],
...
[libs]
/type-def-libs
...
Now, create that directory at your project root and a file /type-def-libs/react-redux which contains,
declare module 'react-redux' {
declare module.exports: any;
}
Option 2
install flow-typed, if using yarn yarn add -D flow-typed
I prefer to install every locally to the project when possible
run yarn flow-typed install
this will install any type definition files for modules that it finds AND it will stub any modules it doesn't find, which is similar to what we did in option 1
Why is this error happening
Flow is looking for the type definition for the module you are importing. So while the module does exist in /node_modules that module doesn't have a type definition file checked into its code.
I had the same issue as you.
I resolved it by using flow-typed
I did the following:
Install flow-typed globally. example: $ npm install -g flow-typed
Then inside your project root folder, run $ flow-typed install react-redux#5.0.x
• Searching for 1 libdefs...
• flow-typed cache not found, fetching from GitHub...
• Installing 1 libDefs...
• react-redux_v5.x.x.js
└> ./flow-typed/npm/react-redux_v5.x.x.js
react-redux
You should see this if the install was successful.
Then try running flow again $ npm run flow in your project. The error with react-redux will no longer be there.
Alternative solution (for some cases)
Check your .flowconfig and remove <PROJECT_ROOT>/node_modules/.* under the field [ignore] (in case you have it there).
UPDATE 1 (by arka):
Or you can add !<PROJECT_ROOT>/node_modules/react-redux/.* after <PROJECT_ROOT>/node_modules/.*. This will ignore all the modules except for react-redux.
Thanks to #meloseven who solved it here.
I checked my package.json file and noticed react-redux was missing. I manually added it to the dependencies "react-redux": "x.x.x" and ran npm install thereafter. Note that the version number should be compatible with the other modules.
Please ensure that you provide the path under 'ignore' in .flowconfig, like this:
[ignore]
.*/node_modules/react-native/Libraries/.*
and not like this:
.*/node_modules/react-native/Libraries/Components
.*/node_modules/react-native/Libraries/Core
....