Heroku Deploys Completely Different App - node.js

When I deploy it to heroku it shows a completely different site
than what it shows when I run 'npm run start'.
Why is this happening?
I am running React + Webpack + Express. The site it shows is the site I used as my starter package so I am guessing there is a line of code baked into the site that misdirects Heroku. I just cannot find it. This is my repo: https://github.com/adamskriger/calendar/
This is my webpack.config.js.
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('./package.json');
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: {
app: PATHS.app
},
// Add resolve.extensions
// '' is needed to allow imports without an extension
// note the .'s before the extension as it will fail to load without them
resolve: {
extensions: ['', '.js', '.jsx', '.json']
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
// Test expects a RegExp! Notethe slashes!
test: /\.css$/,
loaders: ['style', 'css'],
//Include accepts either a path or an array of paths
include: PATHS.app
},
//set up JSX. This accepts js too thanks to RegExp
{
test: /\.(js|jsx)$/,
//enable caching for improved performance during development
//It uses default OS directory by default. If you need something more custom,
//pass a path to it. ie: babel?cacheDirectory=<path>
loaders: [
'babel?cacheDirectory,presets[]=es2015'
],
//parse only app files Without this it will go thru the entire project.
//beside being slow this will likely result in an error
include: PATHS.app
}
]
}
};
// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET){
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
//enable history API fallback so HTML5 HISTORY API based
// routing works. This is a good default that will come in handy in more
// complicated setups.
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
//display only errors to reduce output amount
stats: 'errors only',
//Parse host and port from env so this is easy to customize
host: process.env.HOST,
port: process.env.PORT
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true //--save
})
]
});
}
if(TARGET === 'build' || TARGET === 'stats') {
module.exports = merge(common, {
entry: {
vendor: Object.keys(pkg.dependencies).filter(function(v) {
return v !== 'alt-utils';
}),
style: PATHS.style
},
output: {
path: PATHS.build,
// Output using entry name
filename: '[name].[chunkhash].js',
chunkFilename: '[chunkhash].js'
},
module: {
loaders: [
// Extract CSS during build
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
include: PATHS.app
}
]
},
plugins: [
new CleanPlugin([PATHS.build]),
// Output extracted CSS to a file
new ExtractTextPlugin('[name].[chunkhash].css'),
// Extract vendor and manifest files
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
// Setting DefinePlugin affects React library size!
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
});
}
This is my package.json:
{
"name": "Portfolio",
"version": "1.0.0",
"description": "Portfolio Site",
"main": "server.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "Adam Kriger",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.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",
"npm-install-webpack-plugin": "^3.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.12.0"
},
"dependencies": {
"alt": "^0.18.4",
"alt-container": "^1.0.2",
"alt-utils": "^1.0.0",
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-survivejs-kanban": "^0.3.3",
"body-parser": "^1.15.0",
"bootstrap": "^3.3.6",
"classnames": "^2.2.5",
"clean-webpack-plugin": "^0.1.9",
"components": "^0.1.0",
"css-loader": "^0.23.1",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^1.0.1",
"firebase": "^2.4.2",
"html-webpack-plugin": "^2.16.0",
"json-loader": "^0.5.4",
"moment": "^2.13.0",
"morgan": "^1.7.0",
"node-uuid": "^1.4.7",
"npm-install-webpack-plugin": "^3.0.0",
"react": "^15.0.1",
"react-dom": "^15.0.2",
"react-router": "^2.4.0",
"reactfire": "^0.7.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.12.0"
}
}

When you deploy on heroku, it looks for your compiled build because it's node environment is set to "production". It is most likely that you still have your older version build inside your where you decided you wanted webpack to send it. In your case its where this is:
build: path.join(__dirname, 'build')
So that's where your old website is at. I would delete everything in here and do another compile. Then commit and push to heroku again.

Related

Public folder not compiling with react/webpack

