Cannot get this to work

[Dan Herd]

I'm following the docs and can't seem to get this working. Here's my index.tsx:

import * as React from 'react'
import { render } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './components/App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'unstated'
import ReactHintFactory from 'react-hint'
import 'react-hint/css/index.css'

const rootEl = document.getElementById('root')
const ReactHint = ReactHintFactory(React)

render(
  <AppContainer>
    <Provider>
      <BrowserRouter>
        <App>
          <ReactHint />
        </App>
      </BrowserRouter>
    </Provider>
  </AppContainer>,
  rootEl
)

// Hot Module Replacement API
declare let module: { hot: any }

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NewApp = require('./components/App').default

    render(
      <AppContainer>
        <Provider>
          <BrowserRouter>
            <NewApp>
              <ReactHint />
            </NewApp>
          </BrowserRouter>
        </Provider>
      </AppContainer>,
      rootEl
    )
  })
}

The following line:

const ReactHint = ReactHintFactory(React)

Generates this in my console:

Uncaught TypeError: react_hint_1.default is not a function

package.json devDependencies:

  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "@types/jest": "^23.3.10",
    "@types/lodash": "^4.14.119",
    "@types/node": "^10.12.10",
    "@types/react": "^16.7.8",
    "@types/react-dnd": "^3.0.2",
    "@types/react-dnd-html5-backend": "^3.0.2",
    "@types/react-dom": "^16.0.11",
    "@types/react-router-dom": "^4.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "dotenv-webpack": "^1.5.7",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.5.0",
    "ip": "^1.1.5",
    "jest": "^23.6.0",
    "json-rules-engine": "^2.3.2",
    "lodash": "^4.17.11",
    "node-sass": "^4.10.0",
    "react": "^16.6.3",
    "react-addons-test-utils": "^15.6.2",
    "react-dnd": "^7.0.2",
    "react-dnd-html5-backend": "^7.0.2",
    "react-dom": "^16.6.3",
    "react-dropdown": "^1.6.3",
    "react-hint": "^3.2.0",
    "react-hot-loader": "^4.3.12",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.2.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "unstated": "^2.1.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  }

Am I missing something? Is there a bug?

[Dan Herd]

OK, figured it out.

It would appear I needed to use:

import * as ReactHintFactory from 'react-hint'

instead of:

import ReactHintFactory from 'react-hint'

and it works perfectly. Feel free to close this ticket, but you might want to update the docs too...

[Vladimir Simonov]

@danherd I guess this is related to the TypeScript syntax, e.g. look at React import:

TS:

import * as React from 'react'

JS:

import React from 'react'

That's one of the differences between two languages.