Importing Assets - Image

help
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?

1 Like
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
5

@trusktr 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
8

Hi @nathantreid your static-assets package is awesomely useful and easy to use! Thank you for that. I’m having a bit of a problem here.

Uncaught Error: Cannot find module '../../static/discoverbg.svg'
    at makeMissingError (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232)
    at Module.resolve (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238)
    at Module.moduleLink [as link] (modules.js?hash=cb76b9f27e3c8140dd046996f49eb9fe79f527a4:319)
    at module (discover.js:1)
    at dynamic-import.js?hash=61f4f0f2ea27a6442d97838d5438e820a2713243:143
    at fileEvaluate (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346)
    at Module.require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248)
    at Module.moduleLink [as link] (modules.js?hash=cb76b9f27e3c8140dd046996f49eb9fe79f527a4:326)
    at getNamespace (dynamic-import.js?hash=61f4f0f2ea27a6442d97838d5438e820a2713243:211)
    at dynamic-import.js?hash=61f4f0f2ea27a6442d97838d5438e820a2713243:46

This happened every time the meteor server initial start. However the problem went away if i force the meteor to recompile by adding few spaces in any file. Tested with --production and the problem persisted.

Has anyone encountered this problem?

Extra info:

  • Meteor version: Meteor@2.0 (problem persisted in Meteor@1.12.1 too)
  • The svgs are placed in imports/static