I have an issue with babel and Webpack. I shared configurations. I am getting below error while i am running webpack build command. However i already added #babel/preset-react in .babelrc (also tried babel.config.json) files. I need some suggestion for solve this error.
{
"name": "#mahiraltinkaya/react-image-upload",
"version": "1.2.1",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+ssh://git#github.com/mahiraltinkaya/react-file-upload.git"
},
"keywords": [
"react",
"next",
"react-image",
"image-drag-n-drop"
],
"author": "Mahir Altinkaya",
"license": "ISC",
"bugs": {
"url": "https://github.com/mahiraltinkaya/react-file-upload/issues"
},
"homepage": "https://github.com/mahiraltinkaya/react-file-upload#readme",
"devDependencies": {
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"prop-types": "^15.8.1",
"react": "^16.14.0"
}
}
babel.config.json
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
webpack.config.json
var path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve("dist"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.css$/,
loader: "css-loader",
},
],
},
externals: {
react: "react",
},
};
For some reason, your file babel.config.json is not parsed. webpack is not reading it. convert it to
.babelrc
or convert it to babel.config.js and have this
module.exports={"presets": ["#babel/preset-env", "#babel/preset-react"]}
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 have a react project and I'm using Webpack (webpack-dev-server) for my development.
Everything compiles well, and when I make a change in my file (for the first time), the live reloading works well.
BUT, after changing the same file twice (or more), the live reloading stop working. In the console it says "nothing changed" even when I made a change.
Looks like the webpack-dev-server memory doesn't pick up the change. Any idea why?
Webpack Config
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin } = require("webpack");
module.exports = {
target: "web",
mode: "development",
entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
devtool: "inline-source-map",
devServer: {
historyApiFallback: true,
hot: true,
port: 8080,
static: "./dist",
watchFiles: "src/**/*,js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js",
},
resolve: { extensions: ["*", ".js", ".jsx"] },
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /(node_modules)/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"],
},
},
],
},
{
test: /\.css$/,
// exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
title: "Development",
}),
new ProvidePlugin({
React: "react",
}),
],
};
Package.json
{
"name": "timerfrontend",
"version": "1.0.0",
"main": "index.js",
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve",
"create": "webpack -w",
"build": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {
"#apollo/client": "^3.5.6",
"#apollo/link-context": "^2.0.0-beta.3",
"#apollo/react-hooks": "^4.0.0",
"#auth0/auth0-react": "^1.8.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"bootstrap": "^5.0.1",
"dayjs": "^1.10.5",
"npm-force-resolutions": "^0.0.10",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"regenerator-runtime": "^0.13.9",
"svg-url-loader": "^7.1.1"
},
"description": "",
"resolutions": {
"react": "17.0.2",
"graphql": "16.1.0"
}
}
I found the solution (hint: its weird)
I realized that my Webpack live reloading was working on my other components (except the I had issue with).
I finally resolved to deleting that component and create a new one (exact copy) and then it worked perfectly!?
I still don't know why Webpack didn't like this component specifically...
It was happening to me, I checked the files and class names, they have to be exactly the same, including caps and lowercase letters
In my case, the file I was modified is not being use anywhere in project, so webpack does not recognize it.
After import and use it in the code, then it work fine
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.
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']
}
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!