Rebuild with visual studio and webpack-cli does not build my jsx file - reactjs

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

Related

Webpack not updating page when I refresh to reflect new code

So I am doing a project using Django and React.
I was working on it yesterday and it worked fine, but today after I run the command 'py ./manage.py runserver' along with 'npm run dev', my project loads but whenever I make changes to my code, these changes are not reflected when I update the page.
I tried fixing this but couldn't do it so far.
Here are my files:
webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV' : JSON.stringify('development')
// This has effect on the react lib size
}),
],
};
package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"start": "react-scripts start",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"webpack": "^5.34.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0"
}
}
Please consider to try this:
Create a .env file inside your Application root
Set FAST_REFRESH=false inside your .env
Restart your Server

Syntax Error React App, Issue with npm dependencies

I have a website that I've had up for maybe a couple of years now, and I think it's starting to get outdated. I haven't touched it in a while, so I'm not exactly sure what is going on with it. I'm not exactly sure what the issue is, but it might have to do with my webpack version, or maybe my react version, I'm not really sure.
The issue started because I was trying to run webpack --mode production because I wanted to remake the bundle.js file, and when I would run this command, the file wouldn't create the bundle.js. Eventually I somehow came to the conclusion that there was something wrong with my webpack version, and so I updated it to the most recent version that was compatible with my dependencies which was version 4.46.0. I tried the command again, and this time it gives me this error:
[0] ./src/index.js 666 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (6:4)
4 |
5 | ReactDOM.render(
> 6 | <App />,
| ^
7 | document.getElementById("root")
8 | );
I tried reinstalling different versions of babel-loader, but the least bad error seems to be with the version 7.1.5. I also tried deleting my node-modules and then running npm install. Here is my package.json:
{
"name": "mywebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"set-dev-server": "webpack-dev-server --open --mode development",
"start": "npm run build && npm run set-dev-server",
"deploy": "gh-pages -d dist",
"publish-demo": "npm run build && npm run deploy"
},
"repository": {
"type": "git",
"url": "git+my/github/link"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "my/github/link/issues"
},
"homepage": "my/github/link",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"file-loader": "^1.1.11",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^7.0.1",
"jquery": "^3.5.1",
"node-css": "^0.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"styled-components": "^5.2.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/core": "^7.13.8",
"babel-loader": "^7.1.5",
"css-loader": "^5.1.1",
"node-sass": "^5.0.0",
"schema-utils": "^3.0.0",
"webpack": "^4.46.0"
}
}
From what I found online the issue could also have to do with the webpack.config.js, but all of the issues I could find were from really old versions of webpack (2 or 3?), but anyways here is what I have in that file:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "dist/index.html"),
filename: "index.html"
});
module.exports = {
entry: path.join(__dirname, "src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack#1.x
disable: true, // webpack#2.x and newer
},
},
],
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'dist/'),
port: 3000,
publicPath: "http://localhost:3000/"
},
plugins: [ new webpack.HotModuleReplacementPlugin(), htmlWebpackPlugin ]
};
Looks like you are using a jsx token <> while your file is named index.js. Try naming it as index.jsx

webpack with babel showing error Module build failed (from ./node_modules/babel-loader/lib/index.js):

I am trying to create a react app using webpack and babel,but when i actually start webpack dev server,using yarn run start,it shows the following error:-
i am using babel-loader version 8.1.0 and #babel/core version 7.10.2
My package.json:-
{
"name": "reactTemplate",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"babel-loader": "^8.1.0",
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"#babel/preset-react": "^7.10.1",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
My .babelrc:-
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
My webpack.config.js:-
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index',
output: {
path: path.join(__dirname, './dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
If you are running a very simple hello world example and extension is js then your settings seem fine. If you are using jsx files as well the add this to the webpack
test: /\.(js|jsx)$/,

Setting up "npm start" with a newly created React+Typescript webpack app?

I need a bit of help with initial setup of webpack to serve my app with hot reloading. I've followed this guide to set up React+Webpack with Typescript, but I'd like to know how I can go about setting it up so I can call "npm start" and have it compile and host the app, with hot reloading.
My webpack.config.js looks like the following:
module.exports = {
mode: "production",
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx"]
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
And my package.json looks like this:
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "test"
},
"author": "DMW",
"license": "ISC",
"devDependencies": {
"#types/react": "^16.9.15",
"#types/react-dom": "^16.9.4",
"source-map-loader": "^0.2.4",
"ts-loader": "^6.2.1",
"typescript": "^3.7.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"keywords": []
}
I'd really appreciate it if someone could link me to something to get this working. I'm a bit intimidated by the search results I've found.
EDIT: I ended up using npx create-react-app app --template typescript instead, as detailed here: https://create-react-app.dev/docs/adding-typescript/
Welcome to the community.
Regarding the settings for webpack try adding this to your package.json
"scripts": {
"start": "webpack-dev-server --mode development --open --hot"
},
When you do npm start, start will be taken from this script and would run app as webpack. Also --hot will ensure that hot reload is true, i.e. reload on any changes that you do to the app automatically.
Be sure to change the mode to production when pushing the app to production so that you don't get all the errors and warnings in the production. Hope it helps !!

React Build Tool and Dev Server

Need some direction in terms of setting up the DEV environment and server for a project I'm starting for learning purposes. I want to use ReacJS with Bootstrap. Last time I worked with ReactJS, the build and server was already configured and I did not have to do much. We were using npm, gulp and bunch of other stuff.
Now that I'm trying to set this up, I'm not sure what to do. Can someone outline the simplest steps I can follow. I want to use latest versions of React eco-system and ideally have a build system to minify and combine files and stuff. There is so much info on Google that it is confusing. Another challenge I'm facing is that which versions to specify in package.json. Instead of gulp I decided to use webpack. Wasn't really sure if to go with gulp or webpack but decided to go with webpack. It is all working but not sure if I have the most updated versions of everything or need more stuff. I know for sure I don't have any watchers to auto refresh page on changes. For server I'm just using npm, not sure if that is all I need or there are any advantages of using others.
This is my package.json
{
"name": "track",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --port 3000 --progress --inline",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "^2.29.0",
"path": "^0.12.7",
"react": "^16.0.0",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
}
Below is the webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: [ 'es2015', 'react' ] }
}
]
}
};
Can someone outline the simplest steps I can follow.
I have faced very similar situation but i was working with react, redux, react-redux, other libraries and using axios for sending (http) request where i have to figure out by myself , Here's what i did :
NOTE: Make sure you have Node.js installed because i have Node along with webpack-dev-server here
npm init
Installed project dependencies using npm.
Inside script i have given link to node and webpack-dev-server as you can see
package.json
{
"name": "searchapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"babel-preset-stage-1": "^6.24.1",
"lodash": "^4.17.4",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"redux-promise": "^0.5.3"
}
}
And this is webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
bundle: './src/index.js',
},
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
And then make sure to include .babelrc
{
"presets": ["react", "es2015", "stage-1"]
}
And if you have github repository make sure to include .gitignore file so that these folders or files will not be included in git repo
.gitignore
/node_modules
bundle.js
npm-debug.log
.DS_Store
If you think all of this is overwhelming and too much for a start then best place to start with is create-react-app

Resources