Cannot find module '~react-redux~redux' error in the generated react-typescript todo app

[zoltan-nz]

Description

The generated default todo project doesn't compile. Using latest yo (1.8.5) and generator-fountain (1.0.0-rc2). It looks, the generated module string is wrong.

Error Message & Stack Trace

Error when trying to run the default gulp task:

ERROR in ./src/index.tsx
(3,22): error TS2307: Cannot find module '~react-redux~redux'.

ERROR in ./src/app/containers/App.tsx
(2,25): error TS2307: Cannot find module '~react-redux~redux'.

ERROR in ./src/app/containers/App.tsx
(60,3): error TS2345: Argument of type 'typeof App' is not assignable to parameter of type 'ComponentClass<{ todos: any; } & { actions: { addTodo: (text: string) => { type: string; text: st...'.
  Type 'typeof App' is not assignable to type 'StatelessComponent<{ todos: any; } & { actions: { addTodo: (text: string) => { type: string; text...'.
    Type 'typeof App' provides no match for the signature '(props: { todos: any; } & { actions: { addTodo: (text: string) => { type: string; text: string; }; deleteTodo: (id: number) => { type: string; id: number; }; editTodo: (id: number, text: string) => { type: string; id: number; text: string; }; completeTodo: (id: number) => { type: string; id: number; }; completeAll: () => { type: string; }; clearCompleted: () => { type: string; }; }; } & { children?: ReactNode; }, context?: any): ReactElement<any>'

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-react": {
    "version": "1.0.0-rc2",
    "props": {
      "framework": "react",
      "modules": "webpack",
      "js": "typescript",
      "ci": [
        "travis"
      ],
      "css": "scss",
      "resolved": "/Users/zoltan/.nvm/versions/node/v6.9.2/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-react/generators/app/index.js",
      "namespace": "fountain-react",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "todoMVC",
      "router": "router"
    }
  }
}

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

$ node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"

Node.js v6.9.2
darwin 16.3.0

$ yo --version
1.8.5

$ npm --version
4.0.3

[damaspi]

Same here. First test with FountainJS,

? Which JavaScript framework do you want? React
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? TypeScript
? Which CSS preprocessor do you want? SASS
? Which Continuous Integration platform do you want? Jenkins (with Dockerfile)
? Do you want a sample app? Redux TodoMVC
? Would you like a router? React router

leads to

ERROR in ./src/index.tsx
(3,22): error TS2307: Cannot find module '~react-redux~redux'.

ERROR in ./src/app/containers/App.tsx
(2,25): error TS2307: Cannot find module '~react-redux~redux'.

ERROR in ./src/app/containers/App.tsx
(60,3): error TS2345: Argument of type 'typeof App' is not assignable to parameter of type 'ComponentClass<{ todos: any; } & { actions: { addTodo: (text: string) => { type: string; text: st...'.
  Type 'typeof App' is not assignable to type 'StatelessComponent<{ todos: any; } & { actions: { addTodo: (text: string) => { type: string; text...'.
    Type 'typeof App' provides no match for the signature '(props: { todos: any; } & { actions: { addTodo: (text: string) => { type: string; text: string; }; deleteTodo: (id: number) => { type: string; id: number; }; editTodo: (id: number, text: string) => { type: string; id: number; text: string; }; completeTodo: (id: number) => { type: string; id: number; }; completeAll: () => { type: string; }; clearCompleted: () => { type: string; }; }; } & { children?: ReactNode; }, context?: any): ReactElement<any>

[damaspi]

This addition was committed by @micaelmbagira on the 10th of August. Maybe he can tell the intentions and say where this file should come from?

[damaspi]

The issue does not appear if using Babel instead of TypeScript

[ahimta]

You can fix this by simply replacing 'ts-loader' with the following: 'ts-loader?' + JSON.stringify({ignoreDiagnostics:[2345, 2307]}).

You can find 'ts-loader' it in conf/{webpack.conf.js,webpack-dist.conf.js,webpack-test.conf.js}

[damaspi]

@Ahimta

1. Thanks, it works
2. I am no idea what I am doing (insert dog meme here)
3. It seems like it is a workaround - what is the root cause ?

[ahimta]

I just encountered this today, so I can't tell for sure; I've only used FountainJS with SystemJS and NPM before. But, to me, it seems mostly related to a Webpack error plugin and ts-loader.

The change I suggested above just silents the 2 error types caused by the FountainJS boilerplate. For a more comprehensive solution, I'd bet my money on the ts-loader documentation.

[sergous]

Update yo to latest generator-fountain-react 1.0.0 and change '~react-redux~redux' to '~react-redux~redux/redux' works for me.

[bradharms]

For the life of me I couldn't figure out what that weird tilde syntax was supposed to be. So instead I just manually traced the return value of configureStore() back to its source with some help from VSCode's "go to definition" feature. Its supposed to be referring to the Store interface from the typings for the "redux" module. So I replaced the import:

import {IStore} from '~react-redux~redux';

with

import {Store} from 'redux';

Then, anywhere I had a reference to IStore I just replaced it with Store.

However, none of it is really necessary because TypeScript can correctly infer that the return value of configureStore() is Store and so you can just do this:

const store = configureStore({});

Then you can just delete the import entirely.