webpack issue when trying to render in reactjs - javascript

Hi I am a newbie in react js and was trying to build an quiz application..When trying to do so I am getting an error when the render is getting called..
The below is the webpack.config file:-
module.exports = {
entry: {
app: './src/index.js'
},
// Add resolve.extensions.
// '' is needed to allow imports without an extension.
// Note the .'s before extensions as it will fail to match without!!!
resolve: {
extensions: ['', '.js', '.jsx', '.es6.js']
},
output: {
path: __dirname,
filename: 'app/js/main.js'
},
module: {
loader: [
// {
// test: /\.css$/,
// loaders: ['style', 'css'],
// // include: PATHS.app
//
// },
// Set up jsx. This accepts js too thanks to RegExp
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
presets:['es2015','react'],
loader: 'jsx-loader'
// query: {
// presets: ['react']
// }
}
]
}
};
The following is my index.js file:-
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
//React.createElement(People, {})
the following is my App.jsx:-
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component{
render(){
return(
<div>Appppppoihj</div>
)
}
}
export default App
The most interesting part is that I am getting an error in my index.js file while I am trying to call renderDOM.render..
The issue I am getting is :-
ERROR in ./src/index.js
Module parse failed: C:\Users\Th\Desktop\ReactJs_Master\src\index.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:4)
The following is my package.json:-
{
"name": "react_quiz",
"version": "1.0.0",
"description": "quiz with the help of reactjs",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Pratham",
"license": "ISC",
"devDependencies":{
"babel-core":"5.8.*",
"babel-loader":"5.3.*",
"webpack":"1.12.*"
},
"dependencies":{
"react":"15.0.1",
"react-dom":"15.0.1"
}
}
I have tried out all different websites and solutions on this website but none of them is helping me so far..The error is coming at < in the app component when calling reactDOM.render
I would of much help if any of you all could help me out as I am stuck for a long time on this and not getting any sort of solution for this..
Thanks a lot for the help.

Instead of jsx-loader try use babel-loader
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: { presets: ['es2015', 'react'] }
}]
}
Note - Make sure that you have installed these packages
npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
babel-loader
babel-core
babel-preset-es2015
babel-preset-react
Update
also you can move presets option from webpack.config to .babelrc
{
"presets": ["es2015", "react"]
}

Related

How to import external css inside jsx file in react?

I have to add the css file externally. Tried with the code import "./Login.css"; which is located in the base path. Cant able to get the file, which turns the error like below.
You may need an appropriate loader to handle this file type.
.Login {
padding: 60px 0;
}
I updated in webpack config also.
Webpack config:
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
In JSX File:
import React from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
Package.json,
{
"name": "reactapp",
"version": "1.0.0",
"description": "Tetser",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-bootstrap": "^0.32.1",
"react-dom": "^15.6.1"
}
}
I tried atmost everything, but no solution. Anyone clarify, please.
You will need to add css-loader and style-loader to your dev dependencies in package.json
Link to webpack docs:
https://webpack.js.org/concepts/loaders/#using-loaders
The way I do it (ex: import fonts from fonts.com) :
create a css file,
import external css in local css file
import local css file in js

Webpack is not parsing the jsx file

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

Trying to integrate redux into react application. Webpack is choking on store.js

