I am working on a practice application in reactjs and I am getting this error that I have been unable to figure out even with perusing through SO:
ERROR in ./App.js
Module build failed: SyntaxError: Unexpected token, expected , (6:13)
4 | render(){
5 | return (
> 6 | <li>{{this.props.name}}</li>
| ^
7 | )
8 | }
9 | }
# ./main.js 11:11-27
These are the files:
webpack.config.js:
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
package.json:
{
"name": "react-test",
"version": "1.0.0",
"description": "react test application",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "Daniel Cortes",
"license": "ISC",
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<style type='text/css'>
body, input {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="app" class="container-fluid"></div>
<script src='index.js'></script>
</body>
</html>
App.js:
import React from 'react';
import ReactDOM from 'react-dom';
class Channel extends React.Component {
render(){
return (
<li>{{this.props.name}}</li>
)
}
}
export default Channel
main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Channel from './App';
ReactDOM.render(<Channel name='Hardware Support' />, document.getElementById('app'));
In App.js, simply pass the expression this.props.name rather than {this.props.name} as the desired value:
render(){
return (
<li>{this.props.name}</li>
)
}
Related
I'm curently building a React JS app and I've this error when I go on the '/' of my project :
"Uncaught Error: Target container is not a DOM element."
In my project I've some components and few pages, and when I run my server with "npm start" I can't access to my main page.
My app was build without webpack, I added it after all my components were done.
webpack.config.js :
const path = require('path');
module.exports = {
devServer: {
historyApiFallback: true
},
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
}
]
}
};
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React 101</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
.babelrc :
{"presets": ["#babel/preset-env", "#babel/preset-react"]}
main.js :
import React from "react";
import ReactDom from "react-dom";
import App from "./App";
ReactDom.render(<App />, document.getElementById('app'));
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../src/assets/css/bootstrap/css/bootstrap-theme.min.css';
import '../src/assets/css/bootstrap/css/bootstrap.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
After a lot of efforts i was able to install and configure ReactJS. After executing "npm start" command, the code was "COMPILED SUCCESSFULLY" and redirected me to the web browser.
But there wasn't any output, ie., the browser was "blank".
Can anyone resolve this?? ( my first post here )
Also check the code that i have used..
index.html file
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>
App.js
import React, { component } from 'react';
class App extends Component {
render(){
return(
<div>
<h1> Hello World</h1>
<p>Hello </p>
</div>
);
}
}
export default App;
main.js
import React from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
package.json snippet
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
The only issue is the output is not getting displayed on browser..
command prompt
COMMAND PROMPT AFTER "npm start"
browser
output not displaying
Add an .babelrc file in root folder with following:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
And package.json is expected to include following dependencies:
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
Update
Also update webpack.config.js to:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./main.js",
output: {
path: path.join(__dirname, "/bundle"),
filename: "index_bundle.js"
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
};
Check the path and change Component to component.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path="/" component={HomePage} exact />
</div>
</Router>
);
}
}
I'm a complete beginner at web development + react, and am running
into a problem as I try to render an imported component.
I'm trying to render the following component: https://www.npmjs.com/package/react-launch-gauge
However, when i run, i keep getting the following error:
> Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
What am I doing wrong? My code is below
App.jsx
import React from 'react';
import Gauge from 'react-launch-gauge';
class App extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<div>
<Gauge title={'Points'} value={42} max={100} />
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
package.json
{
"name": "iw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-launch-gauge": "^0.2.3",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
I believe you'd need to supply constructor to properly initialize App Component, like so:
App.jsx
import React from 'react';
import Gauge from 'react-launch-gauge';
class App extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<div>
<Gauge title={'Points'} value={42} max={100} />
</div>
);
}
}
export default App;
I have meet same problem like you, this reason is that Gauge has not defined.
so you must definde it with basic structure and export it , you will solve it
and like this
I am not seeing any output on the screen, but I am also not getting any errors. I will post what I can think of being needed. I am starting a new project and trying things a little differently so some help is needed.
Update: Here is how I launch the app. I run npm run server in the console from root directory and this is the script "server": "nodemon --watch server --exec babel-node -- server/index.js"
webpack.config:
import path from 'path';
import webpack from 'webpack';
export default {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client',
path.join(__dirname, './client/index.js')
],
output: {
filename: 'bundle.js',
path: '/',
publicPath: '/'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'client'),
loaders: [ 'react-hot-loader', 'babel-loader' ]
}
]
},
resolve: {
extensions: ['*', '.js']
}
}
index.js:
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
render(<App />, document.getElementById('app'));
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<div id="app"></div>
<scrip src="bundle.js" type="text/javascript"></scrip>
</body>
</html>
App:
import React from 'react';
class App extends React.Component {
render() {
return (
<h1>!Hello from react!</h1>
)
}
}
export default App;
Server index.js:
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler));
app.use(webpackHotMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true
}));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, './index.html'));
});
app.listen(3000, () => {
console.log('listening on port 3000');
});
Typo in <scrip src="bundle.js" type="text/javascript"></scrip>
<script> instead <scrip>
I'm new to ReactJS. I'm trying out the code from egghead.io and I keep getting the following error:
Uncaught SyntaxError: Unexpected token import
I have loaded babel twice now and have followed along the lesson as described, but it just won't load into the html page. Here is the codes:
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Setup</title>
</head>
<body>
<div id = "app"></div>
<script src = "main.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App2';
ReactDOM.render(<App />, document.getElementById('app'))
app2.jsx
import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component {
render(){
let txt = this.props.txt
return <h1>{txt}</h1>
}
}
App.propTypes = {
txt: React.PropTypes.string,
cat: React.PropTypes.number.isRequired
}
App.defaultProps = {
txt: 'this is the default txt'
}
ReactDOM render(
<App cat={5}/>,
document.getElementById('app')
)
package.json
{
"name": "es6-react-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5"
}
}
Please help.
After installing the Babel presets for ES6 and React you need to enable them either by creating a .babelrc file or by opting in in your package.json file.
(Confusing) docs here: http://babeljs.io/docs/usage/babelrc/
Example package.json entry enabling the presets:
"babel": {
"presets": [
[
"env",
{
"modules": false
}
],
"react"
]
}
import is the ES6 syntax. You need to npm install babel-preset-es2015 babel-preset-react --save-dev to tell babel compile your ES6 and React code.
you can load 2 packages in your webpack.config.js file :
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
I hope it will help you.