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']
}
}
]
Related
In my react.js app I am trying to use an external module (React Toastify)
using the following statement:
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Unfortunately this throws the following error:
Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .Toastify__toast-container {
| z-index: 9999;
I guess it has something to do with webpack, here are my settings in webpack.config.js:
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'assets'),
},
devtool: production ? '' : 'source-map',
resolve: {
extensions: [".js", ".jsx", ".json"],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
};
I am not sure how this can be fixed, any advice appreciated.
In your webpack config file you have add the css loader test:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
And don't forget to install it with npm i -D css-loader.
More info here: https://github.com/webpack-contrib/css-loader
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' }
I have been using this webpack config for loading babel and css loaders, but getting error. My webpack config works very well, if I use only babel loader, but css loader isn't working.
var path = require('path');
var config = {
entry: './main.js',
output: {
path : path.join(__dirname, './'),
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader',
}
]
}
}
module.exports = config;
The error I am getting while running webpack is
ERROR in ./~/css-loader!./main.js
Error screenshot
You need to configure the CSS loaders for imports matching .css not .jsx. Right now you're passing a JavaScript file to the css-loader, which isn't valid CSS, so it fails. The correct loader configuration is:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
}
]
}
You need style loader in your webpack config:
Example from one of my projects:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},
],
},
...
I'm having issues loading in my scss files with webpack.
I get this error:
Module build failed:
#import 'bulma';
^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "content = requi..."
This is my webpack config file:
module.exports = {
entry: "./app/App.js",
output: {
filename: "public/bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loaders: ['css', 'sass', 'style']
}
]
}
};
This is main.scss:
#import 'bulma';
body {
background-color: red;
}
and I import the file in the App.js entry point like so:
import './stylesheets/main.scss';
Any tips?
Your loaders are in the wrong order. Loaders are read right-to-left. You want to parse the SCSS into CSS, then parse CSS into Javascript, then load the parsed CSS as a style tag, so you want:
loaders: ['style', 'css', 'sass']
I have installed react-hot-loader and referenced the module in the webpack.config.js. However when i try to run webpack to compile the scripts, i get an error.
Please see below screen shot. Could someone please advise of what the issue could be. FYI, i am using all the latest libraries.
[1]: http://i.stack.imgur.com/2GCa1.jpg
/*webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: {
main: [
'./src/main.js'
]
},
output: {
filename: './public/[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['react-hot','babel-loader'],
query: {
presets: ['es2015', 'react']
}
}
]
}
}
/*UPDATE*/
Code update
I have added an "s" after loader. It is now giving me the below error.
[2]: http://i.stack.imgur.com/LL1nn.jpg
Based on your second picture, you could try the following:
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['react-hot'],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['babel-loader'],
query: {
presets: ['es2015', 'react']
}
}
]
I've created a starter with webpack, babel and react-hot-loader. Please have a look into my config: https://github.com/skrobek/webpack-react/blob/master/webpack.config.js
and package.json https://github.com/skrobek/webpack-react/blob/master/package.json#L19
Feel free to use it :-)