I'm doing Tyler Mcginess's course on react and my package.json is not loading the webpack -p properly, it's returning this error.
Failed at the react#1.0.0 production script 'webpack -p'.
npm ERR! This is most likely a problem with the react package,
npm ERR! not with npm itself
package.json.
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"production": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"html-webpack-plugin": "^2.16.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js.
module.exports = {
entry: [
'./app/index.js',
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: "babel-loader"}
]
},
plugins: [HtmlWebpackPluginConfig]
}
On mac, "." files are hidden so webpack wasn't picking up the . extension, so including a query key worked passing in an array of presets and deleting the .babelrc file.
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ['es2015', 'react']
}
}
]
},
Related
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"]}
I am working on a project who was using babel version 5, webpack version 1, and ava version 0.14.0.
After I did some updates when i run npm run build-example i get:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Multiple configuration files found. Please remove one:
package.json
pathto\react-stars.babelrc
Here's my old package.json
After updates, now I'm using babel version 7.10, webpack version 4.43, and ava version 3.10.1. Here's the updated package.json
{
"name": "react-rating-stars-component",
"version": "2.2.0",
"description": "Simple star rating component for your React projects.",
"main": "dist/react-stars.js",
"repository": "https://github.com/ertanhasani/react-stars",
"babel": {
"presets": [
"react",
"es2015"
]
},
"ava": {
"babel": {
"presets": [
"es2015",
"react"
]
},
"require": [
"babel-register"
]
},
"scripts": {
"build": "babel src --out-dir dist",
"dev": "babel src --out-dir dist --watch",
"build-example": "webpack -p --config webpack.production.config.js",
"dev-example": "webpack-dev-server . --hot --inline"
},
"keywords": [
"star",
"rating",
"react",
"stars",
"rating",
"component",
"raty",
"rate",
"reactjs",
"ratings"
],
"author": "Ertan Hasani",
"license": "ISC",
"devDependencies": {
"ava": "^3.10.1",
"#babel/cli": "^7.10.4",
"babel-loader": "^8.1.0",
"#babel/core": "^7.10.4",
"#babel/plugin-transform-object-assign": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.13.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {}
}
Here's my old webpack.production.config.js
Here's the updated webpack.production.config.js:
'use strict';
var webpack = require('webpack')
module.exports = {
entry: ['./example/index.js'],
output: {
filename: './example/bundle.js',
pathinfo: true
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['#babel/react', '#babel/preset-env']
}
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
optimization: {
minimize: false
}
};
Here's my old webpack.config.js
my updated webpack.config.js:
'use strict';
module.exports = {
entry: ['./example/index.js'],
debug: true,
devtool: 'inline-source-map',
output: {
filename: './example/bundle.js',
pathinfo: true
},
module: {
loaders: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['#babel/react', '#babel/preset-env']
}
}]
}
};
I also updated `.babelrc. file:
Here's my old .babelrc file!
my updated .babelrc file:
{
"presets": ["#babel/preset-env", "#babel/react"],
"plugins": [
"#babel/plugin-transform-object-assign"
]
}
It seems like you have multiple configurations as mentioned in the error message, I'd suggest removing the following configuration lines from your package.json file and operate your babel configurations exclusively from the .babelrc file in your project root
"babel": {
"presets": [
"react",
"es2015"
]
}
I'm new to React, webpack, Babel.... all of it. Trying to setup a vanilla project where I want to utilize Salesforce Lightning Design System for React. npm run start shows the following error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/brandor/test/react_tut/src/index.js: Cannot find module 'babel-preset-env'
Require stack:
- /Users/brandor/test/react_tut/node_modules/#salesforce/babel-preset-design-system-react/index.js
I'm not sure why it's stating that 'babel-preset-env' is required. Shouldn't that have been installed when I installed the slds modules with the following?
$ npm install #salesforce-ux/design-system #salesforce/design-system-react
If I do install the module (along with one other it complains about) then I get something that seems to be related to this issue, but I'm using what looks like the correct presets in my babel.config.js file.
The other error is:
TypeError: /Users/brandor/test/react_tut/src/components/App.js: Cannot read property 'bindings' of null which
Not sure if this is an issue with webpack config, babel, or incorrect version of something.
package.json
{
"name": "react_tut",
"version": "1.0.0",
"description": "Boilerplate stuff",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open --hot"
},
"license": "MIT",
"dependencies": {
"#salesforce-ux/design-system": "^2.11.6",
"#salesforce/design-system-react": "^0.10.18",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"core-js": "^3.6.4",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-flow": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"url-loader": "^4.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx']
},
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.join(__dirname, 'src/js'),
path.join(__dirname, 'node_modules/#salesforce/design-system-react'),
],
exclude: [
path.join(
__dirname,
'node_modules/#salesforce/design-system-react/node_modules',
),
],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(svg|gif|jpe?g|png)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(eot|woff|woff2|ttf)$/,
loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
}),
],
};
babel.config.js
'use strict';
const presets = ['#babel/preset-react', '#babel/preset-flow', '#salesforce/babel-preset-design-system-react'];
module.exports = {
presets: [
...presets,
[
'#babel/preset-env',
{
modules: false,
corejs: '3',
useBuiltIns: 'usage',
},
],
],
env: {
test: {
presets: [
...presets,
[
'#babel/preset-env',
{
targets: { node: 'current' },
corejs: '3',
useBuiltIns: 'usage',
},
],
],
},
},
};
Trying to set up a react web app but keep running into this error after trying to implement semantic-UI by putting import "semantic-ui-css/semantic.min.css"; in index.jsx.
I npm installed css-loader and style-loader as thats the error I was getting prior to this new error.
My guess is a webpack.config needs to be adjusted to handle the loaders differently but I'm unsure on how to proceed with this.
ERROR in ./node_modules/semantic-ui-css/themes/default/assets/fonts/outline-icons.woff
Module parse failed: C:\Users\Shawn\Documents\GitHub\Galavue\Galavue\node_modules\semantic-ui-css\themes\default\assets\fonts\outline-icons.woff Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 15:42-101
# ./node_modules/semantic-ui-css/semantic.min.css
# ./react-client/src/index.jsx
Package.json
{
"name": "galavue",
"version": "0.0.0",
"description": "Galavue",
"main": "server.js",
"author": "Shawn",
"scripts": {
"dev": "webpack -d --watch",
"start": "node ./server/index.js",
"build": "webpack -p",
"react-dev": "webpack -d --watch",
"server-dev": "nodemon server/index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/www.github.com/shawnSFU.git"
},
"license": "ISC",
"bugs": {
"url": "https://github.com/www.github.com/shawnSFU/issues"
},
"homepage": "https://github.com/www.github.com/shawnSFU#readme",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.17.2",
"express": "^4.15.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0",
"webpack": "^3.4.1"
},
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1"
}
}
webpack.config.js
//defines the entry and output points for our application
const path = require('path');
const SRC_DIR = path.join(__dirname, '/react-client/src');
const DIST_DIR = path.join(__dirname, '/react-client/dist');
const webpack = require('webpack');
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
path: DIST_DIR,
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.css'],
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000&minetype=image/png'
},
{
test: /\.jpg/,
loader: 'file-loader'
},
{
test: /\.jsx?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
There are a few things you need to do. Ensure that you have use ~ for CSS imports from node_modules like:
import '~semantic-ui-css/semantic.min.css';
Second, this CSS file semantic.min.css also references *.woff files. I believe it is used for referencing external font files. You would need either url-loader or file-loader to handle those types of files. Sample loader configuration for url-loader would look like:
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000,
},
}
Further documentation:
url-loader
file-loader
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.