Ufdjrw

Denied boarding although I have proper visa and documentation. To whom should I make a complaint?

How to install press fit bottom bracket into new frame

Did Krishna say in Bhagavad Gita "I am in every living being"

What was the first language to use conditional keywords?

Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?

What is a fractional matching?

Most bit efficient text communication method?

Generate an RGB colour grid

Morning, Afternoon, Night Kanji

What do you call the main part of a joke?

Is there a kind of relay only consumes power when switching?

What is the topology associated with the algebras for the ultrafilter monad?

Performance gap between vector<bool> and array

Is there hard evidence that the grant peer review system performs significantly better than random?

Is there any word for a place full of confusion?

AppleTVs create a chatty alternate WiFi network

Amount of permutations on an NxNxN Rubik's Cube

How does light 'choose' between wave and particle behaviour?

Why is the AVR GCC compiler using a full `CALL` even though I have set the `-mshort-calls` flag?

Did Deadpool rescue all of the X-Force?

Hangman Game with C++

Selecting user stories during sprint planning

How to react to hostile behavior from a senior developer?

Significance of Cersei's obsession with elephants?

Export / import const in typescript 3

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

Here is my first part code in Hello.tsx :

import * as React from "react";

export interface HelloProps compiler: string; framework: string; 
const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

export default Hello;

And i'am trying to import it in index.tsx :

import * as React from "react";
import * as ReactDOM from "react-dom";

import Hello from "./components/Hello";

ReactDOM.render(
 <Hello compiler="TypeScript" framework="React" />,
 document.getElementById("example")
);

But i have a :

Module '"./components/Hello"' has no exported member 'Hello'.ts(2305)

Error.

typescript

share|improve this question

asked Mar 8 at 20:22

user462794user462794

26332051

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  loose the default and you'll be fine.
  
  – toskv
  Mar 8 at 21:25
  

  
  
  
  

add a comment | 

0

Here is my first part code in Hello.tsx :

import * as React from "react";

export interface HelloProps compiler: string; framework: string; 
const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

export default Hello;

And i'am trying to import it in index.tsx :

import * as React from "react";
import * as ReactDOM from "react-dom";

import Hello from "./components/Hello";

ReactDOM.render(
 <Hello compiler="TypeScript" framework="React" />,
 document.getElementById("example")
);

But i have a :

Module '"./components/Hello"' has no exported member 'Hello'.ts(2305)

Error.

typescript

share|improve this question

asked Mar 8 at 20:22

user462794user462794

26332051

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  loose the default and you'll be fine.
  
  – toskv
  Mar 8 at 21:25
  

  
  
  
  

add a comment | 

Here is my first part code in Hello.tsx :

import * as React from "react";

export interface HelloProps compiler: string; framework: string; 
const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

export default Hello;

And i'am trying to import it in index.tsx :

import * as React from "react";
import * as ReactDOM from "react-dom";

import Hello from "./components/Hello";

ReactDOM.render(
 <Hello compiler="TypeScript" framework="React" />,
 document.getElementById("example")
);

But i have a :

Module '"./components/Hello"' has no exported member 'Hello'.ts(2305)

Error.

typescript

share|improve this question

asked Mar 8 at 20:22

user462794user462794

26332051

import * as React from "react";

export interface HelloProps compiler: string; framework: string; 
const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

export default Hello;

import * as React from "react";
import * as ReactDOM from "react-dom";

import Hello from "./components/Hello";

ReactDOM.render(
 <Hello compiler="TypeScript" framework="React" />,
 document.getElementById("example")
);

share|improve this question

asked Mar 8 at 20:22

user462794user462794

26332051

share|improve this question

asked Mar 8 at 20:22

user462794user462794

26332051

asked Mar 8 at 20:22

user462794user462794

26332051

asked Mar 8 at 20:22

user462794user462794

26332051

1 Answer
1

active

oldest

votes

1

You are exporting Hello as the default export but importing it as a named export.

Instead, either import it as a default export with this line:

import Hello from "./components/Hello";

or export it as a named export by getting rid of the export default Hello; and exporting it like this:

export const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

share|improve this answer

answered Mar 8 at 21:28

NicholasNicholas

33119

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55070496%2fexport-import-const-in-typescript-3%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You are exporting Hello as the default export but importing it as a named export.

Instead, either import it as a default export with this line:

import Hello from "./components/Hello";

or export it as a named export by getting rid of the export default Hello; and exporting it like this:

export const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

share|improve this answer

answered Mar 8 at 21:28

NicholasNicholas

33119

add a comment | 

1

You are exporting Hello as the default export but importing it as a named export.

Instead, either import it as a default export with this line:

import Hello from "./components/Hello";

or export it as a named export by getting rid of the export default Hello; and exporting it like this:

export const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

share|improve this answer

answered Mar 8 at 21:28

NicholasNicholas

33119

add a comment | 

You are exporting Hello as the default export but importing it as a named export.

Instead, either import it as a default export with this line:

import Hello from "./components/Hello";

or export it as a named export by getting rid of the export default Hello; and exporting it like this:

export const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

share|improve this answer

answered Mar 8 at 21:28

NicholasNicholas

33119

import Hello from "./components/Hello";

export const Hello = (props: HelloProps) => <h1>Hello from props.compiler and props.framework!</h1>;

share|improve this answer

answered Mar 8 at 21:28

NicholasNicholas

33119

answered Mar 8 at 21:28

NicholasNicholas

33119

answered Mar 8 at 21:28

NicholasNicholas

33119