We Keep Coding

How to access the actual name/path/url of a static resource hashed during copy webpack plugin

So I have resources that I hash with copy webpack plugin.
{
from: "data/json/*.json",
to: "data/json/[name].[hash:6].json",
},
Now during runtime I need to get the access to the actual url of these json files.
What I would ideally like is to be able to fetch this url during runtime so that I can do something like
let name = "tiles";
const tileDataUrl = requireUrl(`data/json/${name}.json`);
fetch(tileDataUrl) // tileData Url here would data/json/tiles.abc34f.json
...
What I need is a method requireUrl (or whatever it might be called) which returns the actual url of the static resources with hashes during runtime.
( For anyone wondering, the hashes are used to do cache busting here)
Please and thank you :)

Assuming you're on version 5, Webpack asset modules will provide what you want without the need for copy-webpack-plugin. Webpack can recognize a require statement with expressions. Webpack will automatically included all possibly matching files for you without additional configuration. In this case you may want to watch out for optimizations where Webpack knows that name is set to "tiles". Here's the required addition to your config:
module.exports = {
module: {
rules: [
{
test: /data\/json\/.+\.json$/
type: 'asset/resource',
generator: {
// Look at https://webpack.js.org/configuration/output/#template-strings to see additional template strings.
filename: '[path][name].[hash:6][ext]'
}
}
]
}
}
Alternatively for Webpack 4 you can add file-loader as a dependency and use it with this equivalent config addition:
module.exports = {
module: {
rules: [
{
test: /data\/json\/.+\.json$/
loader: 'file-loader',
options: {
name: '[path][name].[hash:6][ext]'
}
}
]
}
}
Either way your code will now be able to work simply as follows:
let name = "tiles";
const tileDataUrl = require(`data/json/${name}.json`); // tileDataUrl will display the interpolated filename.
fetch(tileDataUrl);

Vue Render HTML - You may need an additional loader to handle the result of these loaders

I'm trying to render HTML dynamically in Vue (javascript) and I'm getting this error, does anyone know how to fix it?
Module parse failed: Unexpected token (224:36)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
This is the code that generates the above error:
headings: {
id: 'ID',
selected: function (h) {
return <b-form-checkbox v-model={this.checkedAll} onChange={this.selectAll}>
</b-form-checkbox>
}
}

I solved the problem by installing babel
https://github.com/vuejs/babel-plugin-transform-vue-jsx
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}

How do I generate SVG sprites with GatsbyJS

In my gatsby-browser.js file, I have two imports that look similar to:
#import npm-package/lib/icons.svg
#import npm-package/lib/icons-rich.svg
My current gatsby-node.js file is as follows
const path = require('path')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
const config = getConfig()
config.resolve.alias = {
...config.resolve.alias,
/// aliases working fine
}
config.module.rules = [
...config.module.rules,
{
test: /(icons|icons-rich).svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
publicPath: './'
},
},
],
config.plugins = [
...config.plugins,
new SpriteLoaderPlugin()
]
actions.replaceWebpackConfig(config)
}
When I run gatsby develop, I get the following error:
Module Warning (from ./node_modules/svg-sprite-loader/lib/loader.js):
svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode
and no files are ever output.
When i run gatsby build, I get a sprite.svg file output to the public directory but it doesn't seem like the svg sprite gets added to the html document body.
1) How do I get the gatsby develop command to process and output the svg to the proper directory
2) I suspect the issue with gatsby build is related to the svg file i'm trying include in the html document, which is in my Layout.jsx file and looks like
<Icon icon="all" iconPath="./public/sprite.svg" />
I would guess the ./public/sprite.svg is missing for some reason but I can't figure out what the correct file path is (tried everything except the right thing apparently).

Cannot import mp3/wav files in React with file-loader

I've been trying to import some mp3 and wav files in React, but I'm getting errors on compiling which seem related to loaders.
Different syntax.
{
test: /\.(mp3|wav)$/,
use: {
loader: 'file-loader',
},
},
Uncaught Error: Module parse failed: Unexpected character '' (1:3)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
import sad from './sad.mp3';
this.wrongSound = new Audio(sad);
This doesn't seem to work. However, this does without loaders at all:
this.wrongSound = new Audio('./src/sad.mp3');
I want to know why this is.

Using Sweet.js and Babel

So I've been trying to get Sweet.js working on my ES6 project, using Webpack to compile it all. I've been able to get each to work separately, but no matter how I've tried to put them together it has given some sort of error... I think it's mostly to do with source maps, since the error generally looks something like this:
Module build failed: Error: C:/Users/.../index.js: Invalid mapping: {"generated":{"line":4,"column":12,
"lastColumn":null},"source":null,"original":{"line":null,"column":null},"name":null}
And here's the code that's failing:
webpack.config.js:
module.exports = {
entry: './public_html/script/src/index.js',
// ...
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules.*\.js/, loader: 'babel!sweetjs?modules[]=./macros.sjs&sourceMap=true' },
// ...
]
},
// ...
devtool: 'source-map',
// ...
};
macros.sjs:
macro (=~) {
rule infix { $x | $y } => {
!!$y.test($x)
}
};
export (=~);
macro (!=~) {
rule infix { $x | $y } => {
!$y.test($x)
}
};
export (!=~);
index.js:
let x = "asdf", p = /a/i;
x =~ p;
Reversing the loaders didn't work, since Babel didn't know what to do with the macros. Removing the Babel loader had it compile, but then (with more complicated stuff going on) Webpack failed because it didn't know what to do with the ES6 things.
So far I haven't found anything about using both babel and sweetjs loaders at once... Is it even possible?
Edit: So I found out its a bug with the sweetjs-loader: https://github.com/jlongster/sweetjs-loader/issues/4
Setting the true to false fixes the issue, and creates another. Sweet.js seems to be putting some garbage data into the bottom of the files, which messes with Babel and Webpack's module loading. This error comes up multiple times per build:
ERROR in ./public_html/script/src/main-menu/index.js
Module build failed: Error: Line 56: Unexpected token ILLEGAL
[... } ) ; ...]