Importing Assets - Image

#1

Hey all, I am having a little bit of an issue thats driving me crazy. I recently made an app using the react-create-app generator and then I took the code from it and used some of it in a meteor 1.4 app, there is one section in the App.js file of the react app import logo from './logo.svg'; so that { logo } can be used that is working in the react app but when I try to use this in the meteor react app its giving me a cannot find module error. I have researched this but Im either not wording it right or not asking the right question. Any help is appreciated. Thanks!

1 Like
#2

From what I understand, Meteor won’t let you do stuff like import SVG from '../file.svg' or const SVG = require('../file.svg') in client code atm.

You can use something like Meteor methods and the Assets API to get most any data from your server though. Something like

/server/main.js

Meteor.methods({
  'svg.get'(data) {
    return Assets.getText(data.path)
  }
})

and

/client/main.js

  const getSVG = async (path) => {
    return await new Promise((resolve, reject) => {
      Meteor.call('svg.get', { path }, (err, res) => {
        if (err) reject('Something went wrong')
        resolve(res)
      })
    })
  }

const SVG = await getSVG('some/path/relative/to/private/file.svg')

where your SVG file is under /private somewhere. Maybe not as elegant, but it’s pretty secure (if you limit the path and do validation in your server code) and works.

2 Likes
#3

Im using a npm package that is doing import icons from 'trumbowyg/dist/ui/icons.svg';. Which gives me Cannot find module 'trumbowyg/dist/ui/icons.svg'.
So the package is built to work with Webpack. Is there anyway I can configure Meteor to work with this or I have to customize the package myself?

#4

Meteor 1.6.2 will (hopefully) allow transpiling of files in node_modules. It is also possible to make a build plugin that will import assets like images. That’d be a great contribution. :slight_smile:

2 Likes
Static Assets compiler released - import images, etc into your JS files
#5

@joe thanks to your post, now it’s a possibility! Static Assets compiler released - import images, etc into your JS files

4 Likes
#6

Saweeeeeeeeet!!! This is cool!

1 Like
#7

This is not working for me in Meteor-React 1.7+.

I20180606-11:42:09.264(-3)? Exception while invoking method 'svg.get' Error: Unknown asset: /var/www/coreui-meteor-react/public/img/brand/logo.svg
I20180606-11:42:09.392(-3)?     at getAsset (/var/www/coreui-meteor-react/.meteor/local/build/programs/server/boot.js:329:19)
I20180606-11:42:09.392(-3)?     at Object.getText (/var/www/coreui-meteor-react/.meteor/local/build/programs/server/boot.js:340:16)
I20180606-11:42:09.393(-3)?     at MethodInvocation.svg.get (server/main.js:6:21)
I20180606-11:42:09.393(-3)?     at maybeAuditArgumentChecks (packages/ddp-server/livedata_server.js:1767:12)
I20180606-11:42:09.393(-3)?     at DDP._CurrentMethodInvocation.withValue (packages/ddp-server/livedata_server.js:719:19)
I20180606-11:42:09.393(-3)?     at Meteor.EnvironmentVariable.EVp.withValue (packages/meteor.js:1189:12)
I20180606-11:42:09.394(-3)?     at DDPServer._CurrentWriteFence.withValue (packages/ddp-server/livedata_server.js:717:46)
I20180606-11:42:09.394(-3)?     at Meteor.EnvironmentVariable.EVp.withValue (packages/meteor.js:1189:12)
I20180606-11:42:09.394(-3)?     at Promise (packages/ddp-server/livedata_server.js:715:46)
I20180606-11:42:09.394(-3)?     at new Promise (<anonymous>)
I20180606-11:42:09.395(-3)?     at Session.method (packages/ddp-server/livedata_server.js:689:23)
I20180606-11:42:09.395(-3)?     at packages/ddp-server/livedata_server.js:559:43