I copied my code from an old project of mine so it should be able to work. However, I think when I made the new project it accidentally updated the versions causing it to go thorough an error. This is my code:
import React, {useState} from 'react';
import { Text, View } from 'react-native';
import * as Font from 'expo-font';
import { AppLoading} from 'expo-app-loading';
import {enableScreens} from 'react-native-screens'
//import from libraries
import TabNavigation from './Navigation';
//import TabNavigation
enableScreens();
const fetchFonts = () => {
return Font.loadAsync({
'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
'open-sans-bold' : require('./assets/fonts/OpenSans-Bold.ttf')
});
//fetch fonts from the folder so that we can style the title
};
export default function App() {
const[fontLoaded, setFontLoaded] = useState(false);
if(!fontLoaded){
return (
<AppLoading
startAsync ={fetchFonts}
onFinish={()=> setFontLoaded(true)}
/>
);
}
//this will ensure that the font will always be loaded.
return(
<TabNavigation />
);
}
The thing I'm trying to do is run this program and then return Navigation where all the navigation process works.
Here is the error:
Component exception
Element type is invalid: expected a string(for built-in components) or a class/function (for complete components) but got: undefined. You likely forgot to export your component from. the file it's defined in, or you might have mixed up a default and named imports. Check the render method of 'App'.
You don't need to do this fetchFonts method
to load the fonts. If you installed the fonts correctly you just need to put the attribute fontFamily in any style, with the name of the font as its value, for example: textStyle:{ fontFamily: 'Montserrat-Bold' }
For a better understanding you can check this link.
Change your import for app Loading
import AppLoading from 'expo-app-loading';
First, open the terminal and go to the project directory.
Second, run the following command to install the expo-app-loading module:
expo-app-loading
Third, import the module into your App.js file:
import AppLoading from 'expo-app-loading';
Tested on Expo 4.9.0
Related
I have a React app that imports components from an own library of components. The library of components is a .js bundle created with Webpack.
The component that I am importing, imports another file which imports SVG files.
Original non-bundled file which imports SVGs:
import React from "react";
import {ShoppingBag32} from '#carbon/icons-react';
import {ReactComponent as OwnIcon} from "../design/icons/OwnIcon.svg";
const foo = {
shop: <ShoppingBag32/>,
ownIcon: <OwnIcon/>,
};
export default foo;
The #carbon/icons-react icons which are precompiled in their own plain JS bundle, work fine. But my own SVG fails to work.
I get:
Warning: React.createElement: 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.
The stack trace of the warning leads to the line in the bundle where ownIcon is defined. You can see that the working icon of the 3rdparty bundle points to a ShoppingBag32 key, and my own SVG points to a ReactComponent key.
var foo = {
shop: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_0__["ShoppingBag32"], null),
ownIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_design_icons_SolarPanel32_svg__WEBPACK_IMPORTED_MODULE_1__["ReactComponent"], null)
};
Any ideas on how fix the SVG import?
EDIT
I found out a workaround, the img tag can be used with the SVG path as source. But I don't like this solution because I would like the entire SVG markup to be rendered in the DOM instead of an img tag.
import React from "react";
import {ShoppingBag32} from '#carbon/icons-react';
import OwnIcon from "../design/icons/OwnIcon.svg";
const foo = {
shop: <ShoppingBag32/>,
ownIcon: <img src={OwnIcon}/>,
};
export default foo;
If you are using the default create react app, you will need to reference your SVG as follows:
import OwnIcon from "../design/icons/OwnIcon.svg";
The reason it is like import {ShoppingBag32} from '#carbon/icons-react'; for carbon is because it is referenced as an export in that package as opposed to locally which webpack needs a name for the default export of an image.
I am currently working on a project in React Native and upon trying to create the first set of screens I began receiving this Error...
"Error: 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 am not a beginner in React Native, but am also not an expert and this is my first time working on a RN build on my Macbook. I am not sure if there is a typo I have missed somewhere, if my path is not defined correctly, or if I am simply in need of another coffee - either way, I would love another set of eyes on it and any help is greatly appreciated. I will post the code of my Welcome Screen component and App.js below. Aside from the assets, these are the only files I am working in. I will also post a screenshot of my file structure. Thank you again!
import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen';
export default function App() {
return (
<WelcomeScreen />
);
};
import React from 'react';
import { ImageBackgroundComponent, StyleSheet, View } from 'react-native';
function WelcomeScreen(props) {
return (
<ImageBackgroundComponent style={styles.background} source={require('../assets/background.jpg')}>
<View style={styles.loginButton}>
</View>
</ImageBackgroundComponent>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
loginButton: {
width: '100%',
height: 70,
}
})
export default WelcomeScreen;
File Structure
Try to use ImageBackground instead of ImageBackgroundComponent
I've been trying to load a GLTF model into my gatsby site using react-three-fiber, but can't seem to get it to load. This seems like it should be very simple, but I'm new to Gatsby and threejs and was wondering if I could get some guidance.
My model is stored as static/models/crerar.glb, and I used gltfjsx to generate a Model component. I've tried referencing just 'models/crerar.glb' but haven't had luck either.
In index.js, I have:
import Layout from "../components/layout"
import SEO from "../components/seo"
import React, { Suspense, useRef, useState } from "react"
import { Canvas, useFrame, useLoader } from "react-three-fiber"
import Model from "../components/Crerar"
const IndexPage = () => (
<Layout>
<Canvas>
<ambientLight intensity={0.2} />
<Model />
</Canvas>
</Layout>
)
export default IndexPage
and in Crerar.js (stored in components)
/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/
import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
export default function Model(props) {
const group = useRef()
const { nodes, materials } = useLoader(GLTFLoader, '../static/models/crerar.glb')
return (
<group ref={group} {...props} dispose={null}>
<mesh material={nodes.mesh_0.material} geometry={nodes.mesh_0.geometry} />
</group>
)
}
the path is wrong. the json.parse error you're getting is because the loader tries to parse a HTML 404 fetch-error as a GLTF. you can make sure by opening dev tools and the networking tab. you should see it's trying to reach your file, but can't.
if the model is within your src folder you have to import it first, then use the hashed url that you get. this is my recommendation, don't mess around with public files, always import your stuff. it's safer, the compiler will complain if the file isn't present, and it's better for cache control.
otherwise, if the file is inside /public or i guess it's /static in gatsby (?) then the url has to be something like "/file.glb". sometimes it's /public/file.glb or /static/file.glb, it depends on your bundling environment (you can try fetching the file via the browsers url bar, if an url works, that's the one you should pass on to the loader).
if your file is draco compressed, then draco must also be inside public or static. see: https://codesandbox.io/s/r3f-ibl-envmap-simple-y541h
you can safely use useLoader(GLTFLoader, url), it's just a wrapper around new GLTFLoader().load(url, data => ...) + suspense. It's not experimental any longer, even though it may have that warning on Github.
gatsby copies everything from static into the public folder, so change your url to:
const { nodes, materials } = useLoader(GLTFLoader, '/models/crerar.glb')
Good day
I am a novice React developer building a site for a client using ES6 standards. I have found a component for which the usage as description uses an older syntax, and I am having some trouble implementing my code. I am receiving an error message that I am not sue how to resolve.
The component in questions can be seen here:
https://www.npmjs.com/package/react-fontawesome
it instructs you to use the component as follows:
var React = require('react');
var FontAwesome = require('react-fontawesome');
React.render(<FontAwesome name='rocket' />, document.body);
To my understanding, this is an older way of writing React code. I have thus updated my code to for the ES6 standard.
I scratched in my package.json file to find out where to import the component from, so I am not sure if this is perhaps where I have gone wrong.
Below is a copy of my code using what I believe to be the correct implementation:
import React, { Component } from "react";
import FontAwesome from '#fortawesome/fontawesome-svg-core';
export class Footer extends Component {
constructor(props) {
super(props);
}
render = _ => {
return (
<div>
<FontAwesome name='rocket' />
</div>
);
}
}
When I import the component and run the code I get the following error:
React.createElement: 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.
Check the render method of Footer.
in Footer (created by App)
in div (created by App)
If anyone would be kind enough to let me know where I might be going wring, I would be incredibly grateful.
There's a simple example on their docs page that should help out:
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
I'm reorganizing the code in my application into a bunch of sub-folders. I'm moving a top-nav component into a subfolder called navigation, this component makes up part of a 'main-nav' container. However, when I shift top-nav into the new folder I start getting the following erro
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.
Check the render method of TopNavTemplate.
I've been reading through a lot of threads and I can't figure out why shifting the poisition would cause this. I've made sure that the component is pointing to the appropriate imports within the file restructure (these errors get thrown before the current error anyway, so it at least thinks that it's pulling everything in correctly.) I also don't think it's a syntax error in the import statement - I'm connecting the top-nav to my redux store as a default export, and I'm not importing it between {}.
Code for the top-nav export can be found below:
import React from 'react';
import {Link} from 'react-router-dom';
import ClickOutside from 'react-click-outside';
import {IconSprite} from '../general/icons.js';
import {Modal} from './modal.js';
import {HeaderSelect} from './select.js';
//Import statements that connect TopNav to the redux store
import * as actionCreators from '../../actions/actionCreator.js';
import { bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import logo from '../../logo.svg';
export class TopNavTemplate extends React.Component {
//Render function and a bunch of code goes here
}
function mapStateToProps(state) {
return {
selectedTarget: state.selectedTarget,
availableTargets: state.availableTargets,
modal: state.modal,
currentUser: state.currentUser,
isLoggedIn: state.isLoggedIn
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const TopNav = connect(mapStateToProps, mapDispatchToProps)(TopNavTemplate);
export default TopNav;
I then import the TopNav into my main-nav layout like so:
import React from 'react';
import TopNav from '../components/navigation/top-nav.js';
import {SideNav} from '../components/side-nav.js';
export class MainNav extends React.Component{
render(){
return ([
<TopNav />,
<SideNav />
])
}
}
If I change the import statement to pull from the old version of the file
import TopNav from ../components/top-nav.js
everything works like a charm. I've even tried removing that file to prevent any kind of web-pack confusion but that doesn't seem to the issue. For some reason, moving this file into a different folder is now causing the export to be undefined instead of a proper react component? Feeling very lost.
It turned out to be a very stupid mistake - I'd forgotten to save one of the files I was importing while shifting everything around. For some reason this wasn't throwing an error that the import couldn't be found, and was instead causing the wrapped connect component to return as undefined.