I'm having some trouble getting my bundle file to load in my html. Each time it returns 404. I have checked, and the Bundle is building fine.
package.json:
{
"name": "MyApp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"angular": "^1.5.8",
"angular-jwt": "^0.1.7",
"angular-resource": "^1.5.8",
"angular-ui-router": "^0.3.1",
"bcrypt": "^0.8.7",
"cookie-parser": "^1.4.3",
"cors": "^2.8.1",
"debug": "^2.2.0",
"express": "^4.14.0",
"gulp": "^3.9.1",
"json-loader": "^0.5.4",
"jsonwebtoken": "^7.1.9",
"main-bower-files": "^2.13.1",
"mongoose": "^4.6.3",
"morgan": "^1.7.0",
"node-schedule": "^1.2.0",
"nodemailer": "^2.6.4",
"request-promise": "^4.1.1",
"run-sequence": "^1.2.2",
"sass": "^0.5.0",
"satellizer": "^0.15.5"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-angular": "0.0.5",
"babel-core": "^6.18.0",
"babel-loader": "^6.2.5",
"babel-preset-angular": "^6.0.15",
"babel-preset-es2015": "^6.18.0",
"chai": "^3.5.0",
"chai-http": "^3.0.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.13",
"gulp-concat": "^2.6.0",
"gulp-filter": "^4.0.0",
"gulp-livereload": "^3.8.1",
"gulp-nodemon": "^2.2.1",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^2.0.0",
"mocha": "^3.1.2",
"node-sass": "^3.10.1",
"sass-loader": "^4.0.2",
"webpack": "^1.13.2",
"webpack-node-externals": "^1.5.4"
}
}
.babelrc:
{
"presets": [
'es2015', 'angular', 'stage-0'
]
}
webpack.config.js:
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'node',
externals: [nodeExternals()],
entry: './app.js',
output: {
path: __dirname + '/app',
filename: './bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: '/(node_modules)/',
loader: 'babel'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
}
index.html head:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/app.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-resource.min.js"></script>
<script src="//npmcdn.com/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="//cdn.jsdelivr.net/satellizer/0.13.1/satellizer.min.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="/js/app.js"></script>
<script src="bundle.js"></script>
Any help much appreciated.
Try changing output in the webpack config file:
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var here = require('path-here'); // <- Add path-here
module.exports = {
target: 'node',
externals: [nodeExternals()],
entry: './app.js',
output: {
path: here('dist'), // <- changed to this
filename: 'bundle.js' // <- changed to this
},
module: {
loaders: [
{
test: /\.js$/,
exclude: '/(node_modules)/',
loader: 'babel'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
}
Let me know if this helps.
Related
I am using webpack 5 now and using HMR for hot module replacements. But It shows in console that hmr working but that is not updating in HTML file.
My webpack.config.js file is:
const path = require('path');
module.exports = {
entry: {
bundle: './src/index.js'
},
output: {
path: path.resolve( __dirname, 'assets' ),
filename: '[name].js'
},
mode: 'development',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: [ 'babel-loader']
},
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true
}
}
}]
}
]
},
devServer : {
headers: {
'Access-Control-Allow-Origin': '*'
},
client: {
progress: true,
},
allowedHosts: 'all',
hot: true,
static: {
directory: path.join(__dirname, 'dist')
},
}
}
My package.json is
{
"name": "booking",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"#reduxjs/toolkit": "^1.6.1",
"#tailwindcss/forms": "^0.3.4",
"antd": "^4.16.13",
"axios": "^0.21.4",
"bootstrap-icons": "^1.5.0",
"date-fns": "^2.24.0",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-bootstrap-icons": "^1.5.0",
"react-dom": "^17.0.2",
"react-multi-date-picker": "^3.1.7",
"react-nice-dates": "^3.1.0",
"react-redux": "^7.2.5",
"react-smooth-list": "^1.0.2",
"redux": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"autoprefixer": "^10.3.4",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"cross-env": "^7.0.3",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"node-sass": "^6.0.1",
"postcss": "^8.3.6",
"sass": "^1.39.2",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"tailwindcss": "^2.2.15",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.7.4"
}
}
My main problem is its compiling in the console but not updating in htm file actually..I have mentioned if (module.hot) module.hot.accept() in my ./src/index.js file, but its not working yet.Anything I need to do more to get this working!
My ./dist/index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wp-booking-press-container"></div>
<script src="bundle.js"></script>
</body>
</html>
I tried to setup my own toolchain to build a React app. I'm using Webpack with Typescript React.
package.json
{
"name": "library2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint '**/*.{tsx,js,ts}'",
"lint:fix": "eslint --fix '**/*.{tsx,js,ts}'",
"start": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"pg": "^8.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.9.5"
},
"devDependencies": {
"#babel/cli": "^7.10.4",
"#babel/core": "^7.10.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/node": "^14.0.20",
"#types/react": "^16.9.41",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.1.0",
"#typescript-eslint/parser": "^3.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.21.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/App.tsx',
mode: 'development',
module: {
rules: [
{
test: /\.(|ts|tsx|js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
},
},
{ // rules for css
test: /\.(css|scss)$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
App.tsx
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
render(<Hello />, document.querySelector('#main'));
Hello.tsx
import React from 'react';
import './hello.scss';
export default class Hello extends React.Component {
vark: number;
test() {
this.vark = 1;
}
render() {
return (
<div className="hello">Hello!</div>
);
}
}
I get the following error when webpack builds (npm run start):
ERROR in ./src/Hello.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/JAAI/Desktop/Library2/src/Hello.tsx: Unexpected token (5:6)
3 |
4 | export default class Hello extends React.Component {
> 5 | vark: number;
| ^
6 |
7 | test() {
8 | this.vark = 1;
at Object._raise (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:757:17)
at Object.raiseWithData (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:750:17)
at Object.raise (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:744:17)
at Object.unexpected (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:8834:16)
at Object.parseClassMemberWithIsStatic (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12169:12)
at Object.parseClassMember (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12062:10)
at /Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12007:14
at Object.withTopicForbiddingContext (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11078:14)
at Object.parseClassBody (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11984:10)
at Object.parseClass (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11958:22)
# ./src/App.tsx 3:0-28 4:41-46
ℹ ｢wdm｣: Failed to compile.
At first I thought this was because the Webpack env and react presets didn't allow for class properties so I included the class properties plugin but the error persisted. Note that if I remove that line it builds successfully.
so i have been assigned to maintain a react website. i am facing some problem with running the project.. npm start takes approx 4-5mins and likewise every changes saved takes upto 2-3mins(which is toooooo long). I am unable to figure out where is the issue. Maybe in webpack configuration or something else. Code details are listed bellow:
webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-3']
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'// compiles Less to CSS
},
{
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
}
]
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}), new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
// compress: {
// warnings: false, // Suppress uglification warnings
// pure_getters: true,
// unsafe: true,
// unsafe_comps: true,
// screw_ie8: true,
// conditionals: true,
// unused: true,
// comparisons: true,
// sequences: true,
// dead_code: true,
// evaluate: true,
// if_return: true,
// join_vars: true
// },
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
// apiUrl: 'http://0.0.0.0:8102',
siteUrl: 'http://localhost:ls3003',
apiUrl: 'https://api.xyz.com',
// siteUrl: 'https://dashboard.mltrons.com',
})
}
}
Package.json:
"name": "react-redux-registration-login-example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/react-redux-registration-login-example.git"
},
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --port 3000 --disableHostCheck",
"build": "webpack"
},
"dependencies": {
"#amcharts/amcharts4": "^4.2.3",
"#data-ui/histogram": "0.0.75",
"#material-ui/core": "^3.9.0",
"#material-ui/icons": "^3.0.2",
"#projectstorm/react-diagrams": "^6.0.1-beta.5",
"chart.js": "^2.7.3",
"chartjs-plugin-zoom": "^0.6.6",
"classnames": "^2.2.6",
"css-loader": "^2.1.0",
"deni-react-treeview": "^0.2.15",
"events": "^3.0.0",
"formik": "^1.4.1",
"history": "^4.6.3",
"jquery": "^3.3.1",
"material-ui-popup-state": "^1.0.2",
"moment": "^2.23.0",
"pusher-js": "^4.3.1",
"rc-steps": "^3.3.1",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-chartjs-2": "^2.7.4",
"react-circular-progressbar": "^1.0.0",
"react-craft-ai-decision-tree": "0.0.26",
"react-datetime-picker": "^2.1.1",
"react-dom": "^16.0.0",
"react-dropzone": "^8.0.3",
"react-facebook-login": "^4.1.1",
"react-ga": "^2.5.7",
"react-google-login": "^4.0.1",
"react-heatmap-grid": "^0.7.3",
"react-highlight": "^0.12.0",
"react-joyride": "^2.0.5",
"react-linkedin-login-oauth2": "^1.0.6",
"react-paginate": "^6.2.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"react-table": "^6.8.6",
"recharts": "^1.8.5",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"style-loader": "^0.23.1",
"web-wechat-login": "^1.0.9",
"yup": "^0.26.6"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.24.1",
"copy-webpack-plugin": "^4.6.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^2.26.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"path": "^0.12.7",
"url-loader": "^1.1.2",
"webpack": "3.6.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "2.11.3"
}
}
src/index.html:
<html lang="en">
<head>
<base href="/" />
<meta charset="UTF-8">
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
>
<title>dashboard</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!--<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<style>
a { cursor: pointer; text-decoration: none }
.help-block { font-size: 12px; }
body{
margin: 0;
/*background-color: #f5f5f5;*/
background-color: #232122;
}
</style>
<!-- Hotjar Tracking Code for https://www.dashboard.mltrons.com -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:1317845,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go.js"></script>-->
<script src="assets/js/go.js"></script>
<script src="assets/js/extension.js"></script>
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
</body>
</html>
src/index.jsx:
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import { App } from './App';
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
If u need anything else please let me know.thanks
You should add all of webpack.optimize plugins only in production. Turn it off in development and it will take a little less time.
if (PRODUCTION) {
config.plugins.push(
...your optimize plugins here
);
}
I have been through many threads to solve this issue but unfortunately non of them is working.
I am trying to import react-share like this
import {
FacebookShareButton,
GooglePlusShareButton,
TwitterShareButton,
WhatsappShareButton,
FacebookIcon,
TwitterIcon,
WhatsappIcon
} from 'react-share';
"use strict";
require('./../../../assets/styles/components/thread.less');
//var reactShare = require('react-share');
var React = require('react');
var ReactDOM = require('react-dom');
var Fluxxor = require('fluxxor');
var _ = require("lodash");
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
But i am receiving the error of
syntaxerro: import declarations may only appear at top level of a module
I have installed babel and have performed all the suggestions given in threads but not been able to solve the issue
For the reference my webpack.config.js file looks like this:
var path = require("path");
var webpack = require("webpack");
module.exports = {
cache: true,
devtool: 'hidden-source-map',
entry: {
microaudio: "./reactFrontend/js/main",
notsupported: "./reactFrontend/js/notsupported",
sharerender: "./reactFrontend/js/shareRender",
privacyDeclaration: "./reactFrontend/js/privacyDeclaration",
legal: "./reactFrontend/js/legal"
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "frontend/",
filename: "[name].js",
chunkFilename: "[chunkhash].js"
},
node: {
fs: "empty"
},
module: {
loaders: [{
test: /\.jsx$/,
loader: "jsx-loader?insertPragma=React.DOM&harmony"
}, {
test: /\.json/,
loader: "json-loader"
}, {
test: /\.less/,
loader: "style-loader!css-loader!autoprefixer-loader?{browsers:['last 3 versions', 'Android >= 4', 'safari >= 4']}!less-loader"
}, {
test: /\.tpl/,
loader: "ejs-loader"
}, {
test: /\.woff(\?\S*)?$/,
loader: "url-loader?prefix=/font&limit=1000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?\S*)?$/,
loader: "url-loader?prefix=/font&limit=1000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?\S*)?$/,
loader: "file-loader?prefix=/font"
}, {
test: /\.eot(\?\S*)?$/,
loader: "file-loader?prefix=/font"
}, {
test: /\.svg(\?\S*)?$/,
loader: "url-loader?limit=1000000&mimetype=image/svg+xml"
}, {
test: /\.png$/,
loader: "url-loader?limit=10000&mimetype=image/png"
}, {
test: /\.gif$/,
loader: "url-loader?limit=10000&mimetype=image/gif"
}, {
test: /\.jpg$/,
loader: "url-loader?limit=10000&mimetype=image/jpeg"
}]
},
plugins: [
//setup momentjs context to only include languages we do need!
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
],
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
alias: {
av: __dirname + "/reactFrontend/js/vendors/aurora/aurora",
"ogg.js": __dirname + "/reactFrontend/js/vendors/aurora/ogg",
"vorbis.js": __dirname + "/reactFrontend/js/vendors/aurora/vorbis"
}
},
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
};
and my package.json file looks like this
{
"name": "audiyoh-frontend",
"version": "1.0.0",
"main": "./src/js/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"test-martin-local": "SET NODE_ENV=development&& SET NODE_APP_INSTANCE=martin&& gulp test-bs",
"test-robert-local": "SET NODE_ENV=development&& SET NODE_APP_INSTANCE=robert&& gulp test-bs",
"wds": "webpack-dev-server --https --inline --hot --color --history-api-fallback"
},
"author": "atroo GbR",
"contributors": [
{
"name": "Martin Foerster",
"email": "martin#atroo.de"
},
{
"name": "Robert Krüger",
"email": "robert#atroo.de"
}
],
"license": "UNLICENSED",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"blanket": "^1.1.6",
"bootstrap-webpack": "0.0.3",
"chai": "^3.3.0",
"coveralls": "^2.11.2",
"css-loader": "^0.7.0",
"ejs-loader": "^0.1.0",
"file-loader": "^0.8.1",
"glob": "^4.3.5",
"gulp": "^3.8.6",
"gulp-debug": "^2.1.2",
"gulp-mocha": "^2.0.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-rimraf": "^0.2.0",
"gulp-spawn-mocha": "^2.0.1",
"gulp-util": "^3.0.0",
"i18next-resource-store-loader": "0.0.2",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.1",
"jsx-loader": "^0.12.2",
"less": "^2.2.0",
"less-loader": "^2.0.0",
"mocha": "^2.1.0",
"mocha-lcov-reporter": "^0.0.1",
"node-notifier": "^4.4.0",
"run-sequence": "^1.1.5",
"selenium-webdriver": "^2.47.0",
"sha1": "^1.1.1",
"socket.io": "^1.3.7",
"style-loader": "^0.8.3",
"url-loader": "^0.5.5",
"wasm-loader": "1.1.0",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^4.1.4",
"webpack-stream": "^3.0.1",
"worker-loader": "^0.5.7",
"yargs": "^3.26.0"
},
"dependencies": {
"autoprefixer-loader": "^3.2.0",
"av": "^0.4.9",
"backbone": "^1.1.2",
"backbone.wreqr": "^1.3.1",
"bootstrap": "^3.3.2",
"color": "^0.11.3",
"crypto-js": "^3.1.2-5",
"exports-loader": "^0.6.3",
"flux": "^2.0.0",
"fluxxor": "^1.7.3",
"get-user-media-promise": "^1.1.1",
"i18next-client": "^1.7.7",
"jquery": "^2.1.1",
"keymirror": "~0.1.0",
"less-to-json-loader": "^1.0.0",
"lodash": "^3.8.0",
"modernizr": "^3.3.1",
"modernizr-loader": "0.0.4",
"moment": "^2.9.0",
"node-uuid": "^1.4.2",
"normalize.css": "^3.0.2",
"object-assign": "^1.0.0",
"ogg.js": "^0.1.0",
"promise": "^6.1.0",
"react": "^0.14.5",
"react-bootstrap": "^0.21.2",
"react-dom": "^0.14.5",
"react-router": "^2.3.0",
"react-tools": "^0.12.2",
"scriptjs": "^2.5.8",
"socket.io-client": "^1.4.5",
"tunajs": "^0.4.5",
"velocity-animate": "^1.2.1",
"vorbis.js": "^0.1.1",
"web-audio-daw": "^2.3.1"
}
}
i created a .babelrc file as well (manually in the root where webpack.config.js is)
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"],
}
I am new in ReactJs so i am not having a good grasp on the requirements of such. Please help! Thanks
jsx-loader has been deprecated for at least 3 years.
You'll want to actually use babel-loader for JSX files if you need imports and other ES6 syntax implemented in the last three years to work.
I have no problem whatsoever working on the dev env, hot reloading and everything works fine. Trying to make a production build its proving to be quite challenging, getting nothing but a blank page. There seems to be similar questions on here but I'm not using any html as an entry point. Thanks in advance.
package.json
{
"name": "dc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0",
"prod": "webpack -p --progress --config prod.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.9.1",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-css-transition-replace": "^1.1.0",
"react-dom": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.14"
},
"dependencies": {
"axios": "^0.9.1",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"react": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1"
}
}
production config
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : ["./app/App.js"],
output : {
filename: "bundle.js",
publicPath: 'dist/',
path : path.resolve(__dirname, 'dist/')
},
devtool: 'source-map',
devServer: {
contentBase: 'dist/'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin("styles.css"),
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
},
}),
],
module : {
loaders : [
{ test : /\.jsx?$/, loader : 'babel-loader',
query : {
presets : ['react', 'es2015', 'react-hmre']
}
},
{ test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"},
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
{ test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
I have been working with a bit different solution. What I have been doing is bundling the files through webpack then use a koa server to serve a static file and then have a npm start script which sets NODE_ENV to production. Take a look:
package.json:
{
"name": "react",
"version": "1.0.0",
"description": "some description",
"main": "index.js",
"scripts": {
"test": "test",
"start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js",
"dev": "webpack-dev-server --progress --colors --watch",
"build": "webpack --progress --watch"
},
"author": "your_name",
"license": "ISC",
"dependencies":{
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"copy-webpack-plugin": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"image-webpack-loader": "^1.6.3",
"json-loader": "^0.5.4",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"koa": "2.0.0-alpha.3",
"koa-convert": "1.2.0",
"koa-static": "2.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
server.js:
'use strict';
const port = process.env.PORT || 3000;
const Koa = require('koa');
const serve = require('koa-static');
const convert = require('koa-convert');
const app = new Koa();
const _use = app.use;
app.use = (x) => _use.call(app, convert(x));
app.use(serve('./build'));
const server = app.listen(port, function () {
let host = server.address().address;
let port = server.address().port;
console.log('listening at http://%s:%s', host, port);
});
and finaly webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './main.js',
output: { path: __dirname + "/build/", filename: 'bundle.js' },
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass?")
},
{
test: /\.json$/,
loader: "json"
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
new ExtractTextPlugin("main.css"),
new CopyWebpackPlugin([
{
from: __dirname + '/index.html',
to: __dirname + '/index.html'
},
])
]
};
If you will run those with an index.html file and an main.js file rendering some react to it it will run on production :) I recently wrote an article about how exactly my solution looks like. Feel free to take a look: https://medium.com/#TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6