6

I currently have my project folder as such

app - node_modules - public - src - Assets - Components - profiles - homepage - gulpfile

In my homepage component, I am trying to import the whole directory of profiles into an object like this (dynamically load each component as needed, but not all components will be loaded)

import Comps from '../profiles/';

also

import * as Comps from '../profiles/;

but I get an error in the compiler saying Module not found: Can't resolve '../profile.

I want to make it clear that profiles is a folder with components, and I want to select all components to call dynamically in my app.js file.

Why is this happening?

Improve this question
5
  • Can you please expand/elaborate your file structure. What is "profiles" and what is "profile"? Commented Feb 1, 2018 at 1:59
  • oh I apologize, I changed part of the code and recopied it, that was just a mistake on my part. @5ar Commented Feb 1, 2018 at 2:00
  • If you are trying to import a folder (correct me if this is not the case), this might be something that interests you: stackoverflow.com/questions/29722270/… Commented Feb 1, 2018 at 2:02
  • Wow thank you!! this is exactly what I was looking for, just didn't word it correctly Commented Feb 1, 2018 at 2:07
  • No problem, some mod should soon get around marking this as a duplicate. Good luck with your project :) Commented Feb 1, 2018 at 2:12

1 Answer 1

Reset to default
-1

Do you have several components in one js file, if so - you could do something like this:

Profiles.js:

import React from 'react'; export const ViewA = () => { return( <div>A VIEW</div>) }; export const ViewB = () => { return( <div>B VIEW</div>) }; export const ViewC = () => { return( <div>C VIEW</div>) }; export const ViewD = () => { return( <div>D VIEW</div>) };

App.js:

import React, { Component, PropTypes } from 'react' import * as Profiles from './Profiles'; class App extends Component { render(){ return ( <div> <Profiles.ViewA/> <Profiles.ViewB/> <Profiles.ViewC/> </div> ) } } export default App;
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I do not, I am rendering a paragraph to test it.so I have one component called user and rendering a <p> and at the bottom, I have export default user
did you try './profiles' vs '../profile' - they are in the same directory right?
Under components folder, there is a homepage rendering homepage components. If clicked a link to another page for a user/profile, it should go up one directory into components and into users and there will be multiple components there, but I want all to be readily available to be called, not necessarily calling the components

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.