I am getting an error
Invariant Violation: 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
I have both CustomButton and InputLabel classes
import React, {Component} from 'react';
import { anycomps... } from 'react-native';
export default class CustomButton extends Component{}
and
import React, {Component} from 'react';
import { anycomps... } from 'react-native';
export default class InputLabel extends Component{}
and in my index.js
import CustomButton from './CustomButton';
import InputLabel from './InputLabel';
export { CustomButton, InputLabel };
and in my app.js
import React, {Component} from 'react';
import { anycomps... } from 'react-native';
import { CustomButton, InputLabel } from './components';
export default class MyMain extends Component{
... code renders here
}
my folder structure is:
> components
>CustomButton.js
>InputLabel.js
>index.js
> app.js
What did I miss or do wrong?
I tried it this way Vue Apps and it worked. Is react native having different implementation for this?
Related
Im totally new in Ts so, i was wondering if I can import all classes i have into one ts file then export it from there, so whenever i want any class i can import it directly from this file
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export default { Login, MyAccount,Settings, DataProvider};
Yes, You can do it. But there can be atmost one default export in a file. So, you can have it or not, its optional.
So, for example :
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export default DataProvider;
export { MyAccount,Settings, DataProvider} ;
or
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export {DataProvider, MyAccount,Settings, DataProvider} ;
I create one component in the widget folder and import it into my main homepage (index.js)
It showing error
Error: Element type is invalid: expected a string (for built-in components) or 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.
The main file code is
import { React, Component } from "react";
import axios from "axios";
import Style from "./widget-style/Notified.module.css";
import NotifiedModal from "../modals/NotifiedModal";
export default class GetNotified extends Component {}
You have to import React like this:
import React, { Component } from "react";
The first one is a default import, the second is a named import.
I would like to know how to solve this problem.
You got this suddenly, and I still haven't found a solution!
my app_tsx
import type { AppProps } from "next/app";
import React from "react";
// styles
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/perspective-subtle.css";
import "tippy.js/themes/light.css";
import "../styles/globals.scss";
import "react-toastify/dist/ReactToastify.css";
// components
I'm getting stuck at the step that requires me to create a firebase/Context.jsx file, which I have done as follows:
import React from 'react';
const FirebaseContext = React.createContext(null);
export default FirebaseContext;
Then in index.js, I try to import Firebase Context as:
import Firebase, { FirebaseContext } from './components/firebase/Context';
I get an error that says:
Attempted import error: 'FirebaseContext' is not exported from
'./components/firebase/Context
How do I export/import in react?
To get rid of the error you posted, in firebase/Context.jsx change it to :
import React from 'react';
export const FirebaseContext = React.createContext(null);
Then import
import { FirebaseContext } from './components/firebase/Context';
Alternatively, leave firebase/Context.jsx file as it is (exporting a default) and change the import to
import FirebaseContext from './components/firebase/Context';
the problem I try to solve
import * as React from 'react';
import {Component} from 'react';
I dont like it being two lines - to be frank it is not even allowed by my linter settings.
But writing the following
import * as React from 'react';
const Component = React.Component;
doesnt look fine to me as welll - as I willl have llines of imports and than const delarations - which are actually imports
in a non TS syntax the above lines could have been
import React, {Component} from 'react';
and this is what I am looking for, but
import * as React, {Component} from 'react';
is not a valid syntax.
The question
how can I acchieve a one liner with namespace import and partial import
Starting from TypeScript 2.7, you can enable esModuleInterop in your tsconfig.json to enable import React, { component } from 'react'
There is a specific meaning for import * as React from 'react', which is getting the module namespace object of the module react.
As it gets everything in the module, it is more natural to use React.component then extracting component using the import { component } from 'react' in addition.