I've been struggling with a very odd bug(?) with regards to importing an API module into a nested component in a Vue app.
This is the simplest I could reduce the issue down to.
https://codesandbox.io/s/rough-tree-fqj7o
Essentially, the DogsCreate component renders the CreateDogsModal, which is importing the dogs module from the API directory.
As you can see, the codesandbox errors out even on the base URL with the error Cannot read property 'default' of undefined. If running this code locally not on codesandbox, the base URL renders ok, but if you go to /dogs/create, the error then becomes Failed to resolve component: CreateDogsModal.
The things I've found that fix this are:
Commenting out the API import statement in CreateDogsModal (not an option for us, we need to be able to create and import API modules)
Commenting out the TopNav component in main.js (...also not an option for us)
Importing the TopNav component in App.vue with a relative import or #/components/TopNav.vue works fine, but strangely importing CreateDogsModal and CreateTemplate in DogsCreate.vue with a relative import or #/components/[component-name].vue does not. Also, the latter would be somewhat acceptable as a long-term solution, but I'd prefer the #/components shorthand and that still leaves the root cause undetermined.
I'm using the default vue-cli webpack configuration and have checked via vue inspect that the alias seems to be set properly.
I've been spinning my wheels for a week trying to figure this out and just...cannot. Does anyone have any ideas for what may be happening?
It seems like a race condition in Webpack, using parallel builds, but I'm honestly not sure. I can see CreateDogsModal being pulled in from two places, starting from main.js:
'main.js'
- import 'App.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
- import 'router/index.js'
- import '#/views/Dogs/DogsCreate.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
One workaround is to remove the race by making the CreateDogsModal an async component in DogsCreate:
// DogsCreate.vue
import { defineAsyncComponent } from "vue";
import { CreateTemplate } from "#/components";
export default {
name: "DogsCreate",
components: {
CreateTemplate,
CreateDogsModal: defineAsyncComponent(() => import("#/components/CreateDogsModal.vue")),
},
};
demo
I used npm init react-app appname which creates, among other files, App.js. In that file is a function component:
function App() {
return (
<SomeJSX />
);
}
I edited the function component into a class component, like so:
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Now, when I run npm start, I get an error:
Failed to compile
src/App.js
Line 4:19: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
I imagine I need to add some setting somewhere that will automatically include React without me needing to explicitly import it at the top of every file. How do I do this? And why does this npm package not do that by default? I know a bit about javascript (and html and css), and have read a bit about React, but I am completely unaware of how npm or webpack works.
Thanks in advance!
EDIT: To clarify, I know how to import stuff with javascript. I can easily add import React from 'react'; to the file and make it work. However, I find it difficult to believe that adding an import statement to every single javascript file is the recommended method, and I don't understand why this example app wouldn't be set up so as to avoid having to do that. Am I mistaken? Do I really need to manually import the same thing over and over again within the same project? Could I set a global variable to React so that I can use it from wherever?
In your default function component you're not extending any classes and just writing a simple function
function App() {
return (
<SomeJSX />
);
}
In class component, you're in fact extending the Class Component by React.Component provided by React default export object and hence you must import it from the package
//only use one of these
import * as React from "react";
import {Component} from "react"; // you can directly extend without writing `React.` with this import
import React from "react"
So your code would be
import React from "react";
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Any of the above imports should be fine with a preference to the first and second one.
I am very new to Vue and I have read an article or two about it (probably vaguely).
Also, Since I have some understanding of react, I tend to assume certain things to work the same way (but probably they do not)
Anyway, I just started with Quasar and was going through the Quasar boilerplate code
In the myLayout.vue file, I see being used inside my template
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar
color="negative"
>
<q-btn
flat
dense
round
#click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu" />
</q-btn>
based on my vaguely understanding, I thought for every component we are using to whom we need to pass props we need to import it as well but unfortunately I can't see it in my import-script area
<script>
import { openURL } from 'quasar'
export default {
name: 'MyLayout',
data () {
return {
leftDrawerOpen: this.$q.platform.is.desktop
}
},
methods: {
openURL
}
}
</script>
I would've thought the script to be something like
<script>
import { openURL } from 'quasar'
import {q-icon} from "quasar"
or at least something like that but here we only have
import { openURL } from 'quasar'
Also, Even if we remove the above snippet, our boilerplate app looks to be working fine so here are my two questions
Question 1: What is the use of import { openURL } from 'quasar' (like what it does)
Question 2: How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?
How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?
There are two ways to import components. The first way (which I recommend, and being most similar to React) is to import the component and add it to the components option inside the component that you want to use it within.
App.vue
<div>
<my-component/>
</div>
import MyComponent from 'my-component'
export default {
components: {
MyComponent
}
}
The second way is to import it globally for use within any Vue component in your app. You need only do this once in the entry script of your app. This is what Quasar is doing.
main.js
import Vue from 'vue'
import MyComponent from 'my-component'
Vue.component('my-component', MyComponent)
What is the use of import { openURL } from 'quasar' (like what it does)
I'm not familiar with Quasar, so I can't give you a specific answer here (I don't know what openURL does). You should check the Quasar docs.
openURL is being used as a method here. Perhaps it is being called from somewhere in the template (which you have excluded from the question).
A1) Import statement is 1 way (es6) way to split your code into different files and then import functions/objects/vars from other files or npm modules see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
A2) Vue allows 2 mechanisms to register components. Global and local. Globally registered components does not have to be imported and registered in every component before use (in template or render fn). See URL from comment above https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration
I just started with React.js and I am unable to import component.
I have this structure as followed by this tutorial (YouTube link) :
-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js
This is my index.js:
import React from 'react';
import { render } from 'react-dom';
import { MyCompontent } from "./components/MyCompontent";
class App extends React.Component {
render() {
return (
<div>
<h1>Foo</h1>
<MyCompontent/>
</div>
);
}
}
render(<App />, window.document.getElementById('app'));
This is MyComponent.js:
import React from "react";
export class MyCompontent extends React.Component {
render(){
return(
<div>MyCompontent</div>
);
}
}
I am using this webpack file (GitHub link).
However, when I run this, my module fails to load.
I get this error in the browser console:
Error: Cannot find module "./components/MyCompontent"
[WDS] Hot Module Replacement enabled. bundle.js:631:11
[WDS] Errors while compiling. bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
/home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
# ./src/app/index.js 11:20-56 bundle.js:669:5
Can't figure out what went wrong here.
For anyone coming here without a typo, and is using Webpack, be sure to check for a clause like this:
resolve: {
extensions: [".jsx", ".js"]
},
in your webpack.config.js.
This tells your transpiler to resolve statements like:
import Setup from './components/Setup'
to
import Setup from './components/Setup.jsx'
This way you don't need the extension.
You have a typo in your import. You're requesting MyCompontent. Change to:
import MyComponent from "./components/MyComponent";
And all typos as well.
You can try to import MyCompontent from "./components/MyCompontent.js"
like this
import MyCompontent from "./components/MyCompontent.js";
You have written that the filename is MyComponent.js.
Thus, your import should look like
import { MyCompontent } from './components/MyComponent.js'
The problem for me was that import line was not generated correctly. I have this scenario:
--src
----elements
-----myCustomText.tsx
this is myCustomText.tsx file:
export interface Props {
text: string;
}
const MyCustomText = ({ text }: Props) => (
<Text>{text}</Text>
);
export default MyCustomText
And the generated import was this:
import MyCustomText from '../../elements/MyCustomText';
and I changed it to this:
import MyCustomText from '../../elements/myCustomText'
I don't know why the generated import line was generated automatically wrong.
I found myself here without a typo and without a webpack issue.
The solution for me was to restart the typescript server via VS Code.
I just had this issue, no type or webpack config issues.
What fixed it was changing the import from relative to the app root directory to relative to the file:
import MyComponent from "src/components/MyComponent";
to
import MyComponent from "../components/MyComponent";
If you're getting this from Visual Studio Code auto-importing via the shortest route, you can change it so it imports relatively. By going here:
menu File → Preferences → Settings → User Settings,
"typescript.preferences.importModuleSpecifier": "relative"
export 'Component' (imported as 'Component') was not found in 'react'
if you find your self stuck with this error simply go to mini-create-react-context, and go to cjs, and go to index.js and add "React" example: you will find this (Component) solution (React.Component) only if you extends to React.Component in you pages
Note: I have only used this on VS Code
I am getting this error:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
This is my code:
var React = require('react')
var ReactDOM = require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link
var App = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
</ul>
</div>
)
}
})
var About = require('./components/Home')
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>
), document.body)
My Home.jsx file:
var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');
var Home = React.createClass({
render:function() {
return (
<RaisedButton label="Default" />
);
},
});
module.exports = Home;
In my case (using Webpack) it was the difference between:
import {MyComponent} from '../components/xyz.js';
vs
import MyComponent from '../components/xyz.js';
The second one works while the first is causing the error. Or the opposite.
you need export default or require(path).default
var About = require('./components/Home').default
Have you just modularized any of your React components? If yes, you will get this error if you forgot to specify module.exports, for example:
non-modularized previously valid component/code:
var YourReactComponent = React.createClass({
render: function() { ...
modularized component/code with module.exports:
module.exports = React.createClass({
render: function() { ...
In my case, one of the exported child module was not returning a proper react component.
const Component = <div> Content </div>;
instead of
const Component = () => <div>Content</div>;
The error shown was for the parent, hence couldn't figure out.
If you get this error, it might be because you're importing link using
import { Link } from 'react-router'
instead, it might be better to use
import { Link } from 'react-router-dom'
^--------------^
I believe this is a requirement for the react router version 4
Don't get surprised by the list of answers for a single question. There are various causes for this issue;
For my case, the warning was
warning.js:33 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. Check your code at index.js:13.
Followed by the error
invariant.js:42 Uncaught 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.
I couldn't understand the error since it doesn't mention any method or file name. I was able to resolve only after looking at this warning, mentioned above.
I have the following line at the index.js.
<ConnectedRouter history={history}>
When I googled for the above error with the keyword "ConnectedRouter" I found the solution in a GitHub page.
The error is because, when we install react-router-redux package, by default we install this one.
https://github.com/reactjs/react-router-redux but not the actual library.
To resolve this error, install the proper package by specifing the npm scope with #
npm install react-router-redux#next
You don't need to remove the wrongly installed package. It will be automatically overwritten.
Thank you.
PS: Even warning helps you. Don't neglect warning just looking at the error alone.
Given your error of:
'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'
You have 2 options:
Your export file can have the word default as in
export default class someNameHere
Then your import will need to avoid using {} around it. As in
import somethingHere from someWhereHere
Avoid using the default word. Then your export looks like
export class someNameHere
Then your import must use the {}. Like
import {somethingHere} from someWhereHere
https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4
Router is also one of the properties of react-router.
So change your modules require code like that:
var reactRouter = require('react-router')
var Router = reactRouter.Router
var Route = reactRouter.Route
var Link = reactRouter.Link
If you want to use ES6 syntax the link use(import), use babel as helper.
BTW, to make your code works, we can add {this.props.children} in the App,
like
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
</ul>
{this.props.children}
</div>
)
}
In my case, that was caused by wrong comment symbols. This is wrong:
<Tag>
/*{ oldComponent }*/
{ newComponent }
</Tag>
This is correct:
<Tag>
{/*{ oldComponent }*/}
{ newComponent }
</Tag>
Notice the curly brackets
I have the same error :
ERROR FIX !!!!
I use 'react-router-redux' v4 but she's bad..
After npm install react-router-redux#next
I'm on "react-router-redux": "^5.0.0-alpha.9",
AND IT'S WORK
I got this by doing import App from './app/'; expecting it to import ./app/index.js, but it instead imported ./app.json.
I was having the same issue and realized that I was providing an Undefined React component in the JSX markup. The thing is that the react component to render was dynamically calculated and it ended up being undefined!
The error stated:
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. Check the render method of C.,
The example producing this error:
var componentA = require('./components/A');
var componentB = require('./components/B');
const templates = {
a_type: componentA,
b_type: componentB
}
class C extends React.Component {
constructor(props) {
super(props);
}
// ...
render() {
//Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
const ComponentTemplate = templates[this.props.data.uiType];
return <ComponentTemplate></ComponentTemplate>
}
// ...
}
The problem was that an invalid "uiType" was provided and therefore this was producing undefined as result:
templates['InvalidString']
Just as a quick addition to this. I was having the same problem and while Webpack was compiling my tests and the application was running fine. When I was importing my component into the test file I was using the incorrect case on one of the imports and that was causing the same error.
import myComponent from '../../src/components/myComponent'
Should have been
import myComponent from '../../src/components/MyComponent'
Note that the import name myComponent depends on the name of the export inside the MyComponent file.
Had similar issue with React Native latest versions 0.50 and up.
For me it was a difference between:
import App from './app'
and
import App from './app/index.js'
(the latter fixed the issue). Took me hours to catch this weird, hard to notice nuance :(
Another possible solution, that worked for me:
Currently, react-router-redux is in beta and npm returns 4.x, but not 5.x. But the #types/react-router-redux returned 5.x. So there were undefined variables used.
Forcing NPM/Yarn to use 5.x solved it for me.
In my case, the import was happening implicitly due to a library.
I managed to fix it by changing
export class Foo
to
export default class Foo.
I ran into this error when I had a .jsx and .scss file in the same directory with the same root name.
So, for example, if you have Component.jsx and Component.scss in the same folder and you try to do this:
import Component from ./Component
Webpack apparently gets confused and, at least in my case, tries to import the scss file when I really want the .jsx file.
I was able to fix it by renaming the .scss file and avoiding the ambiguity. I could have also explicitly imported Component.jsx
In my case I was using the default export, but not exporting a function or React.Component, but just a JSX element, i.e.
Error:
export default (<div>Hello World!</div>)
Works :
export default () => (<div>Hello World!</div>)
I got this error in react routing, problem was that I was using
<Route path="/" component={<Home/>} exact />
but it was wrong route requires component as a class/function so I changed it to
<Route path="/" component={Home} exact />
and it worked. (Just avoid the braces around the component)
And in my case I was just missing a semicolon at the import-decleration in one of my sub modules.
Fixed it by changing this:
import Splash from './Splash'
to this:
import Splash from './Splash';
In addition to import/export issues mentioned. I found using React.cloneElement() to add props to a child element and then rendering it gave me this same error.
I had to change:
render() {
const ChildWithProps = React.cloneElement(
this.props.children,
{ className: `${PREFIX}-anchor` }
);
return (
<div>
<ChildWithProps />
...
</div>
);
}
to:
render() {
...
return (
<div>
<ChildWithProps.type {...ChildWithProps.props} />
</div>
);
}
See the React.cloneElement() docs for more info.
I was getting this error also. The error was being caused by trying to export a component like this...
export default Component();
Instead of like this...
export default Component;
My understanding is that by adding the "()" at the end of the component, I was actually calling the function instead of just referencing it.
I did not see this in the answers above, but may have missed it. I hope it helps someone and saves some time. It took me a long time to pinpoint the source of this error!
The problem can also be an alias used for a default export.
Change
import { Button as ButtonTest } from "../theme/components/Button";
to
import { default as ButtonTest } from "../theme/components/Button";
solved the issue for me.
I was the same problem because I did import incorrect library, so i checked the documentation from the library and the route was changed with the new versión, the solution was this:
import {Ionicons} from '#expo/vector-icons';
and I was writing the incorrect way:
import {Ionicons} from 'expo';
Just want to add a case to this question. I walked around this issue by swapping the order of import, for example in my mixed of imports before:
import { Label } from 'components/forms/label';
import Loader from 'components/loader/loader';
...
import Select from 'components/select/select'; // <----- the error happen
After the change:
import Select from 'components/select/select'; // <----- Fixed
import { Label } from 'components/forms/label';
import Loader from 'components/loader/loader';
...
For me it was that my styled-components were defined after my functional component definition. It was only happening in staging and not locally for me. Once I moved my styled-components above my component definition the error went away.
It means some of your imported Components are wrongly declared or nonexistent
I had a similar issue, I did
import { Image } from './Shared'
but When I looked into the Shared file I didn't have an 'Image' component rather an 'ItemImage' Component
import { ItemImage } from './Shared';
This happens when you copy code from other projects ;)
I had an issue with React.Fragment, because the version of my react was < 16.2, so I got rid of it.
I was getting this issue too. My imports look fine, I could copy the contents of my copy and paste it where it was being used and that worked. But it was the reference to the component that was going wrong.
For me I just had to shut down expo and restart it.
Error? its definitely an import or export issue , you are reffering to a component or container that either you haven't exported from its defining script or when importing it u have used the wrong format.
Solution?
Go through all your component/container definitions and make sure you have exported them at the end of the script i.e "export default 'yourcomponentname';" or at the beginning of the component definition i.e
export const 'yourcomponentname'=() =>{
.......
}
At your import statements make sure you have not mixed up named and default imports based on your corresponding export statements