We Keep Coding

Webpack build Failed, Throws Unexpected Token Error JSX syntax

ERROR in ./client/index.js
Module build failed: SyntaxError: Unexpected token (31:4)
const Root = () => {
return (
<ApolloProvider client={client}>
^
<Router history={hashHistory}>
My Webpack config file below:
const path = require('path'),
webpack = require("webpack"),
clientPath = path.join(__dirname, 'client'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(clientPath, 'index.js'),
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}
],
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html'
})
]
};
I am not able to build , it throws Unexpected token error while I have no syntactical mistake in code, Its just not able to recognise react code style
I have tried changing js to jsx inside webpack config at this place
{
use: 'babel-loader',
test: /\.jsx$/,
exclude: /node_modules/
}
Then it throws different error like
Module parse failed: /client/index.js Unexpected token (31:4)
You may need an appropriate loader to handle this file type.

It was my mistake only, ".babelrc" file was missing in my directory so I have created a file inside my app directory at root level and put this content into that file
.babelrc
{
"presets": ["env", "react"]
}
And tried with npm run-script build....succeeded!!!!

I see two possible causes:
1) loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
] will do nothing as loaders should be specified in module.rules so nothing is handling jsx files. This can be done to handle both js and jsx files using regex /\.jsx?/
2) The babel loader has no presets so unless they are specified in a .babelrc ypou arent showing, then you need to add the necessary presets to the loader
These should both be remedied by...
npm install babel-preset-react babel-preset-es2015
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
//...
}

Node+React+Babel+Webpack, Unexpected token error

