如何在反应中正确导入和导出模块 typescript

Question

I am having trouble with some basic module importing and exporting in react typescript. Exporting as follows:

//gameStateReducer.ts
import { Action, ActionKind, GameState } from './types';

export const gameStateReducer = (
  gameState: GameState,
  action: Action
): GameState => {

  //yada yada yada
};

and importing as:

//index.tsx
import { gameStateReducer } from './gameStateReducer';

The error message is:

Compiled with problems:

ERROR in ./src/index.tsx 9:0-54

Module not found: Error: Can't resolve './gameStateReducer' in '/Users/REDACTED/Documents/development/react-js/wordle/src'

This was all working when I was developing the same project on stackblitz, but trouble came when I began working locally with create-react-app.

I'm having the same problem with my constants module.

I've read typescript's reference page on exports and imports, and as a matter of fact, my types and interfaces are importing and exporting just fine.

I've tried importing and exporting to default with no luck.

Gotta be something simple I'm missing here. Thanks!

Answer 1

The way you added import this should work. I hope your directory structure is like

src

• gameStateReducer.ts
• index.ts

if your gameStateReducer.ts is under different directory then you should update import path to that directory.

for example, if you have structure like below

src

• anotherDirectory -> gameStateReducer.ts
• index.ts

then update import statement to this

import { gameStateReducer } from './anotherDirectory/gameStateReducer';