So for my first ReactJS tutorial I was using a Ubuntu VM, and remember running into this problem because I forgot to install react and react-dom dependencies. I am now on windows, have made sure to install everything and I am getting the same error:
For my package.json I have this:
{
"name": "github-battle",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.20.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"scripts": {
"create": "webpack"
},
"author": "",
"license": "ISC"
}
For my webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
};
index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./index.css');
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Is there something I have to do differently in windows?
I tried to create a new project with all the file you pasted and I got the same error. I resolved it by running those 2 commands:
npm install --save react
npm install --save react-dom
I also added a .babelrc file containing this:
{
"presets": ["react"]
}
Related
I have this app where I have added react, babel and webpack.
Repo in github: https://github.com/GiorgioMartini/holli
Its seems to work ok, buti get this error:
WARNING in ./src/scripts/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
/Users/giorgio/Documents/frontend-assessment-test/src/scripts/index.js
7:7 error Parsing error: Unexpected token <
✖ 1 problem (1 error, 0 warnings)
that line 7:7 is this one where the div starts after the reurn:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div>
Hella
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
So im guessing its some babel misconfiguration or something.
This is my babel config file:
const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: Path.resolve(__dirname, '../src/scripts/index.js')
},
output: {
path: Path.join(__dirname, '../build'),
filename: 'js/[name].js'
},
optimization: {
splitChunks: {
chunks: 'all',
name: false
}
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin([
{ from: Path.resolve(__dirname, '../public'), to: 'public' }
]),
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, '../src/index.html')
})
],
resolve: {
alias: {
'~': Path.resolve(__dirname, '../src')
}
},
module: {
rules: [
{ test: /\.(js)$/, use: ['babel-loader', 'eslint-loader'], exclude: /node_modules/},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} ]
}
};
And this is the package.json:
"name": "frontend-assessment-test",
"version": "1.0.0",
"description": "A frontend assessment test for our new pirates, which are willing to come on board.",
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors",
"start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/holidaypirates/frontend-assessment-test"
},
"author": "HolidayPirates",
"license": "MIT",
"bugs": {
"url": "https://github.com/holidaypirates/frontend-assessment-test/issues"
},
"devDependencies": {
"#babel/core": "^7.7.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.7.4",
"#babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"eslint": "^6.7.1",
"eslint-loader": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^4.0.0-beta.11",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"core-js": "^3.3.3",
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
Any ideas where could be the issue and how to fix it?
here is the repo: https://github.com/GiorgioMartini/holli
I found the answer,
that is just a eslint error, so the app works fine is just eslint complaining.
I had to add this to the eslintrc file and now its fixed:
"extends": [
"plugin:react/recommended"
]
I've been following Petr Tichy (#ihatetomatoes) Webpack 2 tutorial series, and have got to the this vid which covers installing React and Babel.
I've gone over the code with a fine tooth comb and spent a couple of hours googling but I just cannot get my code to perform in the expected way. The React method in my app.js file does not execute.
It should render "Hello World" into the root element of the index page, but I get nothing.
This is what I have...
./src/app.js
const css = require("./styles.scss");
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
./src/index.html
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js
const HTMLWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract( {
fallback: 'style-loader',
use: ['css-loader','sass-loader']
} )
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: "IWTE",
template: './src/index.html',
minify: {
collapseWhitespace: true,
},
hash: true
}),
new ExtractTextPlugin("styles.css")
],
devServer: {
contentBase: "./dist",
compress: true,
hot: true,
open: true
},
}
.babelrc
{
"presets": ["es2015","react"]
}
package.json
{
"name": "creator",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "MIT",
"private": true,
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"prod": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
Any advice or suggestions on what route to follow to debug this is greatly appreciated! I'm a relative noob to frontend dev. Thanks!
Inside of your package.json make a change as :
"scripts": {
"dev": "webpack-dev-server --hot --progress --colors",
"prod": "webpack -p"
}
You need to add --hot inside of your dev commmand to enable hot reloading.
Let me know if it doesn't work. Cheers!
I am developing a web app in React using Webpack. I have followed this guide to generate bundle.js in production mode, but it is not working. I always get:
Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster.
This is my webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//FOR CSS
var config = {
devtool:'cheap-module-source-map',
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css', {allChunks: false}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: true
}
})
]
};
module.exports = config;
And this is the package.json file I am using:
{
"name": "p12uibetajsx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack -d",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.18.2",
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1",
"webpack-combine-loaders": "^2.0.3"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-responsive-carousel": "^3.0.21",
"webpack": "^1.13.3",
"webpack-combine-loaders": "^2.0.3"
}
}
Is there anything else I need to configure? Am I missing something?
Thank you very much.
I would like to have a circular progress bar in my react.js project. Following kimmobrunfeldt's react-progressbar.js installation notes, I managed to include said library in my project. However, for some reason unknown to me, the actual progress bar does not render. The DOM inspector indicates that the progress bar's wrapper is there, but not its content. No errors show up when building with npm.
Here is my react.js project setup:
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
module.exports = {
entry: [ APP_DIR + '/index.jsx'],
output: { path: BUILD_DIR, filename: 'bundle.js'},
module: {
loaders: [
{ test: /\.jsx?/, include : APP_DIR, loader: 'babel'},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
}
package.json
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"es2015",
"react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack -d --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"json-loader": "^0.5.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-progressbar.js": "^0.2.0",
"webpack": "^1.13.3"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"react": "^0.14.8",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-loader-modules": "^1.1.0"
}
}
index.jsx
import React from 'react';
import {render} from 'react-dom';
import progressBar from 'react-progressbar.js';
// ...
// ...
var Circle = progressBar.Circle;
class App extends React.Component {
render () {
return (
<div>
<p> Hello React!</p>
<Circle
progress={1}
text={'test'}
initialAnimate= {true}
containerClassName= {'progressbar-container'}
/>
</div>
);
}
}
// ...
render(<App/>, document.getElementById('app'));
According to the documentation, containerClassName should start with .
<Circle
progress={this.state.progress}
text={'test'}
options={options}
initialAnimate={true}
containerStyle={containerStyle}
containerClassName={'.progressbar'}
/>
Source: https://github.com/kimmobrunfeldt/react-progressbar.js/tree/master
Besides that, I have no clue...
I am currently bashing my head over this. I have a little react component I made here https://github.com/brettjthom/react-basic-table that uses webpack to bundle it. It works with the self contained example but as soon as I try to import it into another project like here https://github.com/brettjthom/react-basic-table-test, it fails with the error
Cannot call a class as a function
Any ideas on where I went wrong?
Webpack for the main component.
var webpack = require('webpack');
// Options for Builds
var buildVar = process.argv.indexOf('-var') > -1;
var minify = process.argv.indexOf('-p') > -1;
// Different build types
var outputName = 'lib/react-basic-table';
outputName = outputName + (buildVar ? '-var' : '');
outputName = outputName + (minify ? '.min.js' : '.js');
var plugins = [
new webpack.optimize.DedupePlugin()
]
if (minify) plugins.push(new webpack.optimize.UglifyJsPlugin());
module.exports = {
entry: './src/index.jsx',
module: {
preLoaders: [
{ test: /\.jsx?$/, include: /src/, loaders: ['eslint?{fix:true}']}
],
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: {
presets: ['react', 'es2015'],
plugins: ["add-module-exports", "transform-es2015-modules-umd"]
} }
]
},
externals: [{
"react": {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react"
}
}],
output: {
filename: outputName,
libraryTarget: buildVar ? 'var' : 'umd',
library: 'ReactBasicTable'
},
plugins: plugins,
eslint: {
failOnWarning: false,
failOnError: true,
configFile: './.eslintrc.js'
},
resolve: {
extensions: ['', '.jsx', '.js']
}
};
package.json for main component
{
"name": "react-basic-table",
"version": "1.0.3",
"description": "",
"main": "./lib/react-basic-table.js",
"dependencies": {
"react": "^0.13.3",
"classnames": "^2.1.5",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel": "^5.8.23",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-es2015-modules-umd": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"bootstrap": "^3.3.7",
"eslint": "~2.11.1",
"eslint-config-airbnb": "~9.0.1",
"eslint-import-resolver-webpack": "~0.4.0",
"eslint-loader": "~1.3.0",
"eslint-plugin-import": "~1.12.0",
"eslint-plugin-jsx-a11y": "~1.3.0",
"eslint-plugin-react": "~5.1.1",
"webpack": "^1.12.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-all": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d && node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
"build": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d",
"watch": "node ./node_modules/webpack/bin/webpack.js --watch",
"build-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
"watch-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js --watch",
"lint": "eslint --fix ./src/**"
},
"author": "Brett Thom",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/brettjthom/react-basic-table.git"
}
}
Webpack for the example
var webpack = require('webpack');
var config = {
entry: './index.jsx',
output: {filename: 'bundle.js'},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loaders: [
'babel-loader?presets[]=react,presets[]=es2015',
]
}]
},
plugins: []
}
module.exports = config;
package.json for example
{
"name": "test-table",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"build": "node ./node_modules/webpack/bin/webpack.js"
},
"devDependencies": {
"webpack": "~1.13.1",
"babel-loader": "~6.2.4",
"babel-preset-react": "~6.5.0",
"babel-preset-es2015": "~6.9.0",
"babel-core": "~6.9.1"
},
"dependencies": {
"react": "~15.1.0",
"react-dom": "~15.1.0",
"react-basic-table": "^1.0.4"
},
"author": "",
"license": "ISC"
}
Thanks
Updated
In https://github.com/brettjthom/react-basic-table/blob/master/package.json line 7
"react": "~15.1.0", // from "^0.13.3"
Re-build library. Then it works.
React 0.14+ have some drastic change in api.
I had a similar problem where I wanted to import React components into a non-React application.
What I did is to have webpack bundle the React component as a library. In that case the output section of the webpack config could look like this:
output: {
path: './assets/javascripts/build/',
filename: 'MyTableComponent.js',
libraryTarget: 'umd',
library: 'MyTableComponent',
umNamedDefine: true
}
The entry point for the components contains the class for the main React component, and an init() method that uses ReactDom to mount the component into a DOM node. So for example, for an imaginary Table component, the entry point for that webpack config could contain something like this:
import React from 'react'
import ReactDOM from 'react-dom'
class MyTableComponent extends React.Component {
render() { }
}
// Now the method that will mount this component
function init(container, props) {
let component = (
<EmbeddedViewer props={props} />
)
ReactDOM.render(component, container)
}
// Just export the init() method
export { init }
Finally, whenever you want to use the component, call the init method. In this example I'm using it inside a tag:
<script type="text/javascript" src="{{ base_url('assets/javascripts/build/MyTableComponent.js') }}"></script>
<script >
document.addEventListener('DOMContentLoaded', ready, false);
function ready() {
var container = document.getElementById('container')
MyTableComponent.init(container, {})
}
</script>
More info on the webpack output configuration can be found here.
Good luck!