I am quite new to React. I am trying to create simple react configuration with webpack and babel. But none of my tries succeed. When i run npm start,then enter http://localhost:3333 from browser, an empty page appears. I can see just the title of the page. What do i miss?
Here my codes.
webpack.config.js
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders:
[{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react','es2015']
}
}]
}
}
package.json
{
"name": "es6-react-setup",
"version": "1.0.0",
"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.3.17",
"babel-loader": "^6.2.0"
},
"description": ""
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Setup</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementbyId('app'));
App.js
import React from 'react';
class App extends React.Component {
render(){
return <div>Hello</div>
}
}
export default App
EDIT:
I delete index.js and node_modules. After that i installed react react-dom babel-loader babel-core babel-preset-es2015 and babel-preset-react. Then below package.json appears. I also run webpack command to produce index.js
{
"name": "es6-react-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"nw": "webpack --progress --profile --colors"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
Your still missing
"webpack": "^1.8.5",
"webpack-dev-server": "^1.4.7"
from your dependencies.
Related
Community, just started with React and I've created the simplest stuff ever. Does it work? Of course... not.
I've been googling and tried to make those adjustments described. But still, my killer application won't run and I seem to end up with two different error messages depending on the actions i take:
"Babel Plugin/Preset files are not allowed to export objects, only functions"
"Uncaught ReferenceError: process is not defined"
I honestly don't know how to proceed, I've tried to upgrade to the latest "#babel/...", tried to downgrade to earlier babel versions, but React is playing hide and seek with me.
// app.js
import React from 'react';
import ReactDOM from 'react-dom';
const text = <p>Hello world</p>
ReactDOM.render(text, document.getElementById('app'));
// babel.rc
{
"presets": [
"env",
"react"
]
}
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
mode: 'none',
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
}
};
// package.json
{
"name": "killer-app",
"version": "1.0.0",
"main": "index.js",
"author": "",
"license": "",
"scripts": {
"serve": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"live-server": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"validator": "^13.7.0",
"webpack": "^5.73.0"
},
"devDependencies": {
"webpack-cli": "^4.10.0"
}
}
As a side-note, the script "yarn run build-babel" doesn't work either. This script worked before I installed Webpack.
Any advice is appreciated! :)
I have been trying to run the following code since 1 week now. I have re-written the same code around 4-5 times in case if I missed something. Tried looking for solutions as well but I am unable to detect what exactly the error is?
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
C:\Users\NFC\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js
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'
})
]
}
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.5.0"
}
}
index.html
<!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>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
.babelrc
{
"presets":["env", "react"]
}
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
Seems you're using webpack-cli v4, try to update your start script from webpack-dev-server --mode development --open --hot to webpack serve. You can check this issue https://github.com/webpack/webpack-dev-server/issues/2424 on webpack-dev-server for more.
So I´m using reactstrap and i´ve already installed the dependencies Bootstrap and Reactstrap. I also pasted the CDN´s in the html file.
I think the problem may be with the webpack config, but I´m not sure.
I´m trying to render a button but it doesnt show up with its styles, only a basic html button.
So this is the what I have:
App.jsx:
import React from 'react'
import { Button } from 'reactstrap';
class App extends React.Component {
render() {
return (
<div>
<Button></Button>
</div>
)
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/App';
//import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
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>myDesk</title>
</head>
<body>
<div id='root'></div>
<!-- Main version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>
<!-- All optional dependencies version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
</body>
</html>
Webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
entry: './assets/src/index.js'
},
output: {
path: __dirname + './assets/src/index.html',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.(js|jsx)$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: 'assets/src/index.html'
})
]
};
package.json:
{
"name": "example",
"private": true,
"version": "0.0.0",
"description": "a Sails application",
"keywords": [],
"dependencies": {
"#sailshq/connect-redis": "^3.2.1",
"#sailshq/lodash": "^3.10.3",
"#sailshq/socket.io-redis": "^5.2.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"reactstrap": "^8.0.1",
"sails": "^1.2.3",
"sails-hook-apianalytics": "^2.0.3",
"sails-hook-organics": "^0.16.0",
"sails-hook-orm": "^2.1.1",
"sails-hook-sockets": "^2.0.0",
"sails-mongo": "^1.0.1"
},
"devDependencies": {
"eslint": "5.16.0",
"#babel/cli": "^7.5.0",
"#babel/core": "^7.5.4",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"grunt": "1.0.4",
"html-webpack-plugin": "^3.2.0",
"htmlhint": "0.11.0",
"lesshint": "6.3.6",
"npm-run-all": "^4.1.5",
"rimraf": "^2.6.3",
"sails-hook-grunt": "^4.0.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
},
"scripts": {
"start": "NODE_ENV=production node app.js",
"start:server": "nodemon app.js",
"start:client": "webpack-dev-server --mode development --open",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "./node_modules/eslint/bin/eslint.js . --max-warnings=0 --report-unused-disable-directives && echo '✔ Your .js files look good.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/michalruzicka/example.git"
},
"author": "michalruzicka",
"license": "",
"engines": {
"node": "^10.15"
}
}
Please notice that I´ve commented the import bootsrap from the index.js becouse it leads to the following error:
ERROR in ./assets/src/index.js
Module not found: Error: Can't resolve 'style-loader'
I get this error while trying to build npm run watch -
Here is my webpack.config
const webpack = require('webpack');
const config = {
entry: __dirname + '/js/index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react']
}
}
]
}
]
},
};
module.exports = config;
package.json
{
"name": "flask-react-app",
"version": "1.0.0",
"description": "This is a simple flast react integration app.",
"main": "index.js",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react-dom": "^16.4.2",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
index.html
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>Creating a Full-Stack Python Application with NPM, React.js and Webpack</title>
</head>
<body>
<div id="content" />
<script src="dist/bundle.js" type="text/babel"></script>
</body>
</html>
App.js
import React from “react”;
export default class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
index.jsx
// index.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("content"));
Webpack Config:-
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
App.jsx:-
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
package.json
{
"name": "reacttest",
"version": "1.0.0",
"description": "test app",
"main": "main.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "snehasis",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}
I am starting the server using npm start command as I have added the start script in package.json. I expect to see "Hello World!!!" on the browser at localhost:8080. But I am getting a 404 on index.html on script include index.js.
Any ideas?