[SOLVED] Static assets from NPM, double builds and lots of frustration

core
1

I’m a huge fan of Meteor and love to use it in a productive way for developing my applications. But this whole day, I didn’t advance in my project, as I had to investigate in a very special behavior.

Well, it started with using a PNG file, provided as part of an NPM package, lying in the node_modules folder. I wanted to use this in the application, in a way I am used to solve such a problem (like in Gatsby):

import CoolPNGFile from 'cool-node-module/dist/images/cool.png';

I expected support for such a thing in Meteor, but learned, that I need an additional package to get this working: nathantreid:static-assets

Thanks to @nathantreid for providing the package, now my application worked. I was happy.

The problems arose, when I wanted to roll out the updated application. This is done in a process, which clones the Git repository, performs meteor npm install and meteor build … --directory as well as the steps given in the bundle/README file. (See the whole script in https://github.com/qnipp/meteor-repository-build/blob/master/repository_build.sh)

Now, the application didn’t open in the browser, only an error Uncaught Error: Cannot find module ‘…’ was shown in the JavaScript console.

But, when I generated the bundle in my working directory (where I regularly run meteor in the development mode), the bundle worked.

After several builds, diffs, tries I found a way to make it work: Calling meteor build a second time in the repo clone produced a working bundle – at least in Meteor 1.8.1.

For writing the Github issues (#1 and #2), I tried 1.8.2 as well as 1.9-beta.3. For these versions, the workaround using the second build didn’t help. It seems to work in development mode, even with an error shown on the server, but the bundled application always gives the error in the browser.

If you want to try it for yourself, check out my repo set up for reproduction.

I kindly welcome any ideas to make this work in the new version of Meteor as well.

From my point of view, I’d see the integration of static assets from packages as core functionality of Meteor as build tool, which should be provided out-of-the-box without an additional package.

Thanks for reading the whole story!

2

Have you seen https://docs.meteor.com/api/assets.html?

3

I know the Assets API and use it in my projects, but it doesn’t help to access files from NPM packages – except in the combination with symbolic links, which seems to be the recommended way: https://guide.meteor.com/using-npm-packages.html#npm-assets, but I’d prefer a way like for the CSS files: https://guide.meteor.com/using-npm-packages.html#npm-styles

4

After changing my application to use symbolic links for the integration of static assets provided via NPM – as explained in https://guide.meteor.com/using-npm-packages.html#npm-assets, I’ve marked this thread as closed.

1 Like