CODEWITHSUNDEEP
reactjstypescriptredux
Julie
Julie

Reputation: 23

Declaration or statement expected when exporting

I'm exporting all my reducers from this index.js like this:

export checking from 'reducers/Checking';
export saving from 'reducers/Saving';
export overdraft from 'reducers/Overdraft';
..........

I started getting the following error on every line above ^, when I try to integrate Typescript into my project:

 Declaration or statement expected

I have stage-0 in my presets to support that kind of syntax, but still getting that error.

tsconfig.json

Could anybody direct me to how towards how get rid of that error?

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "es2015",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Upvotes: 1

Views: 1908

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074028

The problem is that the form of export you're using doesn't exist. You can find a list of the forms in the spec here, but there isn't an export x from "y" form.

It looks to me like you're trying to re-export the default export of each of those modules as a named export. That is, you have export default ... in reducers/Checking.ts (for example) and want to re-export that from index.ts as checking. If so, you have to use the named form and the identifier default explicitly:

// Re-exports the default export of each module
export { default as checking } from 'reducers/Checking';
export { default as saving } from 'reducers/Saving';
export { default as overdraft } from 'reducers/Overdraft';

But if you have named exports like export const checking ... in reducers/Checking.ts (for example) and you're trying to re-export all of its named exports from index.ts, you'd do it like this:

// Re-exports all named exports from each module:
export * from 'reducers/Checking';
export * from 'reducers/Saving';
export * from 'reducers/Overdraft';

Or if you were trying to export just a single named export, you'd do it like this:

// Re-exports a named export from each module:
export { checking } from 'reducers/Checking';
export { saving } from 'reducers/Saving';
export { overdraft } from 'reducers/Overdraft';

Finally, if you were trying to export a module namespace object for each of those modules (an object with a property for each of the module's exports), you'd do it like this:

// Re-exports a named export from each module:
export * as checking from 'reducers/Checking';
export * as saving from 'reducers/Saving';
export * as overdraft from 'reducers/Overdraft';

All of the above assume reducers is in node_modules. If it's your own directory instead, you need ./ at the beginning of those module specifiers (from './reducers/Checking' instead of from 'reducers/Checking').

Separately: To use JavaScript module syntax (often called ESM for ECMAScript Modules), you need tell TypeScript that's what you're doing. There are a couple of ways to do that:

  1. If you have "target": "ES6" or higher, TypeScript will assume you're using JavaScript modules (instead of CommonJS etc.)

  2. You can use "module": "ES2015" to explicitly opt into JavaScript modules.

Upvotes: 1

Jay Parmar
Jay Parmar

Reputation: 378

export * from 'reducers/Checking';
export * from 'reducers/Saving';
export * from 'reducers/Overdraft';

You have to try this.

Upvotes: 1

Related Questions