Imported function is undefined in React

javascript import undefined
webpack import undefined
component is undefined react
imported module undefined
react function returning undefined
import function
node import as
es6 import * as

In file1.js:

const doSomething = () => {
  console.log('yay');
};

export { doSomething }; //simplified, not using export default due to multiple exports

In file2.jsx:

import { doSomething } from './file1.js';

doSomething(); //undefined 

Been trying to solve this for a while now. Trying to import this method from one class and add it as an onClick for a component, but it's always undefined. Help would be appreciated

edit1: fixed import in simplified code

You can try this. import file1.js in file2.js like this

import * as demo from './file1.js';

and call your function like this

demo.doSomething()

When using ES6, how can an imported function be undefined in one , This shouldn't work in either case because you are importing the wrong values. import foo from '' imports the default export of the module, but  Imported objects and functions are undefined In reducer I'm trying to console object NOTIFICATION_SERVICE which is defined above, and then I get undefined in console. This issue causes other issues by chain.

The problem is you are calling the functions which will not return anything.

if you do console.log(doSomething()), you will get logs like this.

yay //you called a functions its executed
undefined // you called a function which will not return anything

first log is from doSomething file1.js file.

second log is from file2.jsx

Imported objects and functions are undefined · Issue #7249 , Imported objects and functions are undefined #7249 16.8.6 react-scripts: ^3.0.1 => 3.0.1 npmGlobalPackages: create-react-app: Not Found. react example - TypeError: __WEBPACK_IMPORTED_MODULE_4_react_onsenui___default.a is undefined #2149 ulf1 opened this issue Aug 18, 2017 · 2 comments Comments

fil1.js

export const doSomething = () => {
    console.log('yay');
};

file2.js

import { doSomething } from './file1.js';

doSomething();

Component returns undefined outside render function · Issue , React component imported from index.js file, which exports all components in one place returns undefined outside render function in container  Bug - The return value of a native module function is undefined when accessed in a React component.

JSX In Depth – React, import React from 'react'; const MyComponents = { DatePicker: function Conversely, if you want a value like false , true , null , or undefined to appear in the  I realise this is probably more an issue with my setup files, or webpack or something, but I'm hoping to find some help. I'm trying to connect actions to a nested component, but I'm only getting dispatch as property.

React Function Components, Note: If a Function Component is not defined, console log your exports and imports to get a  React components using ES6 classes no longer autobind this to non React methods. In your constructor, add: In your constructor, add: this.onChange = this.onChange.bind(this)

Module Methods, Named exports export var Count = 5; export function Multiply(a, b) { return a * b; } The ES2015 Loader spec defines import() as method to load ES2015 modules require.cache[module.id]; require.cache[module.id] === undefined; require('. (SSR + Code Splitting), as used in packages such as react-universal-component. Hooks are functions that let you “hook into” React features from function components. Their names always start with use, and there are more Hooks we haven’t seen yet. Now let’s continue by learning the next Hook: useEffect. It lets you perform side effects in components, and is similar to lifecycle methods in classes.

Comments
  • explain in detail with code
  • @VaibhavS The code that's already been posted looks like a complete repro of the problem to me. What do you think is missing?
  • The code provided is just a simplified version of the actual code. There is a function in one file, I wish to export that function and call it in another file.
  • I'm not sure what's the cause of your problem in the code you posted. See this example: codesandbox.io/s/v6vp81657l Is that different than what you're trying to achieve?
  • Nope, that's pretty much the same. The function I'm trying to export just isn't getting exported (console logging what was imported shows 2 out of 3 exported functions, the missing one being the one I want)
  • This got me a little further. Looks like my method isn't actually being exported. Doing a console.log(demo) returns the 2 other functions I'm exporting, but not the desired one.
  • try this export const doSomething = () => { console.log('yay'); };
  • The import path is correct, that's just a mistake in my simplified repro. Mb
  • just now i notice you trying import into jsx file. maybe it's different
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.