I am having following code in my .jsx file.
var React = require('react'),
ReactDOM = require('react-dom');
module.exports = React.createClass({
render: function() {
var classes = {container: 'test'};
return (<div className={classes.container}></div>)
}
});
I am using following loader configuration in webpack-dev-server for jsx files
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react'],
exclude: /node_modules/
},{
test: /\.jsx?$/,
loader: 'string-replace',
query: jsRepQuery,
exclude: /node_modules/
}]
I am getting following error.
ERROR in ./~/test.jsx
Module parse failed: /test.jsx Unexpected token (20:23)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (20:23)
Basically the position of error (20:23) is curly brace {. Do I need to use any other loader?
Update: failed parser file is in node_modules folder. Since it is excluded, looks like we are getting this error. But then I don't want all node_modules to get executed. How can I just exlude this node_module from the excludes list?
I have added another loader to accept only required node_module by using following.
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react'],
exclude: /node_modules/
},{
test: /\.jsx?$/,
loader: 'string-replace',
query: jsRepQuery,
exclude: /node_modules/
},{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react'],
include: function(absPath) {
if(absPath.indexOf('/node_modules/orb/') > -1) {
return true;
} else {
return false;
}
}
}]
Related
I am using styleguidist for my react application, here is the code of my styleguid.config.js file:
module.exports = {
webpackConfig: {
module: {
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
}
]
}
}
}
Now I want to show barcode image in my styleguidist server which is running in http://localhost:6060.
Code of my styleguidist readme.md
```jsx
var Macybarcode = require('../../../containers/assets/img/macy/barcode.png');
const barcode_img = Macybarcode;
const barcode_no = "33527111690008";
<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />
```
But whenever I am trying to show image my server is giving following error:
Please click to see the Error console
You need url-loader for images
Use:
npm install url-loader --save
module.exports = {
webpackConfig: {
module: {
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000
}
}
}
]
}
}
}
try this line inside
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
WOFF files are failing to load and I am not getting an idea to why file-loader is failing to load WOFF, WOFF2 and SVG.
Here is my Webpack 4 loaders config:
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
Please suggest a solution to me.
You can user webpack url-loader for that and it will resolve your problem.If you are using npm you can install npm install url-loader --save-dev and in your webpack.config.js you can write module settings like this
{test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}
and import images like import img from './image.svg'
Github : https://github.com/webpack-contrib/url-loader
NPM : https://www.npmjs.com/package/url-loader
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
It worked for me. And also you can use resolve-url-loader
https://www.npmjs.com/package/resolve-url-loader
In our project, I'm trying to refactor all our components to have a .jsxfile extension rather than .js. My webpack.config.babel file now looks like this:
import fs from "fs"
const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))
export default {
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.jsx$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.json$/,
loader: "json-loader",
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
}
However when I try to run import Main from './components/Main/Main';
in my client.js file, it shows me
Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
# multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js
I'm new to babel and webpack. What other places to I need to register the jsx file extension?
Take a look at the documentation for resolve.extensions:
https://webpack.js.org/configuration/resolve/#resolveextensions
You can add the following to your Webpack config to also automatically resolve files with the .jsx extension by adding the following to your config:
resolve: {
extensions: ['.js', '.jsx']
}
Btw, you can also optimize your loader config by removing the separate .jsx loader and make the first loader test for /\.jsx?$/
I've read lots of other S/O posts that detail a similar problem, however I cannot find a solution for my specific issue.
I installed a node module, but I am now receiving this error message:
(syllable - is the module I installed)
index.js:641 ./~/syllable/problematic.json
Module parse failed: /Desktop/App/node_modules/syllable/problematic.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
Here is my Webpack config
var config = {
entry: './main.js',
output: {
path: './',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
},
{ //<-- this line is throwing an unexpected token error
test: /\.json$/,
loader: 'json'
}
}
]
}
}
module.exports = config;
Note: I have es2015 installed, and I have tried re-writing the webpack.config.js several times to no avail.
What am I doing incorrectly?
It is trying to load a .json file. You currently do not have a json-loader setup to handle this sort of thing. Have a look at json-loader.
Example
npm install --save-dev json-loader
webpack.config.js
...
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
loader: 'json'
}
}
]
...
What is error and message
index.js:641 ./~/syllable/problematic.json Module parse failed:
/Desktop/App/node_modules/syllable/problematic.json Unexpected token
(2:11) You may need an appropriate loader to handle this file typ
And answer
You should really read it, It clearly says that Module parse failed. It gave you file name and told you that You may need an appropriate loader to handle this file typ
json-loader what you need
install json-loader with npm and add it to your config.
{
test: /\.json$/,
loader: 'json'
}
Currently your regular expression does not match any file extension. If you're trying to test both .js and .jsx file remove the last $ and replace it with ? and remove the |.
module:{
loaders: [
{
test: /\.jsx?/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
I have tried many ways, I searched stackoverflow, still can not resolve.
I'm a react newbie.
the error :
ERROR in ./public/js/index.jsx
Module parse failed: /home/m/react/r-chat/front/public/js/index.jsx Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| /*'use strict';*/
|
| import React, { Component, ProTypes } from 'react';
| import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
| import Avatar from './components/avatar.jsx';
And my webpack file:
var webpack = require('webpack');
module.exports = {
entry: './public/js/index.jsx',
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
You need a loader for .jsx. Since you are using .jsx files, the .js loader will not work for that.
change
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
to
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
You see in your loaders of the webpack config you are testing for js? You need to add it for JSX and use an appropiate loader for it.
babel can do this for you via babel-loader: https://github.com/babel/babel-loader
All you need to do is as the x into the test, like so:
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]