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?

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

1 Answers1

-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;
baseem
  • 132
  • 5
  • I do not, I am rendering a paragraph to test it.so I have one component called user and rendering a

    and at the bottom, I have export default user

     – IAC93 Feb 01 '18 at 01:40
  • did you try './profiles' vs '../profile' - they are in the same directory right? – baseem Feb 01 '18 at 01:48
  • 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 – IAC93 Feb 01 '18 at 01:51