Import static files for example in React

help
1

I’m back to Meteor after a long time and wondering why there is still this issue with the import of static files which is not working.

How can I achieve this when e.g. using a brilliant lib like use-sound. It is not that uncommon to use static files like that. What is the current solution to this use case?

I saw there is a package for importing static files available but looks pretty abandoned for 7 years.

2

Hi,

your url links to a website/blog about a react hook and not a concrete library, problem, code etc. As a courtesy to all people who might want to help here, could you describe your problem with some code instead of literature.

Tx

3

Thanks for your answer, very appreciated.

import effectSnd from './effectSnd.mp3'
const [playSnd] = useSound(effectSnd, { volume: 0.25 })

The above code is the one I want to achieve. But now I’m getting an error, the module is not importable.

In this specific case I solved it not using the use-sound library and doing the audio handling myself. But there was e.g. this package meteor-static-assets which was trying to solve this, but it is not up-to-date anymore.

4

Ok. I’d assume you already installed and imported the useSound.

import useSound from 'use-sound'

  1. Browser downloads the JS client bundle.
  2. Browser runs the minified/uglified JS code.
  3. Browser renders the HTML that results from running the JS code.

In the HTML there is no mp3. file.
Meteor has a “special” folder for this. You can put your file in the /public/ folder and then you can reference it by name or by path if the file is deeper into the public folder.

E.g.

projectName
   |__ app
        |__ imports
        |__ public
           |__effectSnd.mp3

Check the Public folder at this link: Application Structure | Meteor Guide

DO NOT import the sound file! :slight_smile:

5

IMG_9329
IMG_93291170×1620 201 KB

Thanks again for your help. I tried this already and it is not working using the public path directly. As you can see on the screenshot the assets need to be imported.

6

:). As I can see on the screenshot, the assets need to be imported if you use create-react-app/Gatsby.

In Meteor you will have to do things the Meteor way. If this library is not compatible with Meteor (can only reference imported files) you might just use Howler directly or the Audio API of the browser to write your own hook or just use it without a hook. E.g.

Play something: new Audio('https://example.com/audio/pop.mp3').play() if from a CDN or
new Audio('/audio/pop.mp3').play() if in the public folder.

7

It’s not specific about CRA/Gatsby, if you use Webpack you need to configure the file-loaderplugin to achieve the static file bundling.

Anyway for my case I went with a custom hook using the Web Audio API which is not a big deal and working for now. Was just wondering if there is a solution, bundling static files in Meteor.

8

I think this conversation explains this more/better: javascript - What is the use for the special "public" folder in a Meteor app? - Stack Overflow