We Keep Coding

Appropriate loader error on index.js

I'm stuck on this same error and I need fresh eyes for help.... I'm confused on the "appropriate loader". I was thinking this was from an improper regular expression in the webpack file. I checked the babel docs and this issue for guidance.
This is the error...
ERROR in ./src/index.js
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
# multi (webpack)-dev-server/client?http://localhost:8080 ./src
This is my src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))
.babelrc
{
"presets": ["env", "react"],
"env": {
"development": {
"plugins": [["react-transform",{
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
webpack.dev.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/',
},
module: {
rules: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: [path.resolve(__dirname, "src")]
}
],
},
devServer: {
historyApiFallback: true,
inline: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({template: 'src/index.html'}),
new webpack.HotModuleReplacementPlugin()
],
}
and my package.json
{
"name": "webpack-starter-kit",
"version": "1.0.0",
"description": "starter files for basic development and production using React, Babel, Webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --mode=development",
"build": "webpack --mode=production"
},
"author": "Kevin Turney",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.7",
"postcss-loader": "^2.1.2",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.1"
}
}

'webpack' not recognizing when running within the project

When I try to run 'webpack' within the project the command line displays the following error:
'webpack' is not recognized as an internal or external command, operable program or batch file.
I have installed webpack with the command,
npm install webpack babel-core babel loader babel-preset-es2015 babel-preset-react react react-dom --save
Even though I tried this accepted answer , it comes with another error.
webpack.config.js file
module.exports = {
entry: './src/index.js',
output: {
path: './dist',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}}
package.json file
{
"name": "dummytextgen",
"version": "1.0.0",
"description": "Simple dummy text generator",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"webpack": "^4.5.0"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}
Using OS - Windows 8 ,
npm version - 5.6.0

You might try to give the exact path to the webpack binary when you try to execute weback from within your project folder:
node_modules\.bin\webpack

As per the screenshot you need to update the rules ,I have updated the configuration file its working fine. Please go through.
webpack.config.js
var path=require('path')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + "/dist",
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}}
package.json
{
"name": "dummytextgen",
"version": "1.0.0",
"description": "Simple dummy text generator",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --config webpack.config.js --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"webpack": "^4.5.0"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}

npm install webpack webpack-cli -g
should help

webpack not generating bundle.js

I am making a web app use react and php and i am using webpack for es6 to js so i generated files but i have a problem about webpack output bundle.js file.
this is my webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: [
'./src/index.jsx'
],
output: {
path: '/dist',
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
}, {
test: /(\.css|.scss)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
};
this is my package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.18",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"react-hot-loader": "^3.1.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"bootstrap": "^4.0.0",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"reactstrap": "^5.0.0-beta"
}
}
why webpack generate and give me a bundle.js into the dist folder ? only saves it to the memory and show it on the localhost. i want use this react app with php but i can not handle to bundle.js.
Where is the problem and why the webpack did not generate the js file.
please help me

Your webpack configuration output filed got problem.
import const path = require('path') first in webpack.config.js and change output filed as below:
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
And add following script into your package.json in script filed
"build": "webpack -p --progress"
Run npm run build

This is the expected behaviour for webpack dev server. If you wish to generate the output on disk, you need to run webpack, e.g:
"scripts": {
"start": "webpack-dev-server --history-api-fallback ...",
"build": "webpack"
}
then run npm build. For production, you should also set NODE_ENV=production, for example using cross-env:
"build": "cross-env NODE_ENV=production webpack"

Minified React with Webpack is not working

I am developing a web app in React using Webpack. I have followed this guide to generate bundle.js in production mode, but it is not working. I always get:
Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster.
This is my webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//FOR CSS
var config = {
devtool:'cheap-module-source-map',
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css', {allChunks: false}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: true
}
})
]
};
module.exports = config;
And this is the package.json file I am using:
{
"name": "p12uibetajsx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack -d",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.18.2",
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1",
"webpack-combine-loaders": "^2.0.3"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-responsive-carousel": "^3.0.21",
"webpack": "^1.13.3",
"webpack-combine-loaders": "^2.0.3"
}
}
Is there anything else I need to configure? Am I missing something?
Thank you very much.

Webpack ExtractTextPlugin with boostrap-sass

I am using bootstrap sass and extract text-plugin to output the compiled css into a file. It works perfectly if I don't import bootstrap inside my style.scss, but when I import bootstrap webpack can't resolve the font paths. It looks for bootstrap fonts in my src folder instead of the /node_modules/bootstrap-sass/
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.svg in /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
package.json
{
"name": "dari-dictionary-api",
"version": "1.0.0",
"description": "Dari Dictionary API built with express.js for the Android App.",
"main": "dist",
"scripts": {
"dev": "nodemon --ignore src/assets -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src",
"watch": "webpack --display-error-details --config webpack.config.js --watch"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Yasin Yaqoobi",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"bootstrap-sass": "^3.3.7",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"nunjucks": "^3.0.0",
"path": "^0.12.7"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"eslint": "^3.1.1",
"express-winston": "^2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^4.0.0",
"nodemon": "^1.9.2",
"sass-loader": "^4.0.2",
"sqlite3": "^3.1.8",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"winston": "^2.3.0"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('public/css/style.css');
module.exports = {
entry: path.resolve(__dirname, 'src/assets/js'),
output: {
filename: 'public/js/index.js',
},
devtool: "source-map",
module: {
loaders: [{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
exclude: /node_modules/,
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0'],
}
},
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
]
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ // Make jquery available globally
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
],
debug: true,
}