Import doesn't work

[WebDeg-Brian]

Hi there, I just downloaded your package recently. I put all my assets (images, audio, etc.) in the public/ folder. The following line of code didn't work:

import BackgroundImg from '/public/images/hero-banner.jpg'

I have checked and I'm certain that the above directory is correct. What am I doing wrong?

[akanix42]

Meteor doesn't compile assets in the public folder, so this plugin can't read them - try putting them in another directory such as assets.

[WebDeg-Brian]

@nathantreid changed the directory name from public/ to assets/, didn't help. Also tried to put assets folder inside imports/, didn't work either. My project repo: https://www.github.com/WebDeg-Brian/eagle-nest.
The image is in the assets/ folder while the file importing it is in /imports/ui/components/presentational/hero-banner/HeroBackground.js

[akanix42]

Just an update - I've been extremely busy of late and haven't been able to get to this yet. It's still on my radar!

[WebDeg-Brian]

As long as you help me figure this out, I don't mind how long it is

[akanix42]

OK, based on the repo there were 2 issues:

1. My plugin didn't support Meteor 1.8 - I had to publish an update for that.
2. My plugin wasn't included in your project - run meteor add nathantreid:static-assets.

After performing step 2, you can switch to using an import statement:

import backgroundImg from '/images/hero-banner.jpg'
// const backgroundImg = '/images/hero-banner.jpg';

export default Background = props => <StyledHeroBackground image={backgroundImg} />

As noted previously, you'll need to move the images somewhere other than the public folder - in the example above I moved the images folder to directly under the project root.

I also noticed that you are using the Meteor mainModule option in package.json - since you are doing that, you don't need the imports folder anymore. Meteor will only load files that are loaded via your mainModule. Quoting from the 1.7 release notes for clarity:

Applications may now specify client and server entry point modules in a newly-supported "meteor" section of package.json:

  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    }
  }

When specified, these entry points override Meteor's default module loading semantics, rendering imports directories unnecessary.

[WebDeg-Brian]

Hi! It's been such a long time! Intially I was using your plugin in my project and my assets weren't in the public folder. I followed all the steps you told me above, but as time went on, i realised I had to continue with the project. Thanks for your support anyways!
@nathantreid