We Keep Coding

Webpack Module build failed when importing React components

I'm working on a project to integrate React and ASP.Net together. I've made the initial Hello World and every works as expected (not hard :p). I'm using webpack with babel-loader to generate my `bundle.js.
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>LPMU</h1>, document.getElementById('root'))
This is my webpack.config.js file:
module.exports = {
context: __dirname,
entry: "./App.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env', 'babel-preset-react']
}
}
}
]
}
}
After this worked out, I tried to add my App.js component and all other components into my react folder, inside Scripts on my ASP.NET project. I'm not doing the export default App since I'm using the ReactDOM.render(). I import my components into my App.js as usual:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Landing from './Landing';
import * as lpmuGlobal from './lpmu-global';
And then I just render the App component:
ReactDOM.render(<App />, document.getElementById('root'))
Now when I run npm run webpack again, I get 2 problems, which are the following:
size name module status
704 B 0 ./App.js built failed ✖
Δt 596ms (1 asset hidden)
./App.js
0:0 error Module build failed (from ./node_modules/babel-loader/lib/index.js):
configuration
0:0 warning The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
✖ 2 problems (1 error, 1 warning)
I've been searching for a solution, but since I'm really new to webpack, I don't know what happens, if I need anything else on my webpack.config.js, if I have to import my components in any other way or whatever.
ALso this is my json.package:
{
"name": "lpmu-react-app",
"version": "1.0.0",
"description": "Integración de ReactJS con ASP.NET",
"main": "App.js",
"scripts": {
"start": "react-scripts start",
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "DPS",
"license": "ISC",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"webpack-command": "^0.2.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.4"
}
}
Thanks

The error is because you have not added a .babelrc file or babel options to your package.json file to provide babel options.
In order to enable the preset you have to define it in your .babelrc
file
Add babel option to your package.json as such :
package.json:
{
"name": "lpmu-react-app",
"version": "1.0.0",
"description": "Integración de ReactJS con ASP.NET",
"main": "App.js",
"scripts": {
"start": "react-scripts start",
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel":{
"presets": ["env","react"]
}
"author": "DPS",
"license": "ISC",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"webpack-command": "^0.2.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.4"
}
}
Go through the below links for further clarification:
https://babeljs.io/docs/en/babelrc.html
https://babeljs.io/en/setup/#installation
About the warning :
Webpack 4 needs you to include the mode option to your configuration, as you would usually want to have development and production configurations separate.
Go through the link below which explains in detail how to set configurations.
https://www.valentinog.com/blog/webpack-4-tutorial/
module.exports = {
context: __dirname,
entry: "./App.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env', 'babel-preset-react']
}
}
}
]
}
}
Hope that helps :)

Webpack 2 'cannot find /'

I am pretty new to this, but while upgrading to webpack 2 and adding jsx support to my project, I changed the gonfig rules to match what the api calls for in Webpack 2 and added babel-loader. All I am seeing in the browser is "cannot find /".
When I run DEBUG=express:* node index.js
I get:
.../Sites/practice/index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react'
^^^^^^
SyntaxError: Unexpected token import
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:146:18)
at node.js:404:3
webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './index.js',
output: {
path: 'public',
filename: 'bundle.js',
publicPath: '/'
},
plugins: process.env.NODE_ENV === 'production' ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
] : [],
module: {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react'] },
}],
},
{
test: /\.jsx$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react'] },
}],
}
]
},
resolve: {
extensions: [
'.jsx',
'.js',
]
},
}
server.js
var express = require('express')
var path = require('path')
var compression = require('compression')
var React = require('react')
var renderToString = require('react-dom/server')
var RouterContext = require('react-router')
var match = require('react-router')
var routes = require('./modules/routes')
var app = express()
app.use(compression())
// serve our static stuff like index.css
app.use(express.static(path.join(__dirname, 'public'), {index: false}))
// send all requests to index.html so browserHistory works
app.get('*', (req, res) => {
match({ routes, location: req.url }, (err, redirect, props) => {
if (err) {
res.status(500).send(err.message)
} else if (redirect) {
res.redirect(redirect.pathname + redirect.search)
} else if (props) {
// hey we made it!
const appHtml = renderToString(<RouterContext {...props}/>)
res.send(renderPage(appHtml))
} else {
res.status(404).send('Not Found')
}
})
})
function renderPage(appHtml) {
return `
<!doctype html public="storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<link rel=stylesheet href=/index.css>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
`
}
var PORT = process.env.PORT || 8080
app.listen(PORT, function() {
console.log('Production Express server running at localhost:' + PORT)
})
index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './modules/routes'
render(
<Router routes={routes} history={browserHistory}/>,
document.getElementById('app')
)
and package.json:
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
"start:prod": "npm run build && node server.bundle.js",
"build:client": "webpack",
"build:server": "webpack --config webpack.server.config.js",
"build": "npm run build:client && npm run build:server"
},
"author": "",
"license": "ISC",
"dependencies": {
"compression": "^1.6.1",
"express": "^4.13.4",
"if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.1.0",
"http-server": "^0.8.5",
"sass-loader": "^6.0.3",
"static-site-generator-webpack-plugin": "^3.4.1",
"style-loader": "^0.16.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^1.14.1"
}
}
I know i am missing something, but do not know what. I already searched here and tried other suggestions but none of them worked for me.
structure:
-root
-modules
-routes.js
-App.jsx
-othercomponents...
-node_modules
-public
-index.html
-index.css
-data.js
-index.js
-package.json
-server.js
-webpack.config.js
-webpack.server.config.js
-index.js

