For context, let me try to explain a little more.
In my project I have a folder, as example, for components.
Inside that folder I have my components files, and an index.js file where I import all the components and export than in the same line as follows:
export { default as Button } from './button'
export { default as Loader } from './loader'
export { default as ImageBackground } from './image-background'
So than I can import these components in Screen Component like that:
import { Button, Loader, ImageBackground } from 'src/components'
If I edit the components file, save and reload the project, everything works fine.
The problem is that when I edit any of these components with the Hot Module Replacement (Hot Reloading) actived, when it is triggered after an edit, it throws the following error:
Unhandled JS Exception: Requiring module "src/components/index.js", which threw an exception: TypeError: Cannot redefine property: Button
Has anyone have any idea why this is happening?
Thanks in advance!
Obs: When I import the component direct without using the index.js or if inside the index.js, I first import the component, than I assign the component to a variable and than I export this variable, it works fine.
my problem was solved when I changed render = () => (...) to render(){ return (...)} in react component
Related
I am working with a React project where each component's files are contained in their own directory. I have a component.jsx file and an index.js file that re-exports the component's default export. This works as expected. I would like to simplify my import statements by re-exporting all components up directory level from the main components folder. See below for an example of my current project foloder structure.
src
--components
----Alert
------Alert.jsx
------index.js
----LoginCard
------LoginCard.jsx
------index.js
--index.js
Alert/Alert.jsx
export default function Alert(props) {
// omitted for brevity - the component itself works fine
return <Alert />
}
Alert/index.js
export { default } from './Alert';
At this point, imports work as expected in the LoginCard component.
LoginCard.jsx
import { UserContext } from '#contexts';
import Alert from '#components/Alert';
export default function LoginCard(props) {
// omitted for brevity. Again, component works as expected
return <LoginCard />
In order to achieve my desired end result of simplifying import calls, I created components/index.js:
components/index.js
export { default as Alert } from './Alert';
Which I then attempt to import as:
LoginCard.jsx
import { Alert } from '#components'
When attempting to import from component/index.js as import { Alert} from '#components' I receive an exception that states "cannot read default property of undefined". What makes this strange is that I import/export my pages and contexts in exactly the same manner and they work as expected. I originally thought that this implied an issue with my components directory alias, but the alias is working as I can import just fine from #components/Alert, just not from #components
Have a missed something simple, or am I hitting a bug? Thanks.
I think the issue here is that you are attempting to push all the exports up the tree towards the root directory. This makes sense when importing somewhere outside that root directory. The issue lies in the fact that you are attempting to import from the root while inside the directory structure. In other words, all the exports from within the directory need to be processed before anything can be exported from the root.
The snag here is that you are attempting to import Alert from the root export from LoginCard... which while being processed hasn't finished its exports, so the root export isn't ready yet.
In other words, #components/Alert is ready, #components is not.
Just use a relative import of Alert (and any other import) from within the same components directory.
import { UserContext } from '#contexts';
import Alert from '#components/Alert';
// or
import Alert from '../Alert';
export default function LoginCard(props) {
// omitted for brevity. Again, component works as expected
return <LoginCard />
New to React JS, props validation practise as follows:
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<h3>String : {this.props.propstring}</h3>
</div>
);
}
}
App.propTypes = {
propstring : PropTypes.string
}
App.defaultProps = {
propstring : "My Name"
}
export default App;
import React, { component } from 'react';
import ReactDOM from 'react-dom';
import App from './AppProp.js';
ReactDOM.render(<App />,document.getElementById('root'));
Getting an error as:
TypeError: Class extends value undefined is not a constructor or null.
What am I missing here and how can I resolve the above error?
There are 2 possible problems. Most probably you're importing { component }(like you do in your index file, which is wrong), instead of { Component } somewhere in your code and trying to extend component which doesn't exist.
The other reason is that you might be circularly importing classes, but I doubt it. Also, is your file called AppProp.js?
Post the stack trace and it would also help if you post all the components you're using. Post your package.json as well, as you might be using wrong absolute paths.
The code is perfectly fine. I executed it on my local machine and it ran fine.
The only issue you may be facing is to with
circularly importing classes, which is apparently a limitation
Know more from the resource:
https://esdiscuss.org/topic/how-to-solve-this-basic-es6-module-circular-dependency-problem
I am trying to use jquery.infinitedrag to create a component in react. My code is here:
//Grid.js
import React from 'react'
import './jquery/jquery.min.js'
import './jquery/jquery-ui.min.js'
import './jquery/jquery-ui.min.css'
import './jquery/jquery.infinitedrag.js'
export default class Grid extends React.Component{
componentDidMount() {
$.infinitedrag("wall")
}
render() {
return(
<div id="wall"/>
)
}
}
This is supposed to work by making a div (identified by id) when react renders and then filling in an infinite grid later once the component mounts. The problem is, for some reason, jquery.infinitedrag is getting confused. Here is the error:
Failed to compile.
./src/jquery/jquery.infinitedrag.js
Line 108:4: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 277:4: 'jQuery' is not defined no-undef
My file structure looks like this:
src
-jquery
-jquery.min.js
-jquery-ui.min.js
-jquery-ui.min.css
-jquery.infinitedrag.min.js
-Grid.js
-misc other components and stuff
I am fairly new to javascript, so this is probably something dumb.
npm install jquery OR npm update to remove the second error.
Preface
I'm using create-react-app to generate an application.
Problem
TodoList === undefined
Code
components/index.js
export { default as App } from './App/App.js';
export { default as TodoList } from './TodoList/TodoList.js';
containers/index.js
export { default as VisibleTodoList } from './VisibleTodoList.js';
components/App/App.js
import { VisibleTodoList } from '../../containers/index.js';
containers/VisibleTodoList.js
import { TodoList } from '../components/index.js';
components/TodoList/TodoList.js
export default function TodoList({ todos, onTodoClick }) { ... }
TodoList is now undefined. I believe it may have something to do with the fact that I have some sort of circular issue.
The thing is, if inside containers/VisibleTodoList.js I import using the following method, everything works fine.
import TodoList from '../components/TodoList/TodoList.js';
What is so special that breaks the import, if I try to import using a 'middleman' (the components/index.js file).
Full code
I have created a CodeSandbox that contains my full code, as it stands in my application. The application is pretty simplistic, but more complicated than I have outlined here.
https://codesandbox.io/s/m54nql1ky9
The problem is caused by the order of exports in your components/index.js file.
export { default as App } from './App/App.js';
export { default as TodoList } from './TodoList/TodoList.js';
Since App.js imports VisibleTodoList which needs to import TodoList and pass it to the redux connect function before it can export itself, you end up with a conflict.
I'm not sure if this is a implementation quirk of babel, or if this is a logical result from how the ES import spec is defined.
In any case, changing the order of exports fixes the bug.
export { default as TodoList } from './TodoList/TodoList.js';
export { default as App } from './App/App.js';
As a rule of thumb, if you can't refactor your files to avoid the import loop, you should put the outer layer component last in the list, since it might rely on imports higher up in the list.
Full working codesandbox here: https://codesandbox.io/s/74mlwnwyy1
I am attempting to use a single entry file for android and iOS in a React Native app.
I have followed a few tutorials and have ended up with the following:
index.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
index.ios.js
import React from 'react';
import { AppRegistry } from 'react-native';
import {Main} from './index';
AppRegistry.registerComponent('Main', () => Main);
I end up with the following 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.
If I remove the curly braces from Main in the import statement it says '...but got: object' so I feel like it's something to do with my exporting/importing but nothing seems to work. Any help would be appreciated.
You are exporting your Main component as:
export default class Main extends Component {
but importing as:
import {Main} from './index';
The default export should be imported as:
import Main from './index';
If you use default export, you must import like this. If this doesn't work, there must be another problem in your code.
React Native tries to import based on platform. For example, if you have index.ios.js and index.android.js in the same folder, React Native will bundle index.ios.js only if it is bundling for ios. It is possible that when you import from ./index, React Native is revolving the path with index.ios.js instead of index.js because you are bundling for ios.
If you are curious enough, you can try to console.log the content of the imported module, e.g. console.log(Main) to see what is actually getting imported.