ES6 Modules and importing across client/ and server/ environments [SOLVED]

help
1

Hello my excuses if this is basic but Im having a funny time trying to figure out how to solve this issue.

My project structure is like this:

-root
–client
----components
-----layout
… MainLayout.jsx
–server
–lib
… routes.jsx

If I try to import in my routes.jsx file like this ‘./…/client/components/layout/MainLayout.jsx’ I get the error 'Cannot find module './…/client/components/layout/MainLayout.jsx…

However if I move MainLayout.jsx to the root folder, i can reach the component file like this without problems ‘./…/MainLayout.jsx’.

I expected that once I got the root path then it would be so simple to put the directory tree as usual, but still having the error.

2

Have you tried '../client/components/layout/MainLayout.jsx'?

EDIT: forgot to change the path. :slight_smile:

3

I’ve noticed this is the convention of importing files. At least that’s the most common way I’ve seen it being used. So maybe there’s a bug in your use-case.

4

I’ve tried almost all the possible combinations :grin: still the same problem. The thing that annoys
me the most is that I can move that file to the root an get the app running so don’t think the use-case will be so different when the file is deep within the folder structure than when it’s at the root level.

Thank you for your time anyway!!

5

No problem. :slight_smile: If you have source available somewhere, I can have a look if you want.

6

I’m just guessing here, but it might be something about importing a client/ resource from the shared lib/ folder? Try putting a file in e.g. client/lib and then importing from there your MainLayout.jsx and see what happens. The current beta/RC still has bugs and it wouldn’t be hard to imagine one like this.
Usually you’d want to import things in /lib from e.g. client/something and server/something, not import something client- or server-specific into the shared /lib folder.

Actually, thinking about it – yeah, that’s very likely to be the problem here. And it’s not even a bug, is it? It doesn’t make sense to make client-only or server-only code available for import into a shared module. Or, well, with Meteor’s Meteor.isClient/.isServer it’s not quite as nonsensical, but still somewhat counterintuitive. I wouldn’t be surprised if the loader that resolves the imports simply does not make the client-/server-specific modules available to shared modules! (If that language makes enough sense.)

EDIT:
Or to put my initial instructions on their head – if MainLayout.jsx is not a client-only module, then you should not put it in the client/ folder. Put it in /lib/layout or something. If it’s supposed to be shared by client and server it needs to find a better home. :slight_smile:

ps. If this is what the problem turns out to be about, then I’d suggest editing this thread’s topic to something like: “ES6 Modules and importing across client/ and server/ environments [solved]”, to allow google and others to categorize this content better!

pps. Final one – if you want to use relative imports, then both ‘…’ and ‘.’ at the beginning of the import path are fine on their own for denoting a relative path. ‘./…’ is redundant and not necessary. Just so you can know you’ve learned something (more) today :slight_smile:

7

Thanks seeker, I will try this out tomorrow morning, now I have to get back home was a tough day here!.

8

Hello, I tried what you suggested and it seems you were right, I changed the file to another place within the /lib folder, i.e.:

–client
–lib
—collections
------MainLayout.jsx
– routes.jsx
–server

Also changed the import statement to point to that file: import MainLayout from ‘/lib/collections/MainLayout.jsx’ and the project was built without errors.

For me MainLayout is a client only module, it has this simple logic:

import React from 'react'

export default class MainLayout extends React.Component {
  render(){
     return (
          <div>
              {this.props.header}
              {this.props.content}
              {this.props.footer}
          </div>
        )
   }
}

In fact what I’m trying to get is how to structure my project, and it seems that the old way with client, lib, server structure does not work with new ES6 modules… going to try out Mantra to check how is defined Arunoda’s arquitecture.

Thank you for your tips and advice!.