I am setting up a webpack 4 project and in the start hot reloading seemed to work but now I noticed it stopped
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}
)
]
}
package.json
{
"name": "webui",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"npm": "^5.8.0",
"react": "^16.3.1",
"react-dom": "^16.3.1"
},
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}
Related
The common solution for removing source maps from a CRA build is to add "GENERATE_SOURCEMAPS=false react-scripts build" in package.json build scripts and/or "GENERATE_SOURCEMAPS=false" in the CRA .env file. However, I do not use Create React App. Therefore, "react-scripts build" is not recognized as an internal command, my .env file has no effect on the bundled code, and simply adding "GENERATE_SOURCEMAPS=false" to my build scripts does nothing. I would like to remove source maps from the webpack bundle. Here is my package.json.
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "boilerplate code",
"main": "index.js",
"presets":
[
"#babel/preset-env",
"#babel/preset-react"
],
"scripts":
{
"build": "cross-env GENERATE_SOURCEMAP=false webpack --watch",
"start": "webpack serve",
"build-prod": "weback -p",
"winBuild": "set \"GENERATE_SOURCEMAP=false\" && build"
},
"keywords": [],
"author": "ziggy",
"license": "NONE",
"devDependencies":
{
"#babel/core": "^7.16.7",
"#babel/preset-env": "^7.16.8",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"file-loader": "^6.2.0",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"node-polyfill-webpack-plugin": "^1.1.4",
"style-loader": "^3.3.1",
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"
},
"dependencies":
{
"#aws-amplify/ui-react": "^2.1.9",
"aws-amplify": "^4.3.12",
"aws-amplify-react": "^5.1.9",
"bootstrap": "^5.1.3",
"pandadoc-node-client": "^4.1.0",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"typewriter-effect": "^2.18.2"
}
}
Here is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output:
{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve:
{
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: { react: path.join(__dirname, 'node_modules', 'react') }
},
plugins:
[
new NodePolyfillPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
module:
{
rules: [
{
test: /\.css/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use:
{
loader: "babel-loader",
options:
{
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
},
{
test: /\.(png|mp4)$/i,
type: "asset/resource"
},
{
test: /\.txt$/i,
type: 'asset/source'
},
{
test: /\.(woff|woff2|ttf)$/i,
type: "asset/resource"
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(mov|mp4)$/,
use:
[
{
loader: 'file-loader',
options:
{
name: '[name].[ext]'
}
}
]
},
{
test: /\.m?js/,
resolve:
{
fullySpecified: false
}
},
]
}
}
I used the instructions from the official react documentation, but localhost still starts from http://.
My package.json file where I tried to add a solution.
I also tried 'set HTTPS = true && npm start'.
{
"name": "project",
"version": "1.0.0",
"description": "Project",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p",
"start": "webpack-dev-server --hot --inline -d && HTTPS=true react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.8.7",
"formik": "^2.1.4",
"ramda": "^0.27.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-https-redirect": "^1.1.0",
"react-iframe": "^1.8.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.1",
"react-scroll-up-button": "^1.6.4",
"styled-components": "^5.0.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-proposal-async-generator-functions": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-transform-async-to-generator": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.8.7",
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"gh-pages": "^2.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"react-inlinesvg": "^1.2.0",
"sass-loader": "^7.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
webpackconfig.js
const path = require("path");
const Html = require('html-webpack-plugin');
module.exports = {
entry: [
"whatwg-fetch",
"./js/index.js",
],
output: {
filename: "js/out.js",
path: path.resolve(__dirname, "build")
},
devServer: {
port: 3001,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'images',
outputPath: 'images',
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'fonts',
outputPath: 'fonts',
}
}
},
]
},
plugins: [
new Html({
filename: 'index.html',
template: './index.html',
})
]
};
I'm a beginner and I can't deal with it, if someone can help me, I will be very grateful.
The options for SET HTTPS=true are for projects that are made with create-react-app. Since you have a webpack configuration file of your own, you have to change the configuration for enabling HTTPS.
You can do this with:
devServer: {
https: true
}
This enables a self signed certificate. You can provide a certifiate with:
devServer: {
https: true,
key: fs.readFileSync('/path/to/server.key'),
cert: fs.readFileSync('/path/to/server.crt'),
ca: fs.readFileSync('/path/to/ca.pem'),
}
Docs
In package.json try add set HTTPS=true instead of HTTPS=true in start script.
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
Please help me to solve this issue , i am still getting this issue after doing many changes like , i degraded the babel to lowest version & i installed npm using this command and also i did many changes but there is no result.
And webpack.config.js file
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: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
i think this could help as i dont know what is webpack file configration
but you can give it try in your webpack file
resolveLoader: {
root: path.join(__dirname, 'node_modules')
}
please share your webpack.config file
Here's my package.json file:
{
"name": "redacted",
"version": "1.0.0",
"description": "redacted",
"main": "webpack.config.js",
"directories": {
"doc": "docs"
},
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "redacted"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "URL"
},
"homepage": "Here",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"devDependencies": {
"#types/react": "^16.3.16",
"#types/react-dom": "^16.0.6",
"awesome-typescript-loader": "^5.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.3",
"tslint": "^5.10.0",
"typescript": "^2.9.1",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.11.1",
"webpack-cli": "^3.0.2",
"webpack-dev-server": "^3.1.4"
}
}
And here's webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
exclude: /node_modules/,
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.css$/,
include: /src/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('typings-for-css-modules-loader?modules&namedExport&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
},
{
test: /\.css$/,
include: /node_modules/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap'})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devtool: "source-map",
resolve: {
extensions: [".js", ".ts", ".tsx"]
}
}
Doing the following in my component:
import * as React from "react";
import css = require("./App.css");
export class App extends React.Component<{}, {}> {
public render() {
return (
<div className={css.main}>I am working!</div>
);
}
}
But it doesn't generate d.ts file. import css line says [ts] Cannot find module './App.css'.
Instead I get this error:
ERROR in ./src/components/App.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
I also tried this tutorial but it didn't work either: https://medium.com/#sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
How can I go about fixing this? Thanks!
I am trying to tidy some React code by using a static property of the class something like
class X extends React.Component {
static counter = 0
...
render() {
return( <div>{X.counter}</div>)
}
}
The build fails with unexpected token static counter = 0
My .babelrc is
{
"plugins": ["transform-class-properties", "transform-react-jsx" ]
}
and my package.json (using Webpack to build) is ...
{
"name": "js",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"webpack": "^4.12.2",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"dev": "webpack-dev-server --inline --hot --no-info --env dev",
"build:prod": "webpack --env prod --progress --profile --colors",
"build:dev": "webpack --env dev --progres --profile --colors"
},
"dependencies": {
"css-loader": "^1.0.0",
"react-meter-bar": "^1.0.2",
"react-modal": "^3.5.1",
"react-websocket": "^2.0.0",
"style-loader": "^0.21.0",
"webpack-cli": "^3.0.8"
}
}
Can anyone help ?
I solved the issue by adding the plugin to the Webpack.config.js and using babel-loader - this is probably due to my lack of knowledge how Webpack works ...
const path = require('path');
module.exports = {
mode: 'development',
context: path.join(__dirname, 'src'),
entry: [
'./app.js',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets:['react'],
plugins: ["transform-class-properties"]
}
}
],
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
},
],
},
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
],
},
};