I'm trying to integrate redux into an existing react application. All of my react code is within jsx files. Now i'm introducing redux and a store.js. during the compilation webpack errors on an exepected token error on store.js
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'project/static/public/js');
var APP_DIR = path.resolve(__dirname, 'project/static/public/js/components');
module.exports = {
entry: APP_DIR + '/App.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
}
},
module : {
loaders : [
{
test : /\.jsx/,
include : APP_DIR,
loader : 'babel',
presets : ['es2015']
},
{
test : /\.js/,
include : BUILD_DIR,
exclude : /bundle.js||bundle.js.map||node_modules/,
loader : 'babel',
presets : ['es2015']
}
]
},
watchOptions: {
poll: true
}
};
.babelrc
{
"presets": [
"es2015",
"react"
],
"env": {
"start": {
"presets": [
"react-hmre"
]
}
},
"plugins": [
["transform-es2015-arrow-functions", { "spec": true }],
["transform-class-properties"]
]
}
store.js
import { applyMiddleware, createStore} from 'redux';
import combineReducers from './reducers/index.js'
export default createStore(combineReducers)
error message
ERROR in ./project/static/public/js/store.js
Module parse failed: /home/username/git/project/project/static/public/js/store.js Line 1:
Unexpected token
You may need an appropriate loader to handle this file type.
| import { applyMiddleware, createStore} from 'redux';
| import combineReducers from './reducers/index.js'
|
# ./project/static/public/js/components/App.jsx 15:13-32
These files have gone through multiple iterations in trying to resolve and better understand redux. I think the problem is with my webpack configuration.
Which version of Babel are you using? I guess that you need to use the babel-loader in the webpack rule. This configuration works fines with Babel 7 and Webpack 4.
WEBPACK RULE:
{
test: /\.js$/,
include : BUILD_DIR,
exclude : /bundle.js||bundle.js.map||node_modules/,
use: {
loader: 'babel-loader',
},
},
And .babelrc file example:
{
"presets": [[
"#babel/preset-env", {
"useBuiltIns": "entry"
}],
"#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from",
"react-hot-loader/babel"
]
}
Please, keep in mind you need to install babel-loader at least version 8.0.0, babel core 7.0.0 and webpack 4.23.
But, I'm pretty sure that the problem is that you need to use the babel-loader plugin in webpack. Visit https://github.com/babel/babel-loader
Best!

Cannot Import CSS from an npm in webpack

I can't figure out the correct incantation to pull bootstrap.css into my Webpack/React project. When webpack builds my project, I get the following error:
ERROR in ./app/js/XXXXXX/XXXXXX.jsx
Module not found: Error: Cannot resolve module 'bootstrap/css/bootstrap.css' in /Volumes/Doomsday Device/XXXXXX
# ./app/js/XXXXXX/XXXXX.jsx 27:0-38
In the source file, I have the following imports:
import React from 'react';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
require('bootstrap/css/bootstrap.css');
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
In my webpack.config.js, I have:
module.exports = {
...
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], include: APP_PATH },
{ test: /\.scss$/, loaders: ["style", "css", "sass"] },
{ test: /\.css$/, loaders: ["style", "css"] },
{ test: /\.(png|jpe?g|gif)$/, loader: "file-loader?name=img/img-[hash:6].[ext]" }
]
},
....
}
I have added bootstrap as a dependency in package.json:
{
...
"dependencies": {},
"devDependencies": {
...
"bootstrap": "^3.3.6",
"css-loader": "^0.19.0",
...
},
...
}
Any ideas as to why might be wrong? Thanks!
It looks like you have typed wrong path, try importing it from bootstrap/dist/css/bootstrap.css

import syntax not working with webpack

I got Illegal import declaration error. when I tried to integrated a react js repo with webpack
I migrated the original source code from https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js
How could I fix Illegal import declaration error ?
I think the import syntax only works in some js lib ?
Error
ERROR in ./app/main.js
Module build failed: Error: Parse Error: Line 2: Illegal import declaration
at throwError (/Users/poc/sandbox/ha/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
main.js
var React = require('react');
const EventCalendar = require('react-event-calendar');
import moment from 'moment';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import Popover from 'react-bootstrap/lib/PopOver';
import Overlay from 'react-bootstrap/lib/Overlay';
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var config = module.exports = {
// the base path which will be used to resolve entry points
context: __dirname,
// the main entry point for our application's frontend JS
entry: './app/main.js',
output: {
filename: 'main.js'
},
resolve: {
extensions: ['', '.js', '.jsx', '.ts']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony' }
]
}
};
Use Babel via babel-loader to transform import declarations (and other ES2015 if you want). http://babeljs.io/docs/setup/#webpack
As #JMM answered, it seems you need babel-loader. in addition, I was still facing the same problem, and finally get resolved by editing webpack.config.js such like
module: {
loaders: [
- {test: /\.jsx?$/, loader: 'babel-loader'},
- {test: /\.jsx$/, loader: 'jsx-loader'}
+ {test: /\.jsx$/, loader: 'jsx-loader'},
+ {test: /\.jsx?$/, loader: 'babel-loader'}
]
},
or because jsx-loader looks no longer working with this config, it can be deleted.
I hope it would help

Categories