We Keep Coding

Module parse failed: Unexpected character but file should be plain Javascript

I'm trying to use react-syntax-higligther in an application built with webpack.
When I import
import SyntaxHighlighter from 'react-syntax-highlighter';
app compile and runs fine, but if I try to do an import for the styles:
import arta from 'react-syntax-highlighter/styles/hljs/arta';
the webpack compilation runs fine without errors, but when I try to run the application I have an error in the console:
index.bundle.js:35943 Uncaught Error: Module build failed:
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
I verified the imported file, and it is plain javascript, here below a portion:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
"hljs": {
"display": "block",
"overflowX": "auto",
"padding": "0.5em",
"background": "#222",
"color": "#aaa"
},
"hljs-subst": {
"color": "#aaa"
},
and furthermore usually these kind of errors arises during webpack compilation, this appear to be a message generated compile time and added to the generated code... I don't understand what is wrong.
ADDITION
Apparently the error is random, since I'm using webpack --watch to compile when file changes, if force recompile by exiting webpack --watch and running it again... it works! Any idea?
for completeness: webpack configuration here below:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Constant with our paths
const paths = {
DIST: path.resolve(__dirname, 'dist'),
JS: path.resolve(__dirname, 'src'),
SRC: path.resolve(__dirname, 'src'),
};
// Webpack configuration
module.exports = {
entry: path.join(paths.JS, 'index.js'),
output: {
path: paths.DIST,
filename: 'index.bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.SRC, 'index.html'),
}),
new ExtractTextPlugin('style.bundle.css'),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
// Files will get handled by css loader and then passed to the extract text plugin
// which will write it to the file we defined above
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
}),
} ,
{
test: /\.(eot|svg|ttf|woff|woff2|png)$/,
loader: 'file-loader',
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
};

Uncaught ReferenceError: require is not defined react + webpack

I have been working on a project for about 2 months and used webpack-dev-middleware.
According to the WDM documentation, its just a wrapper for webpack and run the project in the memory to enable hot reloading.
But now when im trying to build and deploy with webpack and same webpack.config.js i get Uncaught ReferenceError: require is not defined error.
I have searched alot and couldn't find a right answer for my case.
I'd really appreciate any help :).
my webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var autoprefixer = require('autoprefixer');
const webpack = require('webpack');
var fs = require('fs')
module.exports = {
entry: './src/client.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
target: 'web',
// keep node_module paths out of the bundle
externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
'react-dom/server', 'react/addons',
]).reduce(function (ext, mod) {
ext[mod] = 'commonjs ' + mod
return ext
}, {}),
node: {
__filename: true,
__dirname: true
},
plugins: [
new ExtractTextPlugin('styles.css'),
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=100000&name=/[hash].[ext]',
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{ test: /\.json$/, loader: "json-loader"}
],
},
devtool: 'cheap-module-source-map'
}
I'm using webpack version : 1.13.3 as local.

In my case reason was:
...
module: {
noParse: /\.min\.js$/,
...
I've commented it out

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

Parse Error in webpack's package.json

I have the following simple webpack.config.js file:
var webpack = require("webpack"); //LINE OF INTEREST
module.exports = {
entry: ["./main.js"],
output: {
path: "./build",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
When I comment out the top line defining webpack, I get an error because I reference webpack when defining the ProvidePlugin. When I include that 1st line however I get the following cryptic error:
ERROR in (webpack)/package.json
Module parse failed: /var/www/html/node_modules/webpack/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
First of all, I'm unsure why my node_modules folder is my apache root directory. Second of all, why am I getting a parse error? Isn't the package.json file something that was installed via npm? How could there be syntax errors in it?

webpack.config.js
const webpack = require("webpack");
const path = require('path');
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Working Example For more Information

webpack config doesn't work with require() in node.js

I have a file call abc.jsx like this
var MyTitle = require('./MyTitle')
but I have to do require('./MyTitle)
coz I run webpack it throw me error.
ERROR in ./js/MyTitle.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./MyTitle in /Users/username/Documents/intro-to-react/js
# ./js/MyTitle.jsx 5:14-34

You should have set webpack config to resolve jsx file using babel-loader. The following line test: /\.js?$/, in module loader tells webpack to resolve both .js and .jsx file types.
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: "inline-sourcemap",
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
}
};