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']
}
}
},
//...
}

Possible to have separate src from modules and webpack config?

I have an app that is in a different folder structure than the modules installed from the package.json and I cannot find a way to make it work:
Structure:
includes
build
build stuff
src
shared assets
js
...APP (the app is a few folders down still)
How can I specify that the modules are somewhere and the app is in another place? Is this even possible? as If I set up the src of my app in the place where the build setup is, everything work as expected.
Where is my very simple webpack config.
var getters = require('./../gulpfile.js/config/getters');
var path = require('path');
var appRoot = path.resolve(__dirname, '../src');
var appRoot2 = path.resolve(__dirname, '../../main/jcr_root/etc/designs/fit/includes/shared_assets/js/vueapps/chat_app/src');
module.exports = {
context: appRoot2,
entry: './main.js',
output: {
filename: 'app.js',
path: getters.js.vue.apps.chatapp.dist
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
loaders: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
modules: [
'node_modules'
]
}
};
I this you can see I have appRoot and appRoot2, appRoot works as expected, appRoot2 fails giving me this error.
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in ...
EDIT: Forgot to mention I'm using :
"vue-loader": "^9.4.0".
"webpack": "^2.2.0".
"babel-loader": "^6.3.2".
EDIT2: Got it working, had to specify with another option:
resolveLoader: {
modules: [
nodeRoot
],
}
Also in the loader had to add this option:
{
test: /\.js$/,
loaders: 'babel',
exclude: /node_modules/,
query: {
presets: [nodeRoot + '/babel-preset-es2015'],
}
}
With the path to the preset.

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.

Webpack problems importing font-awesome library

I'm building a React application that will require font-awesome CSS to be imported, but I'm getting an error saying that the module cannot parse the woff2 files.
Below is my code:
import React from 'react';
import ReactDOM from 'react-dom';
require('css!../node_modules/bootstrap/dist/css/bootstrap.css')
require('css!../node_modules/font-awesome/css/font-awesome.css')
import '../node_modules/bootstrap/dist/js/bootstrap.js'
import Dashboard from './components/Dashboard/Dashboard';
ReactDOM.render(
<Dashboard/>,
document.getElementById('react-container')
);
This is the error I'm getting in the browser:
When running on browser I'm getting the following error:
bundle.js:669 ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: D:\DEV\airwaysprj\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
at Parser.pp$4.raise (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2468:15)
at Parser.pp$7.next (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2413:10)
at Parser.pp$3.parseIdent (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:2191:10)
at Parser.pp$3.parseExprAtom (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1774:21)
at Parser.pp$3.parseExprSubscripts (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1597:21)
# ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:479-532
[1]: https://webpack.github.io/docs/stylesheets.html
And my webpack.config.js file:
var path = require('path');
module.exports = {
entry: "./client/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js",
publicPath: "/dist"
},
module: {
loaders: [
{
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
],
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader']
},
{
test: /images\/.*\.(png|jpg|svg|gif)$/,
loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
},
{
test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader?name="[name]-[hash].[ext]"',
}
]
},
watch: true
}
Help appreciated to solve this issue.

This configuration for webpack.config.js from here solved the problem:
var config = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}]
}
};
module.exports = config;

You'll need to remove ?v=4.7.0
You can see that your current regex does not match the end part ?v=4.7.0. So either you can remove that end part or modify your regex to allow it at the end.
/fonts\/.*\.(woff|woff2|eot|ttf|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$
Above regex will allow versions at the end.
Optionally, You can also write the above regex like this,
/fonts\/.*\.(woff(2)?|eot|ttf|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$

I think your /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/ can not match /fonts/fontawesome-webfont.woff2?v=4.7.0. the end of the font file path is ?v4.7.0. try to remove the $.

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')
]
}
}
]
},