I think there might be two separate issues:
I am seeing in the browser is "cannot find /".
This looks like an express problem, is the response status 404? In your express server try changing:
app.get('*', (req, res) => {
to:
app.get('/', (req, res) => {
import React from 'react'
SyntaxError: Unexpected token import
This is a node error - node.js does not support ES6 module imports like this. You can change the execution environment to something like babel-node and it should work.
This is actually something I am trying to investigate solutions for - babel-node indicates it is not for production use, but I am having difficulting finding a way to write code in ES6 but use it on the server as well where it is not being processed through a transpiler.

Webpack bundled file not generated

I am just new to webpack and react , just going through the docs and created a example to work. Unfortunately i got stuck and not able to proceed . Th problem is the bundled file is not generated.
The files i created is
package.json
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
module.export = {
entry : './main.js',
output : {
path : './',
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
App.js
import React from 'react';
class App extends React.Component {
render(){
return <div>Hello</div>
}
}
export default App
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />,document.getElementById('app'));
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Setup</title>
</head>
<body>
<div id = "app"></div>
<script src ="index.js"></script>
</body>
</html>
I am getting that bundle is valid, but no index.js is generated.
can't run in localhost 3333
Thanks,

I think the problem is that you are not giving the absolute output path.
Try this:
var path = require('path');
module.exports = {
entry : './main.js',
output : {
path : path.join(__dirname, './'),
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
Hope it helps :)

In webpack.config.js, use module.exports instead of module.export. See Output filename not configured Error in Webpack
Also be noticed that your package.json lacks some dependencies. Here is the updated package.json that works:
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}

Replace your scripts object with the below:
"scripts": {
"start": "npm run build",
"build": "webpack -p && webpack-dev-server"
},
Then, run $ npm start

For me the problem was with package.json under that "scripts"
Here is the fix:
Inside your package.json file, under script add the following:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
First I ran the build then start.
yarn build
if you first build then your bundle.js file will be created and after that you can use this command:
yarn start

In case of no output file (bundle.js) and a successful build
Hash: 77a20ba03ab962a1f5be
Version: webpack 4.41.0
Time: 1039ms
Built at: 10/04/2019 5:24:48 PM
Asset Size Chunks Chunk Names
main.js 1.09 MiB main [emitted] main
Entrypoint main = main.js
[./react_rest/frontend/src/index.js] 35 bytes {main} [built]
+ 12 hidden modules
webpack :
module.exports = {
entry: './react_rest/frontend/src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
},
output: {
filename: 'main.js'
}
};
Try to use var path = require('path'); and allocating output directory
var path = require('path');
module.exports = {
entry: './react_rest/frontend/src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
},
output: {
path: path.join(__dirname,'./react_rest/frontend/static/frontend/'),
filename: 'main.js'
}
};

How to configure and use jQuery with webpack

I have a very simple project to test run jQuery function with webpack. However I ran into errors at the bundle step. Here are the errors:
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 5:13-29
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 8:28-53
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 13:24-43
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 17:25-45
Here are my config files:
package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"jquery": "^2.2.2",
"react": "file:node_modules/react",
"react-dom": "file:node_modules/react-dom",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
}
}
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 config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: 'public',
},
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel'
},
{
test: /\.css/,
include: APP_DIR,
}
]
},
};
module.exports = config;
index.jsx:
import React from 'react'
import {render} from 'react-dom'
import $ from 'jQuery'
(function () {
$(document).ready(function() {
console.log("It works!");
});
})();
If I install the mentioned modules (jsdom, xmlhttprequest, ..), the errors will be replaced by very long errors.

You can use webpack.ProvidePlugin to resolve the jQuery as a global identifier. When you use ProvidePlugin you dont want to import jQuery into the modules since it would be available as global variable.
something like
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]

Webpack/React: Following egghead.io tutorial but getting an error: You may need an appropriate loader to handle this file type

I've just started following this tutorial.
I've gone through the first video three or four times now. When I try to run the application, I get the following error in the console:
ERROR in ./main.js
Module parse failed: /Users/newuser/projects/js101/react-egghead/main.js Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:16)
at Parser.pp.raise (/Users/newuser/projects/js101/react-egghead/node_modules/acorn/dist/acorn.js:920:13)
...
I've looked at similar questions on SO but none seem to have an answer for me.
Here's my webpack.config.js file:
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
moudle: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
This is what package.json looks like:
{
"name": "react-egghead",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.2",
"react-dom": "^15.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
And, although it's not mentioned in the video, I've added a .babelrc file: (which I have now removed)
{
"presets": ["es2015", "stage-0", "react"]
}
This is where the parse fails (line 5):
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('app'))
I really don't know what to try next. Is it a problem with my environment set up or is it a problem with the code in main.js?
Any help would be appreciated.

You have a typo in your webpack config. Instead of module you typed moudle, so your loader configs are actually ignored by webpack :)