Webpack is not parsing the jsx file - javascript

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

Related

Module build failed: TypeError: Cannot read property 'context' of undefined at Object.module.exports

I got this unusual error after webpack installation, Searched whole web tried all solution but nothing works,
//My webpack.config.js file
const webpack = require("webpack");
const path = require("path");
const config = {
entry : path.resolve(__dirname,"src/index.js"),
output : {
path : path.resolve(__dirname,"dist/assets"),
filename : "bundle.js",
publicPath : "assets"
},
devServer : {
inline : true,
contentBase : path.resolve(__dirname,"dist"),
port : 3000
},
module : {
rules : [
{
test : /\.js$/,
exclude : path.resolve(__dirname,"node_modules"),
loader : "babel-loader",
query: {
presets: ["env","latest","react","stage-0","es2015"]
}
},
{
test : /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader'
},
{
test : /\.scss$/,
loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
}
]
}
};
module.exports = config;
My babelrc file
{
"presets" : ["env","latest","react","stage-0","es2015"]
}
Index.js file
import React from 'react'
import ReactDOM from 'react-dom'
import { hello, goodbye } from './lib'
ReactDOM.render(
<div>
{hello}
{goodbye}
</div>,
document.getElementById('root')
);
lib.js file
import React from 'react'
import text from './titles.json'
import './stylesheets/hello.css'
import './stylesheets/goodbye.scss'
export const hello = (
<h1 id="title"
className="hello">
{text.hello}
</h1>
);
export const goodbye = (
<h2 id="goodbye"
className="goodbye">
{text.bye}
</h2>
);
titles.json
{
"hello" : "Bonjour",
"bye" : "Au Revoir"
}
i didnot include json loader in webpack.config file as i found out that json loader is added in webpack by default and when i check in browser in console i get this error -> ReferenceError: ReactDOM is not defined.
Error that i get in CLI
//Folder Structure
The solution seems to be around removing the autoprefixer-loader, I don't know for sure, but it may no longer be necessary to include it because it is included as part of one of the loaders or is built into newer versions of webpack. Again I'm just speculating here.
The current bang (!) argument separated syntax seems to still work
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader',
}
But the webpack documentation seems to prefer the broken out style as below
webpack sass-loader
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['env', 'react'],
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
},
],
},

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

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.

Categories