I get this error when do npm start.
I tried deleting node modules and doing npm install again but dint fix issue
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./main.js
Module not found: Error: Can't resolve 'babel' in '*****'
# multi (webpack)-dev-server/client?http://localhost:8080 ./main.js
webpack: Failed to compile
This is my webpack.config
module.exports = {
entry : './main.js',
output: {
path: '/',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8083
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
}
}
This is my package.json
{
"name": "proj3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}
you need to add Babel package to your project since it transpiles ES6 code (react).
This are the packages.
babel-loader
babel-core
babel-preset-es2015
babel-preset-react
Related
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 setting up new react project and I try to compile webpack and had syntax error. In my guesses it is due to package.json and webpack.config.js problem
this is my pacakage.json code
{
"name": "blog_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/preset-env": "^7.5.2",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"css-loader": "^3.0.0",
"node-sass": "^4.12.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5"
},
"dependencies": {
"babel-preset-react": "^6.24.1"
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
and here is my webpack.config.js code
const path = require('path');
module.exports = {
mode: 'none',
entry: {
app: './src/index.js'
},
watch: true,
devtool: 'source-map',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: [
'.js'
]
}
}
and index.js code I trying to compile and show some div tag on a webbrowser
import React from 'react'
import ReactDOM from 'react-dom'
class RootEl extends React.Component {
render() {
return <div><h1>This is JSX!</h1></div>;
}
}
ReactDOM.render(<RootEl />, document.getElementById("root"))
and when I try to compile this code and then webpack shows me error message
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\blog\blog\static\src\index.js: Unexpected token (7:15)
5 |
6 | render() {
> 7 | return <div>This is XML!</div>;
| ^
8 | }
9 |
10 | }
JSX (like <div> inside javascript) is not a valid javascript syntax. You need babel to transpile those JSX into a valid javascript. To do it, you need to tell babel HOW to transpile those.
You should install #babel/preset-react and set babel up so it will use that preset.
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-react'],
],
},
},
]
}
]
},
Presets are basically just a set of rules that babel can refer to when trying to transpile codes.
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.
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']
}
}
]
},