Warning: React.createElement: type is invalid -- bundle.js
I'm taking a tutorial to learn React JS, everything was fine, for days I could run an example, simple, carrying out a recommended basic configuration, plus a few more add-ons that I add to recognize the Javascript version.
After several days of no longer reviewing the project, but it is working correctly, when executing the command, I do not see any error, but it does not show anything in the browser, only multiple errors appear in the console of this one.
I have uninstalled and reinstalled reac and react-dom, and the problem still persists, try a new project cloning it from a friend, and it works normally, and it only copied the same structure of mine.
Issues
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 above error occurred in one of your React components: Consider adding an error boundary to your tree to customize error handling behavior.
It should be noted that errors appear in the file bundle.js, which is used to store the generated code through webpack
package.json
{
"name": "prueba",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "concurrently \"node server.js\" \"webpack -w\" "
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"serve-static": "^1.13.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.5.1",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.7.0",
"webpack": "^3.10.0"
}
}
webpack.config.js
const path = require('path');
const config = {
entry: './src/index.jsx',
output: {
path: path.resolve('js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.jsx$/,
use:{
loader:'babel-loader'
},
exclude: /node_module/
}
]
}
}
module.exports = config;
app.jsx
import React, {Component} from 'react';
import {render} from 'react-dom';
class App extends Component{
render(){
return(
<div>
<h1>Mi Aplicacion React Js</h1>
<h3>Probando la exportacion</h3>
</div>
)
}
}
export default App;
index.jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';
render(
<App/>,
document.getElementById('appStart')
)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aprendiendo React</title>
</head>
<body>
<div id="appStart"></div>
<script src="js/bundle.js"></script>
</body>
</html>
Console
C:\Users\PterPmntaM\CursoReactJS\React_Scaffold> npm run dev
> [email protected] dev C:\Users\PterPmntaM\CursoReactJS\React_Scaffold
> concurrently "node server.js" "webpack -w"
[0] Iniciando servidor
[1]
[1] Webpack is watching the files...
[1]
[1] Hash: 5fd2ce10b3c1788b385b
[1] Version: webpack 3.10.0
[1] Time: 4878ms
[1] Asset Size Chunks Chunk Names
[1] bundle.js 729 kB 0 [emitted] [big] main
[1] [14] ./src/index.jsx 381 bytes {0} [built]
[1] + 27 hidden modules
Answer
In app.jsx, the component is exported like so:
export default App;
But it's being imported like so:
import {App} from './components/app.jsx';
The code fails because the App export doesn't exist from app.jsx, and comes up undefined as the error suggests. It's being exported as default instead.
This is the correct way to import it:
// The recommended way
import App from './components/app.jsx';
// The alternative way, to better illustrate what's going on
import { default as App } from './components/app.jsx';
Here's a good overview for ES modules: http://exploringjs.com/es6/ch_modules.html