CODEWITHSUNDEEP
javascriptreactjswebpackreact-router
shauvet
shauvet

Reputation: 96

Error: Invariant failed: Hash history needs a DOM

First, apologize for my poor english, wish you can understand...

the error shows here:

ERROR in   Error: webpack-internal:///./node_modules/tiny-invariant/dist/tiny-invariant.esm.js:14
    throw new Error(prefix + ": " + (message || ''));
    ^
  Error: Invariant failed: Hash history needs a DOM

  - tiny-invariant.esm.js:14 invariant
    [.]/[tiny-invariant]/dist/tiny-invariant.esm.js:14:9

  - history.js:577 createHashHistory
    [.]/[history]/cjs/history.js:577:16

  - index.js:36 _default
    [.]/[dva]/lib/index.js:36:64

  - index.js:32 eval
    webpack-internal:///./src/index.js:32:53

  - index.html:7396 Module../src/index.js
    /Users/mac/Desktop/workspace/test/reproduce/code-reproduce/src/index.html:7396:1

  - index.html:21 __webpack_require__
    /Users/mac/Desktop/workspace/test/reproduce/code-reproduce/src/index.html:21:30

  - index.html:3 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./src/index.html:3:34

  - index.html:5904 Object../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html
    /Users/mac/Desktop/workspace/test/reproduce/code-reproduce/src/index.html:5904:1

  - index.html:21 __webpack_require__
    /Users/mac/Desktop/workspace/test/reproduce/code-reproduce/src/index.html:21:30

  - index.html:85
    /Users/mac/Desktop/workspace/test/reproduce/code-reproduce/src/index.html:85:18

Theoretically, project run in my local server, it should has dom.

This is my minimum reproducible repository address:

https://github.com/shauvet/code-reproduce/tree/dva-admin

steps:

step 1: yarn step 2: yarn start

import './index.html'
import 'babel-polyfill'
import dva from 'dva'
import createLoading from 'dva-loading'
import { hashHistory } from 'dva/router'
import appMod from './models'
import router from './router'

// 1. Initialize
const app = dva()

app.use(createLoading())

// 2. Model
// app.model(require('./models/app'))
app.model(appMod)
// 3. Router
// app.router(require('./router'))
app.router(router)

// 4. Start
app.start('#root')

environment info:

node version: 12.16.2 os version: osx 10.15.4

Upvotes: 0

Views: 593

Answers (1)

shauvet
shauvet

Reputation: 96

Finally, i added in the webpackHtmlPlugin：

new HtmlWebpackPlugin({
      // filename: 'index.html',
      template: 'src/index.html',
      inject: 'body'  // here
})

And the error gone.

Upvotes: 1

Related Questions