create-react-app --typescript doesn't like react-hooks-global-state/src/devtools

[Jarl André Hübenthal]

Hi

I was just making a very simple store with some thunk, logger and devtools middleware.

When I run the app, all is fine. When I run tests with the devtools middleware I get:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    ......./node_modules/react-hooks-global-state/src/devtools.js:55
    export const reduxDevToolsExt = () => {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 | import { reducers } from "./reducers";
       6 | 
    >  7 | const { reduxDevToolsExt } = require('react-hooks-global-state/src/devtools');
         |                              ^
       8 | let enhancers = compose(
       9 |     applyMiddleware(reduxThunk, reduxLogger),
      10 |     reduxDevToolsExt(),

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.require (src/state/store.ts:7:30)

I have fixed it by simply not adding the devtools if I am in NODE_ENV test.

But do you think its solvable, to make it compliant with create-react-app jest test environment?

[Daishi Kato]

Hi, thanks for reporting. Could you try importing react-hooks-global-state/dist/devtools and see if it makes any difference?

[Jarl André Hübenthal]

it works :)

// @ts-ignore no typescript declaration
import { reduxDevToolsExt } from 'react-hooks-global-state/dist/devtools';

but I needed to wrap with ts ignore, since it complains that there is no declaration for it.
but otherwise, my tests passed :)

[Daishi Kato]

Ah, I see. The ts-ignore is not very nice, though. Let me see what I can do...

[Daishi Kato]

This should probably fixes the typing issue.

[Daishi Kato]

Published: https://www.npmjs.com/package/react-hooks-global-state/v/0.8.0
This also includes changes in #9.