-
Notifications
You must be signed in to change notification settings - Fork 293
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Import order situation/strategies #130
Comments
Could you share the piece of code where you are trying to use the Most cases are solved this way: import styled from 'styled-components'
import { CComponent } from 'components'
// fails
const StyledCComponent = styled(CComponent)``
// good
const StyledCComponent = styled(props => <CComponent {...props} />)`` |
If I put |
Yeah, that's normal. This is a circular dependency and Node should be able to resolve this at runtime, thus wrapping the component. Can you try the code from my last comment? |
Ok I see the issue. I need to load the imported components into a lookup table so I can render the correct component based on the list of entries passed to my component. I get a list of entries from the database, a mixture of articles, slides, etc. I use a meta data field to determine which component should be used. Doing this:
would result in Testimonials being undefined and so I would get a React error. Moving the lookup creation into the |
Nice. Thank you for the feedback. :) |
I love the dynamic importing done with components in arc and have been using it in my latest Vue.js project. I've hit this circular component dependency issue before and finally managed to find a solution that works. I first iterate over all the components and export an empty object. Then I reiterate over all the components and actually start requiring them, merging each module into module.exports. I got the idea from how webpack manages circular dependencies. Here's the code I'm using: const merge = require('lodash/merge')
const req = require.context('.', true, /\.\/[^/]+\/[^/]+\.vue$/)
// This exports all components, resolving circular dependencies in two steps:
// 1. export empty objects in place of each component
// 2. require each component and merge it into the existing export for that module
const componentPaths = []
// export an empty object for each component
req.keys().forEach((key) => {
const componentName = key.replace(/^.+\/([^/]+)\.vue/, '$1')
componentPaths.push({ componentName, key })
module.exports[componentName] = {}
})
// actually start exporting each component
componentPaths.forEach(({ componentName, key }) => {
merge(module.exports[componentName], req(key).default)
}) |
@keego Wow! Do you know if that works with Also, I wonder if is that Anyway, it would be an amazing PR if you want to do that. |
@diegohaz Thanks! Unfortunately, I just verified it does not work with Also you're very much right about including 'lodash/merge' instead of 'lodash', I just use lodash so much in my project that I've started requiring the whole thing. I just updated my comment :) This mainly solves the specific issue described in the original post, and solves the circular dependency case for things that do allow for delayed evaluation (i.e. defining circular components in my vue project, and with certain cases of defining circular components in the arc project) I can put this into a PR this week 👍 |
following the comment i went from I get the following error : any help ? |
@lastmaj you should convert file extension to .jsx (or .tsx) and import React. otherwise it does not recognize react component. |
I've run into a situation where I have a component at trying to import another component at its same "level" (ie Molecule). If the name of the component that I'm importing falls before the importer component in the sort order, then everything imports correctly. However, if the name comes after, then the component imported is undefined.
Ex:
|- atoms
|- molecules
| |- AComponent
| |- BComponent
| |- CComponent
If BComponent has
import AComponent from 'components'
then everything is fine; AComponent is defined.But if BComponent has
import CComponent from 'components'
then there is a problem; CComponent is undefined.One way to solve that is to move BComponent up to Organism; but sometimes that could cause a chain reaction.
Another way is to
require
CComponent when needed if possible -- that's what I'm doing.Are there any other strategies to deal with this situation?
The text was updated successfully, but these errors were encountered: