I am learning React, and trying to config webpack and trying to running my app with the webpack-dev-server, but I am getting an error : " Cannot GET / " localhost:9000 and two DevTools Warnings :
Unchecked runtime.lastError: The message port closed before a response was received.
Failed to load resource: the server responded with a status of 404 (Not Found).
*Only Development Mode has this issue.
const path = require('path');
module.exports = {
mode: 'development',
entry: './entrada/index.js',
output: {
path: path.resolve(__dirname, 'saida'),
filename: 'final.js',
},
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
client: {
logging: 'info',
},
compress: true,
port: 9000,
open: true,
hot: true,
},
}
Package.json >>
scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
Related
I have no idea anymore. After updating node.js and webpack, I cannot set reload devServer.
I try with:
mode: "development",
static:
hot: true
and a few more things from google. What am I doing wrong or where is the error? There are no errors in the console. I want to configure webpack to write in ES6, nothing else.
package.json
{
"name": "calc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot",
"build": "webpack -d"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.19.3",
"#babel/preset-env": "^7.19.3",
"babel-loader": "^8.2.5",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js
const path = require("path");
const entryPath = ".";
module.exports = {
mode: "development",
entry: `./${entryPath}/js/app.js`,
output: {
filename: "out.js",
path: path.resolve(__dirname, `${entryPath}/build`),
},
r: {
static: path.join(__dirname, `${entryPath}`),
hot: true,
compress: true,
port: 3001,
open: true,
headers: { "Access-Control-Allow-Origin": "*" },
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
};
directory structure
Node.js version: v18.9.0
NPM version: 8.19.1
Thanks for the answer.
Please provide your webpack verison.
For webpack 5 use
devServer: {
watchFiles: ['src/**/*.php', 'public/**/*'],
}
See details here https://webpack.js.org/configuration/dev-server/#devserverwatchfiles
I was following this two tutorials to create my first react app and node.js:
Doc Microsoft(The worst doc in MS I have ever seen)
Medium.com This one helped me to build a working site.
I am using visual studio 2019 (not an optional.. so please no VS Code) and to run my application I run the command: npx webpack
It generates the dist folder and the "executable" js. Then I run the project via the "debug" butto in visual studio.
But now I would like to build and run my site as explained in the Micorsoft documentation. The secret seems to be ind the package.json file and webpack-config.js file.
In the first file we find:
"scripts": {
"clean": "",
"build": "webpack-cli ./src/app.tsx --config webpack-config.js"
}
In the second the configuration.
The "only" one difference between my projct and the MS Doc is that the doc uses Typescript.
Here my Project:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
watch: false,
entry: './src/index.js',
mode: 'development',
output: {
filename: './app.js'
,
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
package.json
{
"name": "my.web.react",
"version": "0.0.0",
"description": "My.Web.React",
"main": "server.js",
"author": {
"name": ""
},
"dependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"express": "^4.17.1",
"html-webpack-plugin": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2"
},
"scripts": {
"clean": "",
"build": "webpack-cli ./src/index.jsx --config webpack.config.js"
}
}
babel.config.json
{
"presets": [
"#babel/preset-react"
]
}
Now when I click on Rebuild, nothing happens:
What is still missing?
Thank you
I am trying to use BrowserSync through Webpack with Webpack-Dev-Server, and my intention is to get BrowserSync to show my website on my mobile phone as well and keep it in sync with the changes from my browser on the localhost.
This is the webpack output in the console
> webpack-dev-server --watch --mode development
i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from /
i ?wdm?: Hash: 27c2e094f54179577245
Version: webpack 4.29.5
Time: 2658ms
Asset Size Chunks Chunk Names
./index.html 7.47 KiB [emitted]
main.css 38 bytes main [emitted] main
main.js 700 KiB main [emitted] main
Entrypoint main = main.css main.js
i ?wdm?: Compiled successfully.
[Browsersync] Proxying: http://localhost:8080
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://86.190.13.18:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
This is what I have so far:
package.json
{
"name": "webpack_2019",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --watch --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^2.1.0",
"error-overlay-webpack-plugin": "^0.1.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader"
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new ErrorOverlayPlugin(),
new BrowserSyncPlugin({
host: '86.190.13.18',
port: 3000,
proxy: 'http://localhost:8080/',
},{ reload: false }),
],
devServer: {
stats: {
builtAt: false,
children: false,
modules: false,
colors: true,
progress: true,
},
// open: true, // BrowserSync opens the browser tab
overlay: true,
}
}
folder structure
Project_Folder
node_modules
src
index.html
index.js
main.css
.babelrc
package.json
webpack.config.js
I want to make BrowserSync give the correct UI External host, one that I can use on my mobile and keep the website in sync with the localhost.
hello i just made environment setup for react js and it gives me error
ReferenceError: Unknown option: .present. and here is codes of .babelrc webpack.config.js, package.json and react.js (file)
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
webpack.config.js :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './react.js',
output:{
path: path.join(__dirname, '/frapp'),
filename: 'bundled.js'
},
devServer:{
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
present:['es2015', 'react']
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json :
{
"name": "reacc",
"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": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}
for more details i would like to screenshot my directory here it is
here is part of error : Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown option: .present. Check out https://babeljs.io/docs/en/b
abel-core/#options for more information about options.
as a matter of fact, react is opens html page but does not display text in div
It's presets, not present:['es2015', 'react']. There's a typo in your webpack.config.js.
Also what's that query key?
query: {
present:['es2015', 'react']
}
From what I know it should be options. So:
options: {
presets: ['es2015', 'react']
}
Apologies if this is a strange/stupid question but I have been trying to transition from PHP to more JavaScript orientated development.
I have built a small single-page app with no routing using create-react-app, it is working exactly how I want but I now want to deploy it inside my existing PHP app.
The app does make some API calls so it cannot simply be converted to a static page.
Is there any way I can take what I currently have and convert it into a .js file that can simply be loaded without needing a server?
Thanks
You can do it with webpack devServer
Here an example:
package.json
{
"name": "sampleApp",
"version": "1.0.0",
"description": "",
"devDependencies": {
"webpack": "4.15.0",
"webpack-cli": "3.0.8",
"webpack-dev-server": "3.1.4"
},
"scripts": {
"dev": "webpack --mode development && webpack-dev-server --mode development",
"build": "webpack --mode production && webpack-dev-server --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sample/sample.git"
}
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.resolve(__dirname, './'),
publicPath: '/build/',
host: '127.0.0.1',
port: 9998,
open: true
},
resolve: {
extensions: ['.ts', '.js'],
}
};
Just execute npm run build and then uplod ./build frolder to your server.