Not sure where I'm going wrong, or if I have a dev dependency missing. But basically, I am setting up a react app from scratch, where I want my assets (images and SCSS), index.html ** and **app.js ,to be served in a "public" folder.
Folder structure should be something like this:
ReactApplication:
- config
- controllers
- lib
- models
- node_modules
- public
- src:
- assets:
- images
- scss
- components
- app.js
- index.html
- test
.bablerc
index.js
nodemon.json
package.json
webpack.config.js
I have setup my webpack file, index.json and everything else listed above. However, NO assets/app.js are being compiled in the public folder.
I have no idea why not. My app works 100% fine and running on node/in the browser. I get no errors, but I'm expecting files to appear/be compiled in the public folder.
What am I missing?
I've copy and pasted this project from an existing one. So could it be I need to reinstall a dependency?
Here's my webpack file:
const path = require('path');
console.log('path', path);
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpack = new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
inject: 'body'
});
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CopyWebpack = new CopyWebpackPlugin([
{ from: './src/assets', to: 'assets' }
]);
const HotModuleReplcement = new webpack.HotModuleReplacementPlugin();
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve('public'),
filename: 'app.js',
publicPath: '/'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: ['style-loader', 'css-loader'] },
{ test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
{ test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
{ test: /\.jpe?g(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/jpeg' },
{ test: /\.gif(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
{ test: /\.png(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/png' }
]
},
devServer: {
contentBase: ['src'],
watchContentBase: true,
historyApiFallback: true,
hot: true,
inline: true,
port: 8000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:4000',
secure: false
}
}
},
plugins: [HotModuleReplcement, HtmlWebpack, CopyWebpack]
};
Here's my index.js:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
// mongoose.plugin(require('mongoose-unique-validator'));
mongoose.Promise = require('bluebird');
const router = require('./config/router');
const errorHandler = require('./lib/errorHandler');
const { dbURI, port } = require('./config/environment');
const app = express();
app.use(express.static(`${__dirname}/public`));
mongoose.connect(dbURI);
app.use(bodyParser.json());
app.use('/api', router);
app.get('/*', (req, res) => res.sendFile(`${__dirname}/public/index.html`));
app.use(errorHandler);
app.listen(port, () => console.log(`Aye aye captain, pulling into port ${port}`));
module.exports = app;
package.json:
{
"name": "react-webpack-setup",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start:client": "webpack-dev-server",
"start:server": "nodemon",
"test:server": "nyc mocha \"test/server/**/*_spec.js\" --require \"test/server/spec_helper\" --recursive --exit",
"test:client": "mocha --require ignore-styles test/client/helper \"test/client/**/*_test.js\" --recursive --exit",
"build": "webpack -p",
"start": "yarn build && node index"
},
"author": "Students",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"chai": "^4.1.2",
"copy-webpack-plugin": "^4.4.1",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"file-loader": "^1.1.8",
"html-webpack-plugin": "^2.30.1",
"ignore-styles": "^5.0.1",
"jsdom": "^11.7.0",
"mocha": "^5.0.5",
"node-sass": "^4.7.2",
"nyc": "^11.6.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"supertest": "^3.0.0",
"url-loader": "^0.6.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"animate.css": "^3.6.1",
"axios": "^0.18.0",
"bcrypt": "^1.0.3",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"bulma": "^0.6.2",
"filestack-js": "^0.11.2",
"filestack-react": "^1.3.9",
"jsonwebtoken": "^8.2.1",
"loadash": "^1.0.0",
"method-override": "^2.3.10",
"moment": "^2.22.0",
"moment-timezone": "^0.5.14",
"mongoose": "^5.0.13",
"promises": "^0.2.5",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-messages": "^1.3.2",
"react-moment": "^0.7.0",
"react-router-dom": "^4.2.2",
"react-timestamp": "^4.4.0",
"request-promise": "^4.2.2"
}
}

How to build (Webpack) the Node Js project using PUG Engine?

I am stuck to build the node js project using webpack and I am using pug engine for front end.
My Project Structure:
bin
controller
- csv.controller.js
public
- stylesheets
- javascript
- images
routes
- csv.route.js
- index.route.js
views
- layouts
-- layout.pug
-index.pug
app.js
Package.json File
{
"name": "csv",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"start":"nodemon ./app.js",
"start:dev": "webpack-dev-server --mode=development"
},
"dependencies": {
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"cookie-parser": "~1.4.4",
"csv-parser": "^2.3.1",
"csv-writer": "^1.5.0",
"debug": "~2.6.9",
"express": "^4.17.1",
"express-fileupload": "^1.1.6-alpha.5",
"fast-csv": "^3.4.0",
"http-errors": "~1.6.3",
"morgan": "^1.9.1",
"multer": "^1.4.2",
"npm-check-updates": "^3.1.23",
"request": "^2.88.0"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1",
"webpack-merge": "^4.2.2"
}
}
Actually what I want, after build, A dist folder contain a build.js or whatever its name and all public folder assets in the same directory. I tried with some below codes to build the project.
Webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = {
entry: {
app: "./app.js"
},
target: "node",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js"
},
devServer: {
port: 3000
},
plugins: [
new HtmlWebpackPlugin({
template: "./views/index.pug"
})
],
module: {
rules: [
{
test: /\.pug$/,
use: ["pug-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: [/.js$/],
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
}
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
}
if (argv.mode === "production") {
}
return config;
};
I know this question is old, but just in case somebody is looking for an answer.
You need another Webpack config for app.js, which is express entry point.
Call it webpack.server.js or webpack.server.config.js or whatever convenient. Make sure to include webpack-node-externals:
https://www.npmjs.com/package/webpack-node-externals
It may look something like this:
//webpack.server.js
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
return ({
entry: {
app: ./src/server/app.js,
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js',
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
});
};
Also use webpack-dev-middleware in your app.js.
See the below link:
https://webpack.js.org/guides/development/
In package.json include a script that looks something like this:
"server:dev": "webpack --config webpack.config.js && webpack --mode development --config webpack.server.js && node ./dist/app.js",
In your webpack.config.js make the entry point the js file that imports your front-end assets..
That is your stylesheets and any other js codes..
Not sure what css framework you are using.
But, I am using tailwindcss and I have a js entry point file that imports tailwindcss and my other js codes.
So essentially you may need two webpack config files one for the front-end and one for the express server.
Hope I am making sense.

Why vue-loader & webpack-4 is not working?

I'm trying to run my own webpack-4 + vue app. with this package.json. I hope if I achieve this I can integrate it with an existing ASP.Net-Core app
{
"name": "client-app",
"version": "1.0.0",
"description": "Proyecto con WebPack 4 y Vue 2",
"main": "index.js",
"scripts": {
"dev": "webpack --config webpack.config.vendor.js --mode development",
"prod": "webpack --mode production"
},
"keywords": [
"webpack-4",
"vue-2",
"vuetify"
],
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.5",
"awesome-typescript-loader": "^5.2.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"base64-font-loader": "0.0.4",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"i": "^0.3.6",
"material-design-icons-iconfont": "^3.0.3",
"mini-css-extract-plugin": "^0.4.2",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"typescript": "^2.7.2",
"url-loader": "^1.1.1",
"vue-loader": "^15.4.1",
"vue-class-component": "^6.2.0",
"vue-style-loader": "^4.1.2",
"style-loader": "^0.23.0",
"vue-template-compiler": "^2.5.17",
"webpack-md5-hash": "0.0.6",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7",
"webpack-hot-middleware": "^2.23.1"
},
"dependencies": {
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuetify": "^1.2.3",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = 'dist';
const { VueLoaderPlugin } = require('vue-loader')
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.js'] },
entry: { 'main': './src/index.js' },
module: {
rules: [
{ test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true', loader: "unicode-loader" } } },
// { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg|woff2|woff)$/, include: /ClientApp/, use: 'url-loader?limit=25000' }
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new VueLoaderPlugin(),
// new CheckerPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: (isDevBuild ? 'development' : 'production')
}
})/* ,
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendor-manifest.json')
}) */
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
App.vue
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
I'm getting the following error:
ERROR in ./src/components/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
| <div class="example">{{ msg }}</div>
| </template>
# ./src/index.js 2:0-47 11:18-30
Running this command node_modules\.bin\webpack --config webpack.config.js --mode development it should be able to work but it doesn't.
These are specifications:
node: v8.11.2
webpack 4.17.2
vuejs 2.5.17
Anything else you want to know, please tell me.
For anyone else that runs into this issue, newer versions of vue-loader need to be loaded in the webpack plugins section:
// Required for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin')
environment.plugins.append(
'VueLoaderPlugin',
new VueLoaderPlugin()
)
From https://github.com/rails/webpacker/issues/1453#issuecomment-412291197
It looks like you don’t have a rule configured for .vue files: you have one for .vue.html files but not for just .vue files. You can just change your existing rule by removing the \.html in order to make it work.

Module build failed: Error: Plugin 0 specified in "base" provided an invalid property of "definitions"

I am unsuccessfully trying to get webpack to package a production build of my react/redux app. The build succeeds normally, but as soon as I add a webpack plugin to switch the environment as detailed here: https://stackoverflow.com/a/30061249/7114096 (this is linked in the warning logged by redux as I am running a minified dev version) , it falls down.
webpack.config.js:
'use strict';
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'web/bundles/frontend/build/react');
var APP_DIR = path.resolve(__dirname, 'web/bundles/frontend/src/react');
var config = {
entry: ['babel-polyfill', APP_DIR + '/search.js'],
output: {
path: BUILD_DIR,
filename: 'search.js'
},
module : {
loaders : [
{
test : /\.js?/,
include : APP_DIR,
loader : 'babel',
query: {
presets: ['react','es2015'],
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
"transform-object-rest-spread"
]
}
}
]
}
};
module.exports = config;
package.json:
"babel-cli": "^6.16.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.5",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-node5": "^11.1.0",
"babel-preset-react": "^6.16.0",
"bower": "^1.7.9",
"bower-update-all": "^0.1.2",
"csswring": "^5.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-browserify": "^0.5.1",
"gulp-clean-css": "^2.0.11",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^3.0.2",
"gulp-minify": "0.0.12",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.1.1",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"gulp-webpack": "^1.5.0",
"merge-stream": "^1.0.0",
"path": "^0.12.7",
"postcss-cssnext": "^2.7.0",
"react": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"redux": "^3.6.0",
"redux-saga": "^0.12.0",
"require-dir": "^0.3.0",
"webpack": "^1.13.3"
And finally the error:
ERROR in ./web/bundles/frontend/src/react/search.js
Module build failed: Error: Plugin 0 specified in "base" provided an invalid property of "definitions"
at Plugin.init (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\plugin.js:131:13)
at Function.normalisePlugin (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:12)
at C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:30
at Array.map (native)
at Function.normalisePlugins (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:154:20)
at OptionManager.mergeOptions (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:36)
at OptionManager.init (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
at File.initOptions (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\index.js:216:65)
at new File (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\file\index.js:139:24)
at Pipeline.transform (C:\xampp\htdocs\test\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\xampp\htdocs\test\node_modules\babel-loader\index.js:38:20)
at Object.module.exports (C:\xampp\htdocs\test\node_modules\babel-loader\index.js:131:12)
# multi main
Any thoughts?
I think you have your plugins defined at the wrong place. Webpack plugin should not be defined inside the loaders
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'web/bundles/frontend/build/react');
var APP_DIR = path.resolve(__dirname, 'web/bundles/frontend/src/react');
var config = {
entry: ['babel-polyfill', APP_DIR + '/search.js'],
output: {
path: BUILD_DIR,
filename: 'search.js'
},
module : {
loaders : [
{
test : /\.js?/,
include : APP_DIR,
loader : 'babel',
query: {
presets: ['react','es2015'],
plugins: ["transform-object-rest-spread"]
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
]
};
module.exports = config;

React webapp keep loading local host resources in PROD env

I've deployed my react-js based web app to prod environment, and from the browser console, I can see there's some dependency code stuck in an endless loop trying to load some socketjs-node resources from local host through xhr. Here's the message I got from browser console:
abstract-xhr.js:132 Mixed Content: The page at '[MY_WEBSITE_ADDRESS]' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:3000/sockjs-node/info?t=1469401504944'. This request has been blocked; the content must be served over HTTPS.o._start # abstract-xhr.js:132(anonymous function) # abstract-xhr.js:21
abstract-xhr.js:132 XMLHttpRequest cannot load http://localhost:3000/sockjs-node/info?t=1469401504944. Failed to start loading.o._start # abstract-xhr.js:132(anonymous function) # abstract-xhr.js:21
client:70 [WDS] Disconnected!l.onclose # client:70n.dispatchEvent # eventtarget.js:51(anonymous function) # main.js:356
I am wondering if I missed any prod setting when building my js bundle. I am using webpack and here's the setting for compiling prod bundle js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index',
'whatwg-fetch'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}]
}
};
and here are the dependencies I am using:
"devDependencies": {
"babel-core": "^6.0.20",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"eslint": "^1.10.3",
"eslint-plugin-react": "^3.6.2",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"async": "^1.5.2",
"express": "^4.13.4",
"mixpanel": "^0.4.0",
"mixpanel-browser": "^2.8.1",
"radium": "^0.17.1",
"react": "^0.14.6",
"react-autosuggest": "^3.8.0",
"react-bootstrap": "^0.29.4",
"react-cookie": "^0.4.7",
"react-dom": "^0.14.6",
"react-ga": "^2.1.0",
"react-geosuggest": "^1.23.0",
"react-router": "^2.4.1",
"whatwg-fetch": "^1.0.0"
}
I don't see abstract-xhr.js is checking any explicit flag when initiating this query. Please share some thoughts. Thanks!
I fixed it by removing this line from Entry property in webpack config.
'webpack-dev-server/client?http://localhost:3000',

Resources