Related
I have a react app with webpack recently upgraded to version 5.
I am getting the following error and need help in fixing it
Uncaught (in promise) TypeError: crypto.createSign is not a function
at Object.sign (index.js:151)
at Object.jwsSign [as sign] (sign-stream.js:32)
at GoogleToken.requestToken (index.js:225)
at GoogleToken.getTokenAsyncInner (index.js:163)
at GoogleToken.getTokenAsync (index.js:142)
at GoogleToken.getToken (index.js:94)
at JWT.refreshTokenNoCache (jwtclient.js:158)
at JWT.refreshToken (oauth2client.js:143)
at JWT.authorizeAsync (jwtclient.js:139)
at JWT.authorize (jwtclient.js:135)
when the following code is executed (The credentials are correct)
const { GoogleSpreadsheet } = require("google-spreadsheet");
.
.
.
let submitOrderDetails = async () => {
const SPREADSHEET_ID = "working-id-here";
const doc = new GoogleSpreadsheet(SPREADSHEET_ID);
// this fails
await doc.useServiceAccountAuth({
client_email: creds.client_email,
private_key: creds.private_key,
});
.
.
.
}
webpack.config.json
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
path: path.join(__dirname, "build"),
filename: "main.js",
publicPath: "/",
},
target: "web",
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader", //1. Turns sass into css
],
},
{
test: /\.(png|jp?g|svg|gif)?$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "index.html",
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
],
resolve: {
fallback: {
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
"crypto-browserify": require.resolve("crypto-browserify"),
os: require.resolve("os-browserify/browser"),
child_process: false,
},
},
};
package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"fs": "0.0.1-security",
"google-spreadsheet": "^3.2.0",
"googleapis": "^67.0.0",
"http": "0.0.1-security",
"https-browserify": "^1.0.0",
"net": "^1.0.2",
"os": "^0.1.2",
"path": "^0.12.7",
"prettier": "^2.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"stream": "0.0.2",
"tls": "0.0.1",
"zlib": "^1.0.5"
},
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"pretty": "prettier --write \"./**/*.*\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/plugin-proposal-class-properties": "^7.16.5",
"#babel/plugin-transform-runtime": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"node-sass": "^6.0.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"process": "^0.11.10",
"sass-loader": "^12.4.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.3.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.11.3",
"webpack-merge": "^5.8.0"
}
}
Answering my own question. I updated the webpack config by adding fallbacks.
Here are the updated webpack.config.json and package.json
webpack.config.json
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
path: path.join(__dirname, "build"),
filename: "main.js",
publicPath: "/",
},
target: "web",
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader", //1. Turns sass into css
],
},
{
test: /\.(png|jp?g|svg|gif)?$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "index.html",
}),
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
],
resolve: {
fallback: {
fs: false,
tls: "empty",
child_process: false,
util: require.resolve("util/"),
buffer: require.resolve("buffer"),
assert: require.resolve("assert/"),
http: require.resolve("stream-http"),
path: require.resolve("path-browserify"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
"crypto-browserify": require.resolve("crypto-browserify"),
},
},
};
package.json
{
"name": "sigmaprints",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"pretty": "prettier --write \"./**/*.*\""
},
"devDependencies": {
"#babel/core": "^7.12.1",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.2.1",
"cross-env": "^7.0.2",
"css-loader": "^5.0.0",
"file-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^1.1.5",
"process": "0.11.10",
"html-webpack-plugin": "^4.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"prettier": "^2.1.2",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.1.2",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.2.0"
},
"browser": {
"crypto": false
},
"dependencies": {
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"google-spreadsheet": "^3.1.15",
"http-browserify": "^1.7.0",
"https-browserify": "^1.0.0",
"net": "^1.0.2",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router-dom": "^5.2.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"tls": "0.0.1",
"util": "^0.12.4"
}
}
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'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.
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