[1.3b11] Challenges with import and file location

Just checking in to see if this is just me doing something stupid.
I’ve started a fresh Meteor app, beta #11.

I’m all for using React, so I followed Arunoda’s great tutorial here: https://voice.kadira.io/getting-started-with-meteor-1-3-and-react-15e071e41cd1#.xt2t9ful4

The issue I am having is with the router code and the imports, in Arunoda’s code he has:

import {Layout, Welcome} from './app.jsx';

And from other Meteor documents I have read you don’t even need the extension, so technically this should work:

import {Layout, Welcome} from './app';

Anyhow - my app doesn’t work unless I provide this path:

import {Layout, Welcome} from '../client/app.jsx';

Both app.jsx and the router.jsx are in the same folder, named ‘client’.

This is just ES6 imports, if no file type is passed it assumes a .js file, in this case you’re using a .jsx file which vanilla JS doesn’t understand, thus you need to provide the filetype.

I thought if importing from a .jsx file it might work, matching the extension and all.
Anyway - why doesn’t this work then:

import {Layout, Welcome} from './app.jsx';

This also doesn’t work

import {Layout, Welcome} from 'app.jsx';

app.jsx and router.jsx are both in the same client directory…

Did you install the jsx package from atmosphere? If you did not, then jsx is not being compiled.

I didn’t install that, just the beta, but jsx does work because if I use this:

import {Layout, Welcome} from '../client/app.jsx';

It works fine…

You are right, jsx seems to be no longer needed for compilation.[quote=“cstrat, post:3, topic:18510, full:true”]
I thought if importing from a .jsx file it might work, matching the extension and all.Anyway - why doesn’t this work then:

import {Layout, Welcome} from ‘./app.jsx’;

[/quote]

But this works fine for me and here’s a quick example for you:

import React from 'react';
import AuthContainer from '../../container/AuthContainer.jsx';

import HeaderNav from './HeaderNav.jsx'
const MainLayout = ({content}) => (
  <div>
    <HeaderNav />
    <main>
      <AuthContainer>
        {content()}
      </AuthContainer>
    </main>
  </div>
);

export default MainLayout;

If they’re in the same folder you should be able to just use import routes from './app.jsx';, as for the path of AuthContainer I’d recommend you use absolute paths eg. import Downloader from '/client/modules/core/components/downloader.jsx'; I tend to find them easier and faster to understand, especially with a team.

Unfortunately though I’m not sure why ./app.jsx isn’t working for you… if they’re in the same folder that should be fine. The fact you’re having to leave the folder then reenter it means either its a very strange bug indeed, or they’re not actually in the same folder.

1 Like

I’ll add my current issues to the mix.

All of my imports were working fine using absolute paths. However when I updated to beta 11 (and now beta 12) they all fail on build with an Error: Cannot find module.

Any insights? Is this a bug in the beta release, or something else entirely?

Just thought i would update the thread to say that this no longer is an issue with Beta 12…

1 Like