Webpack build Failed, Throws Unexpected Token Error JSX syntax - javascript

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

Related

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 $.

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 only generates JS, no CSS file from SCSS

In my project I use Webpack with React and NodeJS. I want to generate a bundle.js and style.css file. Currently I've got the following code:
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: './index.js',
output: {
path: 'public',
filename: 'bundle.js',
publicPath: ''
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
]
},
plugins: [
new ExtractTextPlugin('public/style.css')
]
}
But when I run webpack only the JS file is created in the ./public map:
Asset Size Chunks Chunk Names
bundle.js 844 kB 0 [emitted] main
+ 222 hidden modules
Following examples/tutorials it's only oriented on CSS files, or obvious mistakes where made like not implementing ExtractText.
I've also downloaded the packages sass-loader node-sass. In some examples I did found those packages where included, in some they weren't.
EDIT (require style in index.js):
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './modules/routes'
require('./public/style.css')
render(
<Router routes={routes} history={browserHistory} />,
document.getElementById('app')
)
EDIT (webpack.config.js):
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test : /\.scss$/,
include : path.join(__dirname, './public/sass'),
loaders : ["style", "css", "sass"]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
sassLoader: {
includePaths: [path.join(__dirname, './public/sass')]
},
plugins: [
new ExtractTextPlugin(path.join(__dirname, './public/style.css'))
]
My folder structure looks like this:
webpack.config.js
index.js
/public
index.html
bundle.js (generated)
/sass
style.scss
basics.scss (imported in style.scss)
Make sure that you require your style file.
e.g.
require('../sass/app.scss');
and I think you need style loader as well
e.g.
{
test : /\.scss$/,
include : path.join(__dirname, 'sass'),
loaders : ["style", "css", "sass"]
}
These three loaders perform following operations
Turn your scss files into plain CSS with the sass loader
Resolve all the imports and url(...)s in the CSS with the help of CSS loader
Insert those styles into the page with the style loader
You need a combination of the ExtractTextPlugin and the style loader.
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
},
],
}
...
plugins: [
new ExtractTextPlugin(path.join(__dirname, 'public', 'style.css')),
],
In my working configs, I also have a possibly extraneous entry in resolve:
resolve: {
loaders: [
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
},
],
},
The other error might be how you're including it in index.js. You're using require('./public/style.css') rather than require('./public/style.scss').

Categories