Im trying to configure webpack for React.
But when i ran "npm run start" i got this error in VSC console:
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from "./components/App";
|
> ReactDOM.render(<App />, document.getElementById("app"));
|
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.export = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: [{ loader: "html-loader" }],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
}),
],
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 3000,
},
};
Index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("app"));
Package.json:
{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"name": "curso-webpack-react",
"description": "",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"prettier": "2.4.1",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/platzi/curso-webpack-react.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/platzi/curso-webpack-react/issues"
},
"homepage": "https://github.com/platzi/curso-webpack-react#readme"
}
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I don't know what to try anymore.
Iv tried to change test: /\.(.js|jsx)$/, to test: /\.js$|jsx/, or test: /\.js|\.jsx$/, but no results.
Iv also tried others solutions to the same problems that iv saw in others stackoverflow publications, but no results tho.
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
I used the new Framework7-cli to generate a Cordova App with React presets. When everything was finished setting up I ran npm run start and tried changing some code in /pages/home.jsx, but nothing was updated in the browser. Does anyone know why this doesn't work right out of the box?
Here is what webpack.config.js looks like:
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, '..', dir);
}
const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova = target === 'cordova';
module.exports = {
mode: env,
entry: [
'./src/js/app.js',
],
output: {
path: resolvePath(isCordova ? 'cordova/www' : 'www'),
filename: 'js/app.js',
publicPath: '',
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'#': resolvePath('src'),
},
},
devtool: env === 'production' ? 'source-map' : 'eval',
devServer: {
hot: true,
open: true,
compress: true,
contentBase: '/www/',
disableHostCheck: true,
watchOptions: {
poll: 1000,
},
},
optimization: {
minimizer: [new TerserPlugin({
sourceMap: true,
})],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
include: [
resolvePath('src'),
resolvePath('node_modules/framework7'),
resolvePath('node_modules/framework7-react'),
resolvePath('node_modules/template7'),
resolvePath('node_modules/dom7'),
resolvePath('node_modules/ssr-window'),
],
},
{
test: /\.css$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
],
},
{
test: /\.styl(us)?$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'stylus-loader',
],
},
{
test: /\.less$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'less-loader',
],
},
{
test: /\.(sa|sc)ss$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'process.env.TARGET': JSON.stringify(target),
}),
...(env === 'production' ? [
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
map: { inline: false },
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
] : [
// Development only plugins
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
inject: true,
minify: env === 'production' ? {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: 'css/app.css',
}),
new CopyWebpackPlugin([
{
from: resolvePath('src/static'),
to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
},
{
from: resolvePath('src/manifest.json'),
to: resolvePath('www/manifest.json'),
},
]),
...(!isCordova ? [
new WorkboxPlugin.InjectManifest({
swSrc: resolvePath('src/service-worker.js'),
})
] : []),
],
};
And here is package.json
{
"name": "my-app",
"private": true,
"version": "1.0.0",
"description": "My App",
"repository": "",
"license": "UNLICENSED",
"framework7": {
"cwd": "/home/david/test-react",
"type": [
"pwa",
"cordova",
"web"
],
"name": "My App",
"pkg": "io.framework7.myapp",
"framework": "react",
"template": "single-view",
"cssPreProcessor": false,
"bundler": "webpack",
"cordova": {
"folder": "cordova",
"platforms": [
"ios",
"android"
],
"plugins": [
"cordova-plugin-statusbar",
"cordova-plugin-keyboard",
"cordova-plugin-splashscreen",
"cordova-plugin-wkwebview-engine"
]
},
"webpack": {
"developmentSourceMap": true,
"productionSourceMap": true,
"hashAssets": false,
"preserveAssetsPaths": false,
"inlineAssets": true
},
"theming": {
"customColor": false,
"color": "#007aff",
"darkTheme": false,
"iconFonts": true,
"fillBars": false
},
"customBuild": false
},
"scripts": {
"build-dev": "cross-env NODE_ENV=development node ./build/build.js",
"build-prod": "cross-env NODE_ENV=production node ./build/build.js",
"build-cordova-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build",
"build-cordova-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
"build-cordova-ios-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build ios",
"build-cordova-ios-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build ios",
"build-cordova-android-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build android",
"build-cordova-android-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
"start": "npm run dev",
"postinstall": "cpy './node_modules/framework7-icons/fonts/*.*' './src/fonts/'"
},
"browserslist": [
"Android >= 5",
"IOS >= 9.3",
"Edge >= 15",
"Safari >= 9.1",
"Chrome >= 49",
"Firefox >= 31",
"Samsung >= 5"
],
"dependencies": {
"dom7": "^2.1.3",
"framework7": "^4.5.0",
"framework7-icons": "^2.3.1",
"framework7-react": "^4.5.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"template7": "^1.4.2"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.5.5",
"babel-loader": "^8.0.6",
"chalk": "^2.4.2",
"copy-webpack-plugin": "^5.0.4",
"cpy-cli": "^2.0.0",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.0",
"style-loader": "^1.0.0",
"terser-webpack-plugin": "^1.4.1",
"url-loader": "^2.1.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0",
"workbox-webpack-plugin": "^4.3.1"
}
}
I see one little but very important problem here. In Your package.json-->scripts-->start You don't include some commands.
It should look like this:
"start": "npm run — mode development — open — hot",
What is going on here:
When You trigger npm start, webpack-dev-server is going to fire up the application in mode=development.
Then ( — open) displays it in your default browser automatically.
And finally, ( — hot) keeps watching for any changes made to the application.
If it doesn't help You try this one:
"start": "npm run — mode dev — open — hot",
Good luck :)
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']
}
I am getting the following error:
[HMR] Waiting for update signal from WDS...
when I run "webpack" in the terminal
my webpack config js file is as follow:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
and my package.json as follow:
{
"name": "hwr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^3.0.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-router": "^2.6.1"
}
}
Where does that error comes from?
It's not an error, you enabled the Hot Module Replacement (hence the [HMR]) feature in your Webpack build. That's just one of the log messages that come from the HMR feature. Sounds like you don't want to turn HMR on? In that case, you should remove 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server' entries from your entry points, the react-hot loader and in your loaders entry, the new webpack.HotModuleReplacementPlugin() from plugins and hot: true from your dev server settings.