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'
Related
I am using webpack 5 now and using HMR for hot module replacements. But It shows in console that hmr working but that is not updating in HTML file.
My webpack.config.js file is:
const path = require('path');
module.exports = {
entry: {
bundle: './src/index.js'
},
output: {
path: path.resolve( __dirname, 'assets' ),
filename: '[name].js'
},
mode: 'development',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: [ 'babel-loader']
},
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true
}
}
}]
}
]
},
devServer : {
headers: {
'Access-Control-Allow-Origin': '*'
},
client: {
progress: true,
},
allowedHosts: 'all',
hot: true,
static: {
directory: path.join(__dirname, 'dist')
},
}
}
My package.json is
{
"name": "booking",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"#reduxjs/toolkit": "^1.6.1",
"#tailwindcss/forms": "^0.3.4",
"antd": "^4.16.13",
"axios": "^0.21.4",
"bootstrap-icons": "^1.5.0",
"date-fns": "^2.24.0",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-bootstrap-icons": "^1.5.0",
"react-dom": "^17.0.2",
"react-multi-date-picker": "^3.1.7",
"react-nice-dates": "^3.1.0",
"react-redux": "^7.2.5",
"react-smooth-list": "^1.0.2",
"redux": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"autoprefixer": "^10.3.4",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"cross-env": "^7.0.3",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"node-sass": "^6.0.1",
"postcss": "^8.3.6",
"sass": "^1.39.2",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"tailwindcss": "^2.2.15",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.7.4"
}
}
My main problem is its compiling in the console but not updating in htm file actually..I have mentioned if (module.hot) module.hot.accept() in my ./src/index.js file, but its not working yet.Anything I need to do more to get this working!
My ./dist/index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wp-booking-press-container"></div>
<script src="bundle.js"></script>
</body>
</html>
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.
I tried to setup my own toolchain to build a React app. I'm using Webpack with Typescript React.
package.json
{
"name": "library2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint '**/*.{tsx,js,ts}'",
"lint:fix": "eslint --fix '**/*.{tsx,js,ts}'",
"start": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"pg": "^8.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.9.5"
},
"devDependencies": {
"#babel/cli": "^7.10.4",
"#babel/core": "^7.10.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/node": "^14.0.20",
"#types/react": "^16.9.41",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.1.0",
"#typescript-eslint/parser": "^3.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.21.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/App.tsx',
mode: 'development',
module: {
rules: [
{
test: /\.(|ts|tsx|js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
},
},
{ // rules for css
test: /\.(css|scss)$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
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>Document</title>
</head>
<body>
<div id="main"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
App.tsx
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
render(<Hello />, document.querySelector('#main'));
Hello.tsx
import React from 'react';
import './hello.scss';
export default class Hello extends React.Component {
vark: number;
test() {
this.vark = 1;
}
render() {
return (
<div className="hello">Hello!</div>
);
}
}
I get the following error when webpack builds (npm run start):
ERROR in ./src/Hello.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/JAAI/Desktop/Library2/src/Hello.tsx: Unexpected token (5:6)
3 |
4 | export default class Hello extends React.Component {
> 5 | vark: number;
| ^
6 |
7 | test() {
8 | this.vark = 1;
at Object._raise (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:757:17)
at Object.raiseWithData (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:750:17)
at Object.raise (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:744:17)
at Object.unexpected (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:8834:16)
at Object.parseClassMemberWithIsStatic (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12169:12)
at Object.parseClassMember (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12062:10)
at /Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12007:14
at Object.withTopicForbiddingContext (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11078:14)
at Object.parseClassBody (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11984:10)
at Object.parseClass (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11958:22)
# ./src/App.tsx 3:0-28 4:41-46
ℹ ｢wdm｣: Failed to compile.
At first I thought this was because the Webpack env and react presets didn't allow for class properties so I included the class properties plugin but the error persisted. Note that if I remove that line it builds successfully.
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?
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.