React Component not loading with Webpack and Babel Beginner's level Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Importing CSS files in Isomorphic React ComponentsWebpack and React — Unexpected tokenwebpack babel and react simple example fails“exclude” options of babel-loader in WebpackBabel Transform Runtime issue with Webpack 2Webpack hot module replacement not working with babel-loader and preset es2015How to fix HTML file comments not being ignored by Webpack Dev Server?Setup webpack for react projectReact build issue, ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):Webpack css issue, missing bundle.css
2001: A Space Odyssey's use of the song "Daisy Bell" (Bicycle Built for Two); life imitates art or vice-versa?
Withdrew £2800, but only £2000 shows as withdrawn on online banking; what are my obligations?
また usage in a dictionary
What is homebrew?
Do square wave exist?
Delete nth line from bottom
Is it ethical to give a final exam after the professor has quit before teaching the remaining chapters of the course?
Circuit to "zoom in" on mV fluctuations of a DC signal?
Do wooden building fires get hotter than 600°C?
How could we fake a moon landing now?
Is safe to use va_start macro with this as parameter?
Is it cost-effective to upgrade an old-ish Giant Escape R3 commuter bike with entry-level branded parts (wheels, drivetrain)?
How can I use the Python library networkx from Mathematica?
What do you call the main part of a joke?
What does "lightly crushed" mean for cardamon pods?
How to tell that you are a giant?
Significance of Cersei's obsession with elephants?
What would be the ideal power source for a cybernetic eye?
Why are the trig functions versine, haversine, exsecant, etc, rarely used in modern mathematics?
Amount of permutations on an NxNxN Rubik's Cube
Why didn't Eitri join the fight?
Trademark violation for app?
How to react to hostile behavior from a senior developer?
Is there such thing as an Availability Group failover trigger?
React Component not loading with Webpack and Babel Beginner's level
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Importing CSS files in Isomorphic React ComponentsWebpack and React — Unexpected tokenwebpack babel and react simple example fails“exclude” options of babel-loader in WebpackBabel Transform Runtime issue with Webpack 2Webpack hot module replacement not working with babel-loader and preset es2015How to fix HTML file comments not being ignored by Webpack Dev Server?Setup webpack for react projectReact build issue, ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):Webpack css issue, missing bundle.css
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am trying to understand how React, Babel and Webpack interact with each other, but I get the following error: Uncaught TypeError: Super expression must either be null or a function. The CSS is rendering just fine but the HTML isn't, though I was able to see it in the console (view image below).
Any suggestions?
package.json
"name": "react-raw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel":
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
,
"scripts":
"start": "webpack-dev-server --open"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"react": "^16.8.4",
"react-dom": "^16.8.4"
,
"devDependencies":
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
index.js
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
ReactDOM.render(<App />, document.getElementById("app"));
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
//const webpack = require("webpack"); //to access built-in plugins
module.exports =
entry: "./app/index.js",
output:
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js"
,
module:
rules: [
test: /.(js)$/, use: "babel-loader" ,
test: /.css$/, use: ["style-loader", "css-loader"]
]
,
mode: "development",
plugins: [new HtmlWebpackPlugin( template: "app/index.html" )]
;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React Raw</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
javascript reactjs webpack babeljs babel-loader
asked Mar 22 at 9:38
crg821crg821
50139
add a comment |
I am trying to understand how React, Babel and Webpack interact with each other, but I get the following error: Uncaught TypeError: Super expression must either be null or a function. The CSS is rendering just fine but the HTML isn't, though I was able to see it in the console (view image below).
Any suggestions?
package.json
"name": "react-raw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel":
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
,
"scripts":
"start": "webpack-dev-server --open"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"react": "^16.8.4",
"react-dom": "^16.8.4"
,
"devDependencies":
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
index.js
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
ReactDOM.render(<App />, document.getElementById("app"));
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
//const webpack = require("webpack"); //to access built-in plugins
module.exports =
entry: "./app/index.js",
output:
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js"
,
module:
rules: [
test: /.(js)$/, use: "babel-loader" ,
test: /.css$/, use: ["style-loader", "css-loader"]
]
,
mode: "development",
plugins: [new HtmlWebpackPlugin( template: "app/index.html" )]
;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React Raw</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
javascript reactjs webpack babeljs babel-loader
asked Mar 22 at 9:38
crg821crg821
50139
1
React.Componentis not a function
– Boy With Silver Wings
Mar 22 at 9:42
This lineclass App extends React.Component()..has wrong syntax.extendsmust be followed with fixed class name, no expressions allowed.
– hindmost
Mar 22 at 9:46
add a comment |
I am trying to understand how React, Babel and Webpack interact with each other, but I get the following error: Uncaught TypeError: Super expression must either be null or a function. The CSS is rendering just fine but the HTML isn't, though I was able to see it in the console (view image below).
Any suggestions?
package.json
"name": "react-raw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel":
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
,
"scripts":
"start": "webpack-dev-server --open"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"react": "^16.8.4",
"react-dom": "^16.8.4"
,
"devDependencies":
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
index.js
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
ReactDOM.render(<App />, document.getElementById("app"));
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
//const webpack = require("webpack"); //to access built-in plugins
module.exports =
entry: "./app/index.js",
output:
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js"
,
module:
rules: [
test: /.(js)$/, use: "babel-loader" ,
test: /.css$/, use: ["style-loader", "css-loader"]
]
,
mode: "development",
plugins: [new HtmlWebpackPlugin( template: "app/index.html" )]
;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React Raw</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
javascript reactjs webpack babeljs babel-loader
asked Mar 22 at 9:38
crg821crg821
50139
I am trying to understand how React, Babel and Webpack interact with each other, but I get the following error: Uncaught TypeError: Super expression must either be null or a function. The CSS is rendering just fine but the HTML isn't, though I was able to see it in the console (view image below).
Any suggestions?
package.json
"name": "react-raw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel":
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
,
"scripts":
"start": "webpack-dev-server --open"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"react": "^16.8.4",
"react-dom": "^16.8.4"
,
"devDependencies":
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
index.js
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
ReactDOM.render(<App />, document.getElementById("app"));
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
//const webpack = require("webpack"); //to access built-in plugins
module.exports =
entry: "./app/index.js",
output:
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js"
,
module:
rules: [
test: /.(js)$/, use: "babel-loader" ,
test: /.css$/, use: ["style-loader", "css-loader"]
]
,
mode: "development",
plugins: [new HtmlWebpackPlugin( template: "app/index.html" )]
;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React Raw</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
javascript reactjs webpack babeljs babel-loader
javascript reactjs webpack babeljs babel-loader
asked Mar 22 at 9:38
crg821crg821
50139
asked Mar 22 at 9:38
crg821crg821
50139
asked Mar 22 at 9:38
crg821crg821
50139
asked Mar 22 at 9:38
crg821crg821
50139
asked Mar 22 at 9:38
crg821crg821
50139
50139
1
React.Componentis not a function
– Boy With Silver Wings
Mar 22 at 9:42
This lineclass App extends React.Component()..has wrong syntax.extendsmust be followed with fixed class name, no expressions allowed.
– hindmost
Mar 22 at 9:46
add a comment |
1
React.Componentis not a function
– Boy With Silver Wings
Mar 22 at 9:42
This lineclass App extends React.Component()..has wrong syntax.extendsmust be followed with fixed class name, no expressions allowed.
– hindmost
Mar 22 at 9:46
1
1
React.Component is not a function– Boy With Silver Wings
Mar 22 at 9:42
React.Component is not a function– Boy With Silver Wings
Mar 22 at 9:42
This line
class App extends React.Component().. has wrong syntax. extends must be followed with fixed class name, no expressions allowed.– hindmost
Mar 22 at 9:46
This line
class App extends React.Component().. has wrong syntax. extends must be followed with fixed class name, no expressions allowed.– hindmost
Mar 22 at 9:46
add a comment |
1 Answer
1
active
oldest
votes
Your problem is with the signature of your class component:
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
This is how you need to declare it:
class App extends React.Component
render()
return <div>Hello Christian!!</div>;
Note the extra () i omitted
You can read more about classes in here
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55296699%2freact-component-not-loading-with-webpack-and-babel-beginners-level%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your problem is with the signature of your class component:
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
This is how you need to declare it:
class App extends React.Component
render()
return <div>Hello Christian!!</div>;
Note the extra () i omitted
You can read more about classes in here
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
add a comment |
Your problem is with the signature of your class component:
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
This is how you need to declare it:
class App extends React.Component
render()
return <div>Hello Christian!!</div>;
Note the extra () i omitted
You can read more about classes in here
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
add a comment |
Your problem is with the signature of your class component:
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
This is how you need to declare it:
class App extends React.Component
render()
return <div>Hello Christian!!</div>;
Note the extra () i omitted
You can read more about classes in here
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
Your problem is with the signature of your class component:
class App extends React.Component()
render()
return <div>Hello Christian!!</div>;
This is how you need to declare it:
class App extends React.Component
render()
return <div>Hello Christian!!</div>;
Note the extra () i omitted
You can read more about classes in here
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
answered Mar 22 at 9:46
Sagiv b.gSagiv b.g
17.3k42359
17.3k42359
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55296699%2freact-component-not-loading-with-webpack-and-babel-beginners-level%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
React.Componentis not a function– Boy With Silver Wings
Mar 22 at 9:42
This line
class App extends React.Component()..has wrong syntax.extendsmust be followed with fixed class name, no expressions allowed.– hindmost
Mar 22 at 9:46