0

I've got a React project where I keep all components available through a single file, so instead of doing

import Foo from "./Foo.js"
import Bar from "./Bar.js"

I've got a components.js-file with 

export Foo from "./Foo.js"
export Bar from "./Bar.js"

so I can do 

import { Foo, Bar } from "./components.js"

My problem is that Foo, Bar, and anything else I import this way is undefined for the first "event queue", that is, if I have this file

import { Foo, Bar } from "./components.js"

console.log("FOO1", !!Foo, !!Bar)
window.setTimeout(() => {
    console.log("FOO2", !!Foo, !!Bar)
}, 0)

it will output

FOO1 false false
FOO2 true true

This hasn't caused any trouble for with plain React components (functions nor classes), but when I try to use Redux's connect-function to create a container component, it complains about the input being undefined. I guess this is because when I declare React components, the references aren't, well, referenced directly, but when I call the connect-function, it immediately tries to access the component and sees that it's undefined. This is just my uneducated hypothesis though.

Why does this happen and how can I prevent it? I thought it might've been a problem with the Stage 1 transform-export-extensions plugin, but I've used different syntax - e.g. export const Foo = require("./Foo").default - in components.js and the problem persists.

dontexist
  • 5,252
  • 4
  • 27
  • 51
  • How are you loading these files (webpack, node, something else)? How are `Foo` and `Bar` exported by their original modules? – ssube Jun 16 '16 at 18:27
  • 2
    Usually this means you have some circular dependencies, so your code is executing before they have actually been exported. – loganfsmyth Jun 16 '16 at 18:38
  • @ssube I'm bundling it all up with Webpack to be used through a browser. – dontexist Jun 16 '16 at 20:19
  • @loganfsmyth Thank you, I'll look into that and see if I can find something obvious. – dontexist Jun 16 '16 at 20:19
  • @loganfsmyth Yeah, looks like you were right. The problems seem to stem from the fact that the things I'm exporting from `components.js` also import stuff from `components.js`. Any idea if there's a way to solve this and still have a module file? – dontexist Jun 16 '16 at 20:29
  • 1
    You'd need to rearrange your files so that things rely on eachother in a non-circular way. – loganfsmyth Jun 16 '16 at 23:32

0 Answers0