First of all, I REALLY tried to fix it myself, I found several similar questions here, but none helped me.
Getting this error:
ERROR in ./src/components/App.jsx
Module parse failed: D:\JS projects\habr-app\src\components\App.jsx Unexpected token (54:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div className='App'>
| <h1>Hello World!</h1>
| <div>
# ./src/client.js 3:0-42
# multi (webpack)-dev-server/client?http://0.0.0.0:8050 webpack/hot/dev-server babel-polyfill ./src/client.js
client.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render ("<App />", document.getElementById('react-view'));
render function in App.jsx looks like this:
render() {
return (
<div className='App'>
<h1>Hello World!</h1>
<div>
<p>Введите Ваше имя:</p>
<div><input onChange={this.handleNameChange} /></div>
{this.renderGreetingWidget()}
</div>
</div>
);
}
webpack.config.js file:
global.Promise = require('bluebird');
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var publicPath = 'http://localhost:8050/public/assets';
var cssName = process.env.NODE_ENV === 'production' ? 'styles-[hash].css' : 'styles.css';
var jsName = process.env.NODE_ENV === 'production' ? 'bundle-[hash].js' : 'bundle.js';
var plugins = [
new webpack.DefinePlugin({
'process.env': {
BROWSER: JSON.stringify(true),
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
new ExtractTextPlugin(cssName)
];
if (process.env.NODE_ENV === 'production') {
plugins.push(
new CleanWebpackPlugin([ 'public/assets/' ], {
root: __dirname,
verbose: true,
dry: false
})
);
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = {
entry: ['babel-polyfill', './src/client.js'],
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new ExtractTextPlugin("styles.css"),
new webpack.LoaderOptionsPlugin({
debug: true,
options: {
eslint: { configFile: '.eslintrc' }
}
})
],
output: {
path: `${__dirname}/public/assets/`,
filename: jsName,
publicPath
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
],
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader'})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader!less-loader'})
},
{ test: /\.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
{ test: /\.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
{ test: /\.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
{ test: /\.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
{ test: /\.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },
{ test: /\.jsx?$/, loaders: ['react-hot-loader', 'babel-loader?presets[]=react,presets[]=es2015'],
exclude: [/node_modules/, /public/] , query: {presets: ['es2015', 'react', 'react-hot']} },
{ test: /\.json$/, loader: 'json-loader' },
]
},
devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : null,
devServer: {
headers: { 'Access-Control-Allow-Origin': '*' }
}
};
The only way I can fix this problem - is to put quotes around html in render:
render() {
return (
`<div className='App'>
<h1>Hello World!</h1>
<div>
<p>Введите Ваше имя:</p>
<div><input onChange={this.handleNameChange} /></div>
{this.renderGreetingWidget()}
</div>
</div>`
);
}
But after that I'm gettin this error in browser and nodemon:
Invariant Violation: App.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
I checked and rechecked all dependencies, modules and my files.
Still, I cant find an error. Could someone help me, please?
P.S. Sorry for my awful English.
Funny thing. When I start nodemon without those quotes in App.jsx, my page loads, but without css. After that I add quotes in file App.jsx and now webpack-devserver builds everything right, and page gets .css after refresh. JS-script still doesnt work on it, but looks almost like it should... Right until I restart nodemon... It starts to show same error "Invariant Violation: App.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."

The error tells you that you did not define a loader that can handle JSX, although it might look like you did in your webpack config. The problem is that you define both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely (though it still exists for compatibility reason). The fix is simple, just put all loaders under module.rules.
And there is also a problem in your .jsx? rule, because query (which is also deprecated and replaced with options) cannot be used for an array of loaders, but instead should be defined per loader in the array. Since you did it inline as string you don't need it at all.
To get a working config replace the module section with:
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader'})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader!less-loader'})
},
{ test: /\.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
{ test: /\.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
{ test: /\.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
{ test: /\.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
{ test: /\.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },
{ test: /\.jsx?$/, use: ['react-hot-loader', 'babel-loader?presets[]=react,presets[]=es2015'],
exclude: [/node_modules/, /public/] },
{ test: /\.json$/, loader: 'json-loader' },
]
},
In case you decide to use options, which is definitely more readable, your .jsx? rule would look like this:
{
test: /\.jsx?$/,
use: [
'react-hot-loader',
{ loader: 'babel-loader', options: { presets: ['react', 'es2015'] } },
],
exclude: [/node_modules/, /public/]
}
As shown in the docs for use.

Webpack fails rendering express import

NodeJS/Express: Webpack fails transpiling src/server/app.js to dist/server/app.js, after me adding import express from 'express' to the src-file (src/server/app.js).
The error messages look like:
ERROR in ./~/express/lib/request.js
in detail:
Module not found: Error: Can't resolve 'net'
in '/Users/timo/Desktop/Eggs/node_modules/express/lib'
or
ERROR in ./~/express/lib/view.js
in detail:
Module not found: Error: Can't resolve 'fs'
in '/Users/timo/Desktop/Eggs/node_modules/express/lib'
Do I have to change something in my webpack.config.babel.js-file?
here it is:
export default [
{
entry: './src/server/app.js',
output: {
path: './dist/server',
filename: 'app.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}]
}
},
{
entry: './src/client/app.js',
output: {
path: './dist/client',
filename: 'app.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}]
}
}
]

Try setting the "node" target for your server-side code:
{
entry : './src/server/app.js',
target : 'node',
...
}
By default, Webpack will compile for usage in a web browser, which doesn't support a lot of modules that only make sense to run server-side (like net and fs).

are you config .babelrc?webpack1 has no query option in module.loaders.if the problem even occurs.you can delete node_modules and reinstall npm install.May be something you link some dependencies from global repository via npm link,I have met.

angular2-template-loader: Error: Can't resolve './' in \#angular\compiler\src

Trying to bundle my angular2 app with webpack2 and angular2-template-loader, but getting this error:
ERROR in ./~/#angular/compiler/src/compile_metadata.js
Module not found: Error: Can't resolve './' in 'C:\Users\eagor\Documents\work\node_modules\#angular\compiler\src'
# ./~/#angular/compiler/src/compile_metadata.js 393:22-35
# ./~/#angular/compiler/index.js
# ./~/#angular/platform-browser-dynamic/src/platform-browser-dynamic.js
# ./~/#angular/platform-browser-dynamic/index.js
# ./src/login/index.js
Without the angular2-template-loader it bunldes just fine.
src/login/index.js:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { LoginModule } from './src/login.module';
document.addEventListener('DOMContentLoaded', function() {
platformBrowserDynamic()
.bootstrapModule(LoginModule);
});
src/login/src/login.module.js
export class LoginModule {
// make empty for example.
}
webpack.config.js:
var path = require("path");
module.exports = {
entry: {
login: "./src/login/index.js"
},
output: {
path: path.resolve(__dirname, "wwwroot/bundles"),
filename: "[name].min.js"
},
module: {
loaders: [
{
test: /\.js$/, exclude: /node_modules/,
loader: "babel-loader"
},
// adding this loader breaks
{
test: /\.js$/,
loaders: ['angular2-template-loader'],
exclude: [/\.(spec)\.js$/]
},
{
test: /\.(html|css)$/,
loader: 'raw-loader'
}
]
}
};

You should exclude the node_modules folder:
{
test: /\.js$/,
loaders: ['angular2-template-loader'],
exclude: [/node_modules/, /\.(spec)\.js$/]
}
Otherwise webpack tries to pipe also .js files that are located somewhere in the node_modules folder through your pipeline, which is something you don't want and breaks things in your case.

Webpack is not parsing the jsx file

I have this jsx file.
//react code
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
and this is my webpack.confg.js file
//webpack config
module.exports = {
entry: __dirname + '/assets/app/components/test/test.jsx',
output: {
path: __dirname,
filename: '/assets/app/components/test/test.min.js'
},
module: {
loaders: [
{
test: '/\.jsx?/',
exclude: '/node_modules/',
loader: 'babel',
query: {
presets:['es2015', 'react']
}
}
]
}
}
on running the web pack its giving the error as
/assets/app/components/test/test.jsx
Module parse failed: /Users/joseph.antony/workspace/sloop/assets/app/components/test/test.jsx Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)

I'm fairly sure that your issue is due to the regex tests not being expressed correctly:
This:
test: '/\.jsx?/',
exclude: '/node_modules/',
Should be:
test: /\.jsx?/,
exclude: /node_modules/,
Regex literals are not wrapped in strings.

Here is my module config I used for all React projects I create. You will need to npm install the packages I have specified below.
module: {
loaders: [
{
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
exclude: __dirname + "/node_modules",
loader: require.resolve("babel-loader"),
query: {
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react')
]
}
}
]
},