Below is my server.js file:
import path from 'path';
import express from 'express';
import webpack from 'webpack';
import middleware from './src/middleware';
const app = express();
var port = process.env.PORT || 8080;
if(process.env.NODE_ENV === 'development') {
const config = require('./webpack.config.dev');
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath,
stats: {
assets: false,
colors: true,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false
}
}));
//app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.resolve(__dirname, 'src')));
} else if(process.env.NODE_ENV === 'production') {
app.use(express.static(path.resolve(__dirname, 'dist')));
}
app.get('*', middleware);
app.listen(port, '0.0.0.0', (err) => {
if(err) {
console.error(err);
} else {
console.info(path.resolve(__dirname, 'src'));
console.info('Listening at '+port);
}
});
My webpack.config.dev.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/middleware.js',
output: {
path : path.resolve('./src'), // always use absolute paths
filename : 'bundle.js',
publicPath : '/assets/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
],
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
include: path.join(__dirname, 'node_modules'),
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
test: /\.js$/,
loader: 'babel',
include: path.resolve(__dirname, 'src'),
query: {
presets: [ 'react-hmre' ]
}
},
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
};
This is my middleware:
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { match, RouterContext } from 'react-router';
import reducers from './reducers';
import routes from './routes';
export default (req, res) => {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if(error) {
res.status(500).send(error.message);
} else if(redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if(renderProps) {
res.status(200).send(`
<!DOCTYPE html>
<html>
<head>
<title>Req Management</title>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
</head>
<body>
<script src='/src/bundle.js'></script>
<div id='app'>${renderToString(
<Provider store={createStore(reducers)}>
<RouterContext {...renderProps} />
</Provider>
)}</div>
</body>
</html>
`);
} else {
console.log("inside else");
res.status(404).send('Not found');
}
});
};
This is my package.json:
{
"name": "universal-boilerplate",
"version": "1.4.0",
"description": "Universal/isomorphic boilerplate with react, redux, webpack and express",
"main": "src/index.js",
"scripts": {
"lint": "eslint ./src",
"start": "npm run build && cross-env NODE_ENV=development babel-node ./server.js",
"build": "webpack --config ./webpack.config.dev.js",
"serve": "cross-env NODE_ENV=production babel-node ./server.js"
},
"author": "",
"license": "",
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.22.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"copy-webpack-plugin": "^3.0.1",
"cross-env": "^2.0.0",
"eslint": "^3.1.1",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-react": "^5.2.2",
"express": "^4.14.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"react-router": "^2.6.1",
"react-router-redux": "^4.0.5",
"redux": "^3.5.2",
"rimraf": "^2.5.4",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2"
},
"repository": {
"type": "",
"url": ""
},
"dependencies": {
"axios": "^0.13.1",
"babel": "^6.5.2",
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"copy-webpack-plugin": "^3.0.1",
"cross-env": "^2.0.0",
"eslint": "^3.1.1",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-react": "^5.2.2",
"express": "^4.14.0",
"fixed-data-table": "^0.6.3",
"querystring": "^0.2.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-dropdown": "^1.2.0",
"react-input-autosize": "^1.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.6.1",
"react-router-redux": "^4.0.5",
"react-select": "^1.0.0-rc.3",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2"
}
}
This is my index.js:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import reducers from './reducers';
import routes from './routes';
import { applyMiddleware, createStore } from "redux"
import logger from "redux-logger"
import thunk from "redux-thunk"
const middleware = applyMiddleware(thunk, logger());
const store = createStore(reducers, middleware);
const history = syncHistoryWithStore(browserHistory, store);
render(
<Provider store={store}>
<Router history={history} store={store}>
{ routes }
</Router>
</Provider>,
document.getElementById('app')
);
if(process.env.NODE_ENV == 'development' && module.hot) {
module.hot.accept('./reducers', () => {
store.replaceReducer(require('./reducers').default);
});
}
I was trying to deploy this code to Heroku. Did some changes in webpack.config.dev.js file. Not able to revert back. Before the code was working fine locally. Now not working locally also.
Folder structure is shown below:
This is probably caused by this:
app.use(express.static(path.resolve(__dirname, 'src')));
This makes src/ the root of your static resources; in other words, /SOME.FILE is looked up as src/SOME.FILE. Extending this to your url, /src/bundle.js, it will be looked up as src/src/bundle.js, which obviously is incorrect.
There are a few solutions:
use /bundle.js instead of /src/bundle.js in the HTML
prefix the path for the static middleware with /src:
app.use('/src', express.static(path.resolve(__dirname, 'src')));
I think the latter would be preferable.
Regarding why your code isn't working locally. it may be because you have a typo. You are checking for:
if(process.env.NODE_ENV === 'develospment') {
Presumably you meant 'development'...
Related
I have a problem when i updated in my project the webpack package to V5.x.
Here is the error :
webpack-hot-client: entry Object values must be an Array or Function. Please check your webpack config.
Here is my package.json :
"*.css",
"*.scss",
"*.sass" ], "main": "index.js", "scripts": {
"analyze": "bnr clean:build && bnr analyze",
"build:all": "bnr clean:build && bnr build:client && bnr build:server",
"build:client": "bnr clean:build && bnr build:client",
"build:server": "bnr clean:build && bnr build:server",
"clean": "bnr clean:build",
"dev": "bnr dev",
"docker": "yarn docker:build && yarn docker:start && yarn docker:status",
"docker:build": "docker-compose build --no-cache",
"docker:start": "docker-compose up -d",
"docker:status": "docker-compose logs -f -t",
"flow": "bnr flow",
"flow:stop": "bnr flow:stop",
"lint": "npm-run-all lint:js lint:style lint:json",
"lint:js": "bnr lint:js",
"lint:style": "bnr lint:style",
"lint:json": "bnr lint:json",
"prod": "bnr build:client && bnr build:server && bnr start",
"start": "bnr start",
"sitemap": "node sitemap-generator.js" }, "betterScripts": {
"analyze": {
"command": "npx webpack -p --progress --hide-modules --config ./tools/webpack/production.client.babel.js",
"env": {
"NODE_ENV": "analyze"
}
},
"build:client": {
"command": "npx webpack --hide-modules --config ./tools/webpack/production.client.babel.js && npx gulp --gulpfile
tools/gulpfile.js",
"env": {
"NODE_ENV": "production"
}
},
"build:server": {
"command": "npx babel ./src -d ./dist --copy-files && npx webpack --hide-modules --config
./tools/webpack/production.server.babel.js",
"env": {
"NODE_ENV": "production"
}
},
"clean:build": {
"command": "rimraf ./public/assets && rimraf ./public/webpack-assets.json"
},
"dev": {
"command": "nodemon ./index.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"PORT": 3000
}
},
"flow": {
"command": "npx flow"
},
"flow:stop": {
"command": "npx flow stop"
},
"lint:js": {
"command": "npx eslint --fix ./src ./tools ./index.js"
},
"lint:json": {
"command": "npx prettier --write src/**/**/*.json"
},
"lint:style": {
"command": "npx stylelint --fix ./src/**/*.css, ./src/**/*.scss"
},
"start": {
"command": "node ./index.js",
"env": {
"NODE_PATH": "./dist",
"NODE_HOST": "0.0.0.0",
"NODE_ENV": "production",
"PORT": 8080
}
} }, "husky": {
"hooks": {
"pre-commit": "lint-staged"
} }, "lint-staged": {
"*.{js,jsx}": "eslint --fix",
"*.{json,md}": "prettier --write",
"*.{scss,sass}": "stylelint --syntax=scss" }, "nodemonConfig": {
"watch": [
"src/server.js",
"src/handler.js",
"src/utils/renderHtml.js",
"src/theme/variables.scss"
] }, "browserslist": [
"> 1%",
"last 3 versions" ], "eslintIgnore": [
"tools/flow",
"public/assets" ], "dependencies": {
"#babel/cli": "^7.14.5",
"#babel/plugin-proposal-export-namespace-from": "^7.5.2",
"#fortawesome/fontawesome-free": "^5.15.1",
"#hapi/address": "^4.1.0",
"#koa/router": "^10.1.1",
"#loadable/component": "^5.10.2",
"#loadable/server": "^5.10.2",
"#tweenjs/tween.js": "^18.3.1",
"ansi-regex": "^6.0.1",
"axios": "^0.23.0",
"bootstrap": "^5.1.3",
"chalk": "^4.1.2",
"classnames": "^2.2.6",
"d3-ease": "^3.0.1",
"del": "^6.0.0",
"esm": "^3.2.25",
"glob-parent": "^6.0.2",
"gulp": "^4.0.2",
"gulp-cache": "^1.1.3",
"gulp-imagemin": "^8.0.0",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"i18next": "^21.3.2",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-node-fs-backend": "^2.1.3",
"i18next-resource-store-loader": "^0.1.2",
"i18next-xhr-backend": "^3.1.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2",
"koa": "^2.8.1",
"koa-bodyparser": "^4.2.1",
"koa-compress": "^5.1.0",
"koa-favicon": "^2.0.1",
"koa-helmet": "^6.1.0",
"koa-i18next-detector": "^0.7.2",
"koa-i18next-middleware": "^1.1.12",
"koa-i18next-middleware-fixed": "^1.1.10-b3",
"koa-morgan": "^1.0.1",
"koa-mount": "^4.0.0",
"koa-router": "^10.1.1",
"koa-static": "^5.0.0",
"koa-webpack": "^6.0.0",
"koa-webpack-server": "^0.2.4",
"micro-dash": "^8.1.0",
"moment": "^2.24.0",
"p-min-delay": "^4.0.1",
"pm2": "^5.1.2",
"qs": "^6.8.0",
"rc-animate": "^3.1.1",
"rc-queue-anim": "^2.0.0",
"rc-scroll-anim": "^2.6.1",
"rc-tween-one": "^2.6.3",
"react": "^17.0.2",
"react-bootstrap": "^1.0.0-beta.8",
"react-dom": "npm:#hot-loader/react-dom#^16.8.6",
"react-global-configuration": "^1.4.1",
"react-gtm-module": "^2.0.11",
"react-helmet": "^6.1.0",
"react-i18next": "^11.12.0",
"react-icons": "^4.3.1",
"react-motion": "^0.5.2",
"react-player": "^2.9.0",
"react-pose": "^4.0.8",
"react-router": "^5.0.1",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-router-last-location": "^2.0.1",
"react-router-sitemap": "^1.2.0",
"react-spring": "^9.3.0",
"react-tilt": "^0.1.4",
"react-typist": "^2.0.5",
"react-youtube": "^7.9.0",
"sass-resources-loader": "^2.0.1",
"serialize-javascript": "^6.0.0",
"styled-components": "^5.3.1",
"terser-webpack-plugin": "^5.2.4" }, "devDependencies": {
"#babel/core": "^7.6.0",
"#babel/node": "^7.14.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-export-default-from": "^7.5.2",
"#babel/plugin-proposal-optional-chaining": "^7.6.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.14.5",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.14.5",
"#babel/register": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#loadable/babel-plugin": "^5.10.0",
"#loadable/webpack-plugin": "^5.7.1",
"asset-require-hook": "^1.2.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-remove-console": "^6.9.4",
"better-npm-run": "^0.1.1",
"compression-webpack-plugin": "^9.0.0",
"core-js": "3",
"css-loader": "^6.4.0",
"css-modules-require-hook": "^4.2.3",
"cssnano": "^5.0.8",
"eslint": "^8.0.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-plugin-flowtype": "^6.1.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
"flow-bin": "^0.162.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-minifier": "^4.0.0",
"husky": "^7.0.2",
"imagemin-webpack-plugin": "^2.4.2",
"lint-staged": "^11.2.3",
"mini-css-extract-plugin": "^2.4.2",
"nodemon": "^2.0.13",
"normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.3.9",
"postcss-loader": "^6.2.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.4.1",
"react-dev-utils": "^11.0.4",
"react-hot-loader": "^4.12.13",
"react-router-sitemap-generator": "^0.0.8",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.0",
"sass": "^1.43.2",
"sass-loader": "^12.2.0",
"static-site-generator-webpack-plugin": "^3.4.2",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-scss": "^4.3.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.10.1",
"url-loader": "^4.1.1",
"webpack": "^5.58.2",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "4.9.1",
"webpack-dev-middleware": "^5.2.1",
"webpack-hot-middleware": "^2.25.0",
"webpack-manifest-plugin": "^4.0.2",
"webpack-merge": "^5.8.0",
"webpack-node-externals": "^3.0.0" }, "engines": {
"node": ">=8",
"npm": ">=5" } }```
Here is my base.config.js of webpack :
import webpack from 'webpack'
import { WebpackManifestPlugin } from 'webpack-manifest-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
import LoadablePlugin from '#loadable/webpack-plugin'
import config from './config'
const nodeEnv = process.env.NODE_ENV || 'development'
const isDev = nodeEnv === 'development'
const getPlugins = () => {
const plugins = [
new WebpackManifestPlugin({
fileName: path.resolve(process.cwd(), 'public/webpack-assets.json'),
filter: file => file.isInitial
}),
new MiniCssExtractPlugin({
filename: `${config.cssFileName}.css`,
chunkFilename: `${config.cssChunkFileName}.css`,
ignoreOrder: true
}),
// Setup environment variables for client
new webpack.EnvironmentPlugin({ NODE_ENV: JSON.stringify(nodeEnv) }),
// Setup global variables for client
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEV__: isDev
}),
new LoadablePlugin({ filename: '../loadable-stats.json', writeToDisk: true })
]
if (isDev) {
plugins.push(new FriendlyErrorsWebpackPlugin())
}
return plugins
}
// Webpack configuration
module.exports = {
mode: isDev ? 'development' : 'production',
devtool: isDev ? 'eval-source-map' : 'hidden-source-map',
context: path.resolve(process.cwd()),
entry: ['webpack-hot-middleware/client','./src/index.js'],
optimization: {
splitChunks: {
chunks: 'async'
}
},
output: {
path: path.resolve(process.cwd(), 'public/assets'),
publicPath: '/assets/',
filename: `${config.fileName}.js`,
chunkFilename: `${config.chunkFileName}.js`,
pathinfo: isDev
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
options: { cacheDirectory: isDev }
},
{
test: /\.css$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css',
options: {
importLoaders: 1,
modules: false,
sourceMap: true
}
},
{ loader: 'postcss', options: { sourceMap: true } }
]
},
{
test: /\.(scss|sass)$/,
exclude: path.resolve(__dirname, '..', '..', 'src/theme/'),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
reloadAll: true
}
},
{
loader: 'css',
options: {
importLoaders: 2,
modules: {
localIdentName: config.cssModulesIdentifier,
context: path.resolve(process.cwd(), 'src')
},
sourceMap: true
}
},
{ loader: 'postcss', options: { sourceMap: true } },
{
loader: 'sass',
options: {
sassOptions: {
outputStyle: 'expanded'
},
sourceMap: true
}
},
{
loader: 'sass-resources',
options: {
resources: path.resolve(process.cwd(), 'src/theme/_include.scss')
}
}
]
},
{
test: /\.(scss|sass)$/,
include: path.resolve(__dirname, '..', '..', 'src/theme/'),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
reloadAll: true
}
},
{
loader: 'css',
options: {
importLoaders: 2,
modules: false,
sourceMap: true
}
},
{ loader: 'postcss', options: { sourceMap: true } },
{
loader: 'sass',
options: {
sassOptions: {
outputStyle: 'expanded'
},
sourceMap: true
}
}
]
},
{
test: path.resolve(process.cwd(), 'src/locales'),
loader: 'i18next-resource-store-loader'
},
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'url',
options: { limit: 10240, name: config.staticFilesName }
},
{
test: /\.(gif|png|jpe?g|webp)$/,
// Any image below or equal to 10Kb will be converted to base64
loader: 'url',
options: { limit: 10240, name: config.staticFilesName }
},
{
test: /\.(mp3|mp4|ogv)$/,
loader: 'file',
options: { name: config.staticFilesName }
}
]
},
plugins: getPlugins(),
resolveLoader: {
mainFields: ['loader']
},
resolve: {
modules: ['src', 'node_modules'],
descriptionFiles: ['package.json'],
extensions: ['.js', '.jsx', '.json'],
fallback:{
fs: false,
vm: false,
net: false,
tls: false
}
},
cache: isDev,
stats: { children: false }
I tried a lot of things and i fixed a lot of issues but for me the entry is an Array, so i don't know why i got this error.
Here there is my server.js (he launches all the programs) :
import logger from 'koa-morgan'
import Koa from 'koa'
import bodyParser from 'koa-bodyparser'
import compression from 'koa-compress'
import helmet from 'koa-helmet'
import querystring from 'qs'
import Router from '#koa/router'
import favicon from 'koa-favicon'
import axios from 'axios'
import chalk from 'chalk'
import mount from 'koa-mount'
import serve from 'koa-static'
import Backend from 'i18next-node-fs-backend'
import i18n from 'i18next'
import i18nextMiddleware from 'koa-i18next-middleware-fixed'
import LanguageDetector from 'koa-i18next-detector'
import c from './config'
process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0
const app = new Koa()
const router = new Router()
const sendMessage = body =>
new Promise((resolve, reject) => {
const config = {
maxRedirects: 0,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
axios
.post(
'https://go.pardot.com/l/138941/2019-07-22/2h6dgb',
querystring.stringify({ ...body, privacy: true }),
config
)
.then(result => {
resolve(result.status === 200)
})
.catch(e => {
reject(new Error(e))
})
})
const lngDetector = new LanguageDetector()
i18n
.use(Backend)
.use(lngDetector)
.init(
{
debug: false,
fallbackLng: 'fr',
saveMissing: false,
react: {
useSuspense: false
},
detection: {
order: ['path', 'navigator']
},
interpolation: {
escapeValue: false,
formatSeparator: ',',
format: (value, format) => {
if (format === 'uppercase') return value.toUpperCase()
return value
}
},
preload: ['fr'],
load: 'languageOnly',
ns: [
'global',
'landing_references',
'landing_expertises',
'home',
'references',
'expertises',
'contact',
'about',
'partners',
'team'
],
defaultNS: 'global',
backend: {
loadPath: `${path.resolve(process.cwd(), 'src')}/locales/{{lng}}/{{ns}}.json`
}
},
async () => {
// Use helmet to secure Express with various HTTP headers
app.use(helmet())
app.use(bodyParser())
// Compress all requests
app.use(compression())
// Use for http request debug (show errors only)
app.use(logger('dev', { skip: ctx => ctx.status < 400 }))
app.use(favicon(path.resolve(process.cwd(), 'public/favicon.ico')))
app.use(i18nextMiddleware.getHandler(i18n, { locals: 'lng' }))
// Docker serve static trough nginx for better performance
if (!__DOCKER__) {
console.log(chalk.magenta('==> 🐌 Serve statics with koa'))
app.use(mount('/locales', serve(path.resolve(process.cwd(), 'src/locales'))))
app.use(serve(path.resolve(process.cwd(), 'public')))
}
if (__DEV__) {
app.use(mount('/images', serve(path.resolve(process.cwd(), 'src/images'))))
/* Run express as webpack dev server */
const webpack = require('webpack')
const webpackConfig = require('../tools/webpack/base.config')
const compiler = webpack(webpackConfig)
const koaWebpack = require('koa-webpack')
new webpack.ProgressPlugin().apply(compiler)
const options = {
compiler,
devMiddleware: {
publicPath: webpackConfig.output.publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
hot: true,
writeToDisk: false,
quiet: true, // Turn it on for friendly-errors-webpack-plugin
noInfo: true,
stats: 'minimal',
serverSideRender: true
}
}
const middleware = await koaWebpack(options)
app.use(middleware)
}
router
.post('/contact', async ctx => {
try {
await sendMessage(ctx.request.body)
ctx.body = {
message: 'Votre message a bien été envoyé'
}
ctx.status = 200
} catch (e) {
ctx.body = {
message: 'Une erreur est survenue'
}
ctx.status = 500
}
})
.get('/', async ctx => {
ctx.status = 302
return ctx.redirect(`/${ctx.request.language}`)
})
.get('*', async (ctx, next) => {
return require('./render')(ctx, next)
})
app.use(router.routes()).use(router.allowedMethods())
if (c.port) {
app.listen(c.port, c.host, err => {
const url = `http://${c.host}:${c.port}`
if (err) console.error(chalk.red(`\n==> Error happen ${err}`))
console.info(chalk.green(`\n==> 🌎 Listening at ${url}`))
})
} else {
console.error(chalk.red('\n==> Error : No PORT environment variable has been specified'))
}
}
)
UPDATE :
I put some console.log in the compiler file :
for (const key of Object.keys(entry)) {
const value = entry[key];
console.log(entry)
console.log(value)
console.log(Array.isArray(Object.values(value)))
if (!Array.isArray(value)) {
throw new TypeError(
'webpack-hot-client: `entry` Object values must be an Array or Function. Please check your webpack config.'
);
Console.log return this :
main: { import: [ 'webpack-hot-middleware/client', './src/index.js' ] }
}
{ import: [ 'webpack-hot-middleware/client', './src/index.js' ] }
true
So i think that there is a problem with the declaration of variable, because we have to do an Object.values() to get the array.
So idk what can i do to resolve the problem, i will not change the dependencies files...
Thx for your time and your response!
Regards
It might not be the right example to your situation, but they made some internal changes to the webpack structure:
entry: {} allows an empty object now (to allow to use plugins to add entries)
here's one of the newer examples I found:
module.exports = {
entry: {
about: { import: './about.js', filename: 'pages/[name][ext]' },
},
};
Source: Webpack v5 internal changes: Entry
I found the error. WebPack Hot Client is not update for the last version of webpack (5.x). If you use Webpack Hot Client, you have to use version 4 of Webpack.
Regards
After a build with webpack I am getting the Uncaught SyntaxError: Unexpected token error. I am able to run start and it will load that way. So I know this must be a problem with the output, or so I would imagine.
The index.html is generating properly, as is the bundle.js. I have that as a path on my index.html file. I am using webpack 4 and have the following webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
entry: './src/index.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
},
devServer: {
host: 'localhost',
port: '8080'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
]
}
My .babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Expensify</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="src"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</body>
</html>
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, compose, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import reducer from './store/reducers/auth';
const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(reducer, composeEnhances(
applyMiddleware(thunk)
));
const app = (
<Provider store={store}>
<App />
</Provider>
)
ReactDOM.render(app, document.getElementById('src'));
Packages.json
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "React Webpack Redux Babel Boilerplate",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Thomas Baric",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "^3.9.2",
"#material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.5",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"dateformat": "^3.0.3",
"g": "^2.0.1",
"help": "^3.0.2",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-slick": "^0.23.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack-dev-server": "^3.1.14"
}
}
For those wondering this was a backend Django problem regarding static files. Here is my working webpack and babel. This does work on heroku. https://djreactboilertest.herokuapp.com
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
entry: './src/index.js',
output: {
path: path.join(__dirname, 'build', 'static'),
filename: 'bundle.js'
},
module: {
rules: [
{
use: {loader: 'babel-loader'},
test: /\.js$/,
exclude: /node_modules/
}
]
},
devServer: {
host: 'localhost',
port: '8080'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
]
}
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"transform-class-properties",
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}
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.
My project fails with the error message in title on heroku, but it works locally.
This is my webpack.config.js:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
}
}]
},
resolve: {
extensions: ['.jsx', '.js']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
And this is package.json:
{
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^2.0.1",
"react-router-dom": "^4.0.0",
"redux": "^3.0.4",
"redux-form": "^6.6.3",
"redux-promise": "^0.5.3",
"validator": "^9.1.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
I digged around a bit, trying to find an answer, but there was no case such as working on one machine, and not on another machine.
Update 1
Here is index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';
import reducers from './reducers';
import LoginForm from './components/login_form';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Route path="/" component={LoginForm} />
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
** Update 2 **
I tried changing the jsx to js for the test property in webpack loader config object, it didn't help. I removed stage-1 and it's still failing.
This problem got fixed:
Deleted module.query and resolve from the webpack config file.
Moved dependencies from devDependencies to dependencies (heroku is a production environment, and therefore it doesn't download devDependencies, which doesn't make sense to me !)
This is driving me nuts. I'm trying to set up HMR with hapi/hapi-webpack-plugin and webpack-hot-middleware. My set up is an APS.NE MVC 5 application (serving the data) and Aurelia as a front-end framework.
HMR seems to start properly:
Then when I make a change on any of my js/html files a rebuild is fired properly, again:
but I'm receiving an error in process-update.js where module.hot is undefined and naturally it will error out when it checks for module.hot.status()
Here are the relevant files:
webpack-dev-server.js
/* eslint no-console: 0 */
import {Server} from 'hapi';
import H2o2 from 'h2o2';
import yargs from 'yargs';
import Webpack from 'webpack';
import WebpackPlugin from 'hapi-webpack-plugin';
import webpackConfig from './webpack.config.babel';
const argv = yargs.argv;
const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
if (!isNumeric(argv.port)) {
console.log(`Port must be numeric`);
process.exit(-1);
}
const compiler = new Webpack(webpackConfig);
const server = new Server();
server.connection({ host: 'localhost', port: 6789, labels: 'proxy-server' });
const assets = {
publicPath: webpackConfig.output.publicPath,
hot: false,
noInfo: true,
quiet: false,
host: 'localhost',
port: 6790,
stats: {
colors: true,
},
};
const hot = {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
};
server.register([
{
register: H2o2,
},
{
register: WebpackPlugin,
options: { compiler, assets, hot },
},
], error => {
if (error) {
return console.error(error);
}
server.route({
method: ['GET', 'POST'],
path: '/{path*}',
handler: (request, reply) => {
if (/^Content\/bundles\/[A-Za-z0-9\-]+\.css/.test(request.params.path)) {
const response = reply('// This is a fake CSS content... :)');
response.type('text/css');
return response;
}
return reply.proxy({
host: 'localhost',
port: argv.port,
passThrough: true,
});
},
});
server.start(() => console.log(`Server running on ${server.info.uri}`));
});
Package.json
{
"name": "aurelia-skeleton-navigation-webpack",
"version": "1.1.1",
"description": "A starter kit for building a standard navigation-style app with Aurelia and webpack.",
"main": "dist/main.js",
"scripts": {
...
"start": "babel-node ./webpack-dev-server.js"
...
},
],
"aurelia": {
"build": {
"resources": []
}
},
"dependencies": {
"aurelia-bootstrapper-webpack": "^1.1.0",
"aurelia-event-aggregator": "^1.0.0",
"aurelia-fetch-client": "^1.0.1",
"aurelia-framework": "^1.0.7",
"aurelia-history-browser": "^1.0.0",
"aurelia-http-client": "^1.0.3",
"aurelia-loader-webpack": "^1.0.3",
"aurelia-logging-console": "^1.0.0",
"aurelia-pal-browser": "^1.0.0",
"aurelia-polyfills": "^1.1.1",
"aurelia-route-recognizer": "^1.1.0",
"aurelia-router": "^1.0.7",
"aurelia-templating-binding": "^1.1.0",
"aurelia-templating-resources": "^1.2.0",
"aurelia-templating-router": "^1.0.0",
"aurelia-ui-virtualization": "1.0.0-beta.3.0.0",
"babel-polyfill": "^6.20.0",
"bootstrap": "^3.3.7",
"d3": "^4.4.0",
"font-awesome": "^4.7.0",
"highcharts": "^5.0.6",
"isomorphic-fetch": "^2.2.1",
"select2": "3.5.1"
},
"devDependencies": {
"#easy-webpack/config-aurelia": "^2.2.2",
"#easy-webpack/config-babel": "^4.0.0",
"#easy-webpack/config-common-chunks-simple": "^2.0.3",
"#easy-webpack/config-copy-files": "^1.1.2",
"#easy-webpack/config-css": "^4.0.0",
"#easy-webpack/config-env-development": "^2.1.5",
"#easy-webpack/config-env-production": "^3.0.0",
"#easy-webpack/config-external-source-maps": "^3.1.0",
"#easy-webpack/config-fonts-and-images": "^2.1.0",
"#easy-webpack/config-generate-index-html": "^2.1.1",
"#easy-webpack/config-global-bluebird": "^2.1.0",
"#easy-webpack/config-global-jquery": "^2.1.0",
"#easy-webpack/config-global-regenerator": "^1.2.2",
"#easy-webpack/config-html": "^3.1.0",
"#easy-webpack/config-json": "^3.1.0",
"#easy-webpack/config-test-coverage-istanbul": "^3.2.0",
"#easy-webpack/config-uglify": "^2.2.3",
"#easy-webpack/core": "^2.0.0",
"aurelia-tools": "^1.0.0",
"babel-cli": "^6.4.5",
"babel-loader": "^6.2.8",
"babel-plugin-transform-class-properties": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.0.0",
"babel-register": "^6.18.0",
"concurrently": "^3.1.0",
"cross-env": "^3.1.3",
"del-cli": "^0.2.0",
"eslint": "^3.12.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"h2o2": "^5.4.0",
"hapi": "^16.0.2",
"hapi-webpack-plugin": "^1.3.0",
"html-webpack-plugin": "^2.24.1",
"http-server": "^0.9.0",
"install": "^0.8.2",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-remap-istanbul": "^0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"node-sass": "^4.1.0",
"npm": "^4.0.3",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.2.1",
"protractor": "^4.0.11",
"sass-loader": "^4.1.0",
"url-loader": "^0.5.7",
"wait-on": "^2.0.1",
"webpack": "2.1.0-beta.27",
"webpack-dev-server": "2.1.0-beta.12",
"yargs": "^3.32.0",
"babel-preset-es2015": "^6.3.13",
"bootstrap": "^3.3.6",
"clean-webpack-plugin": "^0.1.8",
"css-loader": "^0.23.1",
"font-awesome": "^4.5.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.0"
}
}
webpack.confing.babel.js
/**
* To learn more about how to use Easy Webpack
* Take a look at the README here: https://github.com/easy-webpack/core
**/
import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '#easy-webpack/core'
import path from 'path'
...
process.env.BABEL_ENV = 'webpack';
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'development');
// basic configuration:
const title = 'Aurelia Navigation Skeleton';
const baseUrl = '.';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');
let htmlWebPackPlugin = new HtmlWebpackPlugin({
inject: false,
template: 'Areas/Aurelia/Views/Shared/_AureliaLayoutTemplate.cshtml',
filename: '../Areas/Aurelia/Views/Shared/_AureliaLayout.cshtml'
});
let optimizeCssAssetsPlugin = new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/,
cssProcessorOptions: { discardComments: { removeAll: true } }
});
let plugins = ENV === 'production'
? { plugins: [htmlWebPackPlugin, optimizeCssAssetsPlugin] }
: { plugins: [htmlWebPackPlugin, new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] };
const coreBundles = {
bootstrap: [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'regenerator-runtime'
],
// these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
aurelia: [
'aurelia-bootstrapper-webpack',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-path',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources',
'aurelia-ui-virtualization',
'select2',
'webpack-hot-middleware/client',
'webpack/hot/only-dev-server'
]
}
/**
* Main Webpack Configuration
*/
let config = generateConfig(
{
entry: {
'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */,
'webpack-hot-middleware/client',
'webpack/hot/only-dev-server'],
'aurelia-bootstrap': coreBundles.bootstrap,
'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
},
output: {
path: outDir,
publicPath: '/dist/'
},
...
module.exports = stripMetadata(config);
Am I missing something in the config that leaves module.hot property undefined?
I'm answering my own question for posterity:
This is related to my other question:
Aurelia, running webpack-dev-server --hot throws error on App Hot Update - 'Cannot read property 'status' of undefined'
In short, Aurelia doesn't support HMR ... yet (only css).
https://github.com/aurelia/skeleton-navigation/issues/629
http://blog.aurelia.io/2016/12/08/big-aurelia-release-update/