Getting Cannot find module '~react-redux~redux'. error and react app "Redux TodoMVC" run with blank screen.

[mehulmali]

Hello, I created project with config bellow:

? 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? Less ? Which Continuous Integration platform do you want? travis ? Do you want a sample app? Redux TodoMVC ? Would you like a router? React router

Afterit I have run 'npm install' then I have run project with: npm run serve

I am getting following errors

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 paramet er 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; }; de leteTodo: (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; }, cont ext?: any): ReactElement'

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

And when I am trying to access http://localhost:3000 in browser I am only see blank screen. not run todoMVC app

[benharrison]

I'm also experiencing this exact issue with React and TypeScript. As well as different errors for each of the other sample apps.

? 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? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
? Do you want a sample app? A working landing page
? Would you like a router? React router

ERROR in ./src/app/title.tsx
(37,12): error TS2322: Type '{ style: { display: string; flexDirection: string; alignItems: string; padding: string; backgroun...' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Types of property 'style' are incompatible.
    Type '{ display: string; flexDirection: string; alignItems: string; padding: string; backgroundColor: s...' is not assignable to type 'CSSProperties'.
      Types of property 'alignItems' are incompatible.
        Type 'string' is not assignable to type '"center" | "initial" | "inherit" | "unset" | "flex-start" | "flex-end" | "baseline" | "stretch"'.

ERROR in ./src/app/main.tsx
(27,12): error TS2322: Type '{ style: { display: string; flexDirection: string; minHeight: string; }; children: Element[]; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Types of property 'style' are incompatible.
    Type '{ display: string; flexDirection: string; minHeight: string; }' is not assignable to type 'CSSProperties'.
      Types of property 'flexDirection' are incompatible.
        Type 'string' is not assignable to type '"column" | "initial" | "inherit" | "unset" | "row" | "row-reverse" | "column-reverse"'.

ERROR in ./src/app/main.tsx
(29,15): error TS2322: Type '{ style: { flex: number; display: string; flexDirection: string; }; children: Element[]; }' is not assignable to type 'HTMLProps<HTMLElement>'.
  Types of property 'style' are incompatible.
    Type '{ flex: number; display: string; flexDirection: string; }' is not assignable to type 'CSSProperties'.
      Types of property 'flexDirection' are incompatible.
        Type 'string' is not assignable to type '"column" | "initial" | "inherit" | "unset" | "row" | "row-reverse" | "column-reverse"'.

ERROR in ./src/app/header.tsx
(29,15): error TS2322: Type '{ style: { display: string; alignItems: string; backgroundColor: string; }; children: Element[]; }' is not assignable to type 'HTMLProps<HTMLElement>'.
  Types of property 'style' are incompatible.
    Type '{ display: string; alignItems: string; backgroundColor: string; }' is not assignable to type 'CSSProperties'.
      Types of property 'alignItems' are incompatible.
        Type 'string' is not assignable to type '"center" | "initial" | "inherit" | "unset" | "flex-start" | "flex-end" | "baseline" | "stretch"'.

? 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? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
? Do you want a sample app? Just a Hello World
? Would you like a router? React router

ERROR in /Users/beharrison/Documents/dev/Ben Harrison/new-project/src/app/hello.spec.tsx
(8,58): error TS2345: Argument of type 'void | Element | Component<any, {}>' is not assignable to parameter of type 'Component<any, any>'.
  Type 'void' is not assignable to type 'Component<any, any>'.

? 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? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
? Do you want a sample app? Redux TodoMVC
? Would you like a router? React router

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 'Component<{ todos: any; } & { actions: { addTodo: (text: string) => { type: string; text: string;...'.
  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>'.

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

[byronigoe]

Still an issue. Immediately after installation, running the build results in an error on the line: import {IDispatch} from '~react-redux~redux';

[JoshuaToth]

It looks like there us a workaround in this thread here and that.. seems to work?

I also have no idea what the tilde syntax is doing..

[pdemro]

Nodejs 8.6.0 npm install -g gulp-cli yo generator-fountain-webapp yo fountain-webapp

Same issue here