npm run serve fails, npm start works w/o any problems

[nephix]

Hi,

I've been running my app with npm start and don't get any error in my command line as well as browser console. When I run npm run serve I get a Hash history needs a DOM error:

$ npm run serve

AyePWA@1.0.0 serve /Users/nephix/Development/preact/Aye/repository/AyePWA
preact build && preact serve

Build [================== ] 91% (18.5s) additional asset processing
Total precache size is about 395 kB for 21 resources.
(undefined) Template execution failed: Invariant Violation: Hash history needs a DOM
(undefined) Error: Invariant Violation: Hash history needs a DOM

• ssr-bundle.js:1 UyDz.t.exports
  /Users/nephix/Development/preact/Aye/repository/AyePWA/build/ssr-build/ssr-b undle.js:1:83159

• ssr-bundle.js:1 e.default
  /Users/nephix/Development/preact/Aye/repository/AyePWA/build/ssr-build/ssr-b undle.js:1:113807

• ssr-bundle.js:1 new e
  /Users/nephix/Development/preact/Aye/repository/AyePWA/build/ssr-build/ssr-b undle.js:1:13311

• index.js:147 renderToString
  [AyePWA]/[preact-render-to-string]/dist/index.js:147:13

• index.js:235 renderToString
  [AyePWA]/[preact-render-to-string]/dist/index.js:235:15

• index.js:160 renderToString
  [AyePWA]/[preact-render-to-string]/dist/index.js:160:11

• index.js:160 renderToString
  [AyePWA]/[preact-render-to-string]/dist/index.js:160:11

• prerender.js:28 prerender
  [AyePWA]/[preact-cli]/lib/lib/webpack/prerender.js:28:13

• webpack-client-config.js:165 Object.ssr
  [AyePWA]/[preact-cli]/lib/lib/webpack/webpack-client-config.js:165:54

• template.html:111 EM6I.module.exports
  [AyePWA]/[preact-cli]/lib/resources/template.html:111:37

• index.js:264
  [AyePWA]/[html-webpack-plugin]/index.js:264:16

• util.js:16 tryCatcher
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/util.js:16:23

• promise.js:512 Promise._settlePromiseFromHandler
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:512:31

• promise.js:569 Promise._settlePromise
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:569:18

• promise.js:606 Promise._settlePromiseCtx
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:606:10

• async.js:138 Async._drainQueue
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/async.js:138:12

• async.js:143 Async._drainQueues
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/async.js:143:10

• async.js:17 Immediate.Async.drainQueues
  [AyePWA]/[html-webpack-plugin]/[bluebird]/js/release/async.js:17:14

npm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "serve"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! AyePWA@1.0.0 serve: preact build && preact serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the AyePWA@1.0.0 serve script 'preact build && preact serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the AyePWA package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! preact build && preact serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs AyePWA
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls AyePWA
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/nephix/Development/preact/Aye/repository/AyePWA/npm-debug.log

My dependencies are:

"dependencies": {
  "preact": "^8.1.0",
  "preact-compat": "^3.16.0",
  "preact-redux": "^2.0.2",
  "react-dom": "^15.6.1",
  "react-motion-drawer": "^2.1.5",
  "react-router-dom": "^4.1.1",
  "redux": "^3.7.1"
}

I'm using HashRouter from react-router-dom in my App Component:

import { h, Component } from 'preact';
import { HashRouter, Route } from 'react-router-dom';
import Order from '../routes/order';
import Login from '../routes/login';
import OrderLocation from '../routes/order_location';
import Item from '../routes/item';

export default class App extends Component {
	render() {
		return (
                <div id="app">
                  <HashRouter>
                    <div>
                      <main>
                        <Route exact path="/" component={Order} />
                        <Route path="/order/location" component={OrderLocation} />
                        <Route path="/login" component={Login} />
                        <Route path="/item/:index" component={Item} />
                      </main>
                    </div>
                  </HashRouter>
                </div>	
		);
	}
}

(simplified version)

I'm posting this in preact-cli because the error seems to come during the production build process, while the development build process works fine. I'm not sure exactly what the error is. Has anybody encountered a similar problem and knows a workaround? Thanks guys

[thangngoc89]

Hi. This is a prerender issue, you can see a workaround here #178 .

[thangngoc89]

Please discuss this over #178.