Develop Reference

How to use ffmpeg with Nuxt?

I am super new to Nuxt, and I am currently trying to move over a vue application that generates gifs ffmpeg.wasm to use Nuxt.js. However, whenever I visit the page the server crashes with the following error:
[fferr] requested a shared WebAssembly.Memory but the returned buffer is not a SharedArrayBuffer, indicating that while the browser has SharedArrayBuffer it does not have WebAssembly threads support - you may need to set a flag 18:36:38
(on node you may need: --experimental-wasm-threads --experimental-wasm-bulk-memory and also use a recent version)
I know it says to add the flags to node, as does the ffmpeg.wasm docs, but how do I do that via Nuxt? Or can I even do that? It is using the default dev server that comes with Nuxt, and I will be able to solve this when it's built and hosted but I need to have it locally as well.
Here is the component I am using in my barebones Vue app (stripped back but still causes an error). I am using node v14.17.6 and I'm using this library github.com/ffmpegwasm/ffmpeg.wasm/blob/master/README.md
<template>
<div class="home">
<h1>FFMPEG test</h1>
</div>
</template>
<script>
import { createFFmpeg } from '#ffmpeg/ffmpeg'
export default {
name: 'Home',
data: function () {
return {
ffmpeg: null,
}
},
created() {
this.ffmpeg = createFFmpeg({
log: true,
})
// Initialise loadFFmpeg
this.loadFFmpeg()
},
methods: {
async loadFFmpeg() {
await this.ffmpeg.load()
},
},
}
</script>

Creating the instance into a mounted() fixed the issue.
This is probably due to the fact that ffmpeg needed the Vue instance to be already mounted in the DOM (in the way it works).
created() is usually used for AJAX calls or things not so related to the Vue instance, and it being shown with the Composition API in their example gave me the idea of trying the mounted() hook.

Cannot use newly installed plugins (node modules) in Nuxt pages/components

First off, I'm a beginner with NuxtJS and front-end development in general, so it might be that I'm missing something - though I do believe I went through all the options before posting here. Apologies in advance if that is not the case.
I've been having trouble using installed modules that I've registered as plugins. For example, take mapbox-sdk.
After installing it with npm install #mapbox/mapbox-sdk, which correctly creates #mapbox/mapbox-sdk in node_modules, I register it in nuxt.config.js:
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Of course, I also create the mapbox-sdk.js file in plugins/, containing:
import "#mapbox/mapbox-sdk";
Then, in a page (say, myMap.vue), when I try:
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
which is the basic usage example in the documentation, I get:
mapboxSdk is not defined
in the console. This behavior extends to every single module I installed today, but is not the case for modules I had previously installed.

The reason why you're getting the error mapboxSdk is not defined is because there are a few issues with the way you've set up this plugin.
Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.
There are a couple of ways you can use this package.
Plugin
// ~/plugins/mapbox-sdk.js
import mapboxSdk from '#mapbox/mapbox-sdk'
export default (_ctx, inject) => {
// Exposing the mapboxSdk to your Nuxt app as $mapBox.
inject('mapBox', mapboxSdk)
}
Then in nuxt.config.js, same as you've already done.
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Then in your component myMap.vue
var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });
Directly in the component:
If you don't wish to use a plugin, the way that #kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.

Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first
<script>
import mapboxSdk from '#mapbox/mapbox-sdk'
export default {
methods: {
mapboxSdk,
},
mounted() {
console.log('mapbox function >>', mapboxSdk)
},
}
</script>
Do you have it working in a .vue component at first ?

Vue 3 component incorrectly initialized when module is `npm link`ed

Following is the entry point to my library, it generates a component with a dynamic tag:
// muvement.js
import { defineComponent, ref, onMounted, h } from 'vue';
const createMuvement = (tag) => {
return defineComponent({
name: `m-${tag}`,
setup(props, context) {
const root = ref(null);
onMounted(() => {
console.log(root.value);
});
return () => h(tag, { ...context.attrs, ref: root }, context.slots);
}
});
};
const muvement = (...tags) => {
const components = {};
tags.map((tag) => (components[`m-${tag}`] = createMuvement(tag)));
return components;
};
export { muvement };
It's expected to be consumed like so:
// Home.vue
<template>
<div>
<m-div>div</m-div>
<m-button>button</m-button>
</div>
</template>
<script>
import { muvement } from "muvement";
export default {
name: "Home",
components: {
...muvement("div", "button")
}
};
</script>
This works as expected when the library code is contained within the Vue app folder (assuming we are now importing from "#/components/muvement.js" instead of "movement").
That is:
-muvement-test-project (scaffolded with vue-cli)
- src
- views
- Home.vue
- components
- muvement.js
I've also published an alpha release that works fine when importing "muvement" after installing it directly from the npm registry (that is, npm install muvement instead of npm link muvement).
The Problem
During development, I want an app to test the library with that is separate from the library's directory.
I've used npm link to link the library to the test app (as I have done with many other projects in the past).
From /path/to/library
$ npm link
From /path/to/test/app
$ npm link muvement
So far so good. The module is available as a symlink in the test app's node_modules folder. So I import { muvement } from "muvement", run npm run serve, and... BOOM.
Everything explodes (see errors below). It's also probably worth noting that trying to import from the full path (i.e. C:/dev/npm/muvment/dist/es/index.js) results in the same issues as npm link does, so I don't think it has anything to do with the symlink directly.
This is what appears in the console:
For pretty much the entire day I have been trying to solve this one issue. I've seen several seemingly similar questions that were solved by settings Webpack's resolve.symlinks to false but that has no effect on my problem. I've read all through the docs and even Vue's source code (here is the offending line for those who are curious).
Since the warning suggests that the error is commonly attributed to async setup I thought maybe webpack was doing something weird that would make my code async. This doesn't seem to be the case as the call stack of both the working attempt and failed attempt are identical.
What's not identical is the scope.
Here is the scope for the example that is working:
And here is the failing one:
(Notice that the target parameter is null during the call to injectHook, which is obviously what prompts Vue to show a warning).
My question is, why does the location of the imported module make such a difference during the execution of the said module?
The library code and build setup are available here:
https://github.com/justintaddei/muvement
The test app is available here:
https://github.com/justintaddei/muvement/tree/example
If I've left out something important, please let me know in the comments. It's been a long day so I'm sure I've probably missed something.
Thank you.

The problem is your app is using two different vue dependencies under the hood - vue requires the same dependency to be used to keep track on reactivity, lifecycle, etc.
When you link a library npm/yarn will use that linked folder node_modules, but your app is using it's dependencies from it's node_modules.
When your app imports vue it will go app/node_modules/vue but when you import from your linked dependency it will be going to linked_dep/node_modules/vue.
app
node_modules
vue
linked library
node_modules
vue
One easy way to debug this issue is to change both vue dependency files with a console.log and check if the console is logging both.

Using ActionReducerMap with StoreModule.forFeature gives build error

I have my angular project structure as below:
/(root or repo folder)
|_ projects
|_ mylib (this is the main library that will be exported from the repo)
|_ sample-app (created to consume 'mylib ' project to test that things work fine when 'mylib' would be consumed in other projects)
To handle application state I am using ngRx (of which I have only basic knowledge). The project is setup with Angular8.2.5, ngRx 8.3.0 and RxJs 6.5.3.
On doing npm start on the repo, sample-app project is bootstrapped and mylib project is lazily loaded.
Here is how I have initialized the app store/state
In sample-app/app.module.ts (inside sample-app project)
StoreModule.forRoot({}, {
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true,
strictStateSerializability: true,
strictActionSerializability: true,
},
}),
!environment.production ? StoreDevtoolsModule.instrument({ name: 'My Sample App' }) : [],
In mylib/mylib.module.ts (inside mylib project)
import { libReducer} from './shared/store/lib.store';
StoreModule.forFeature('libState', libReducer)
The libReducer is exported from mylib/shared/store/lib.store.ts file
export interface subFeatureOneState {
// some properties defined here
}
export interface LibState {
subFeatureOneReducer: subFeatureOneState;
}
export const libReducer: ActionReducerMap<LibState> = {
subFeatureOneReducer,
};
The only issue I am getting with this setup is that I get an error when I try to build my project( using ng build).
The error says
Checking the logs doesn't provide much help either.
The build issue gets resolved if I change StoreModule.forFeature definition in mylib.module.ts to below
StoreModule.forFeature('libState', subFeatureOneReducer)
But this is not what I desire as I intend to keep all my reducers at one place and just have one reference of StoreModule.forFeature inside mylib project.
I couldn't find much articles online that explain usage of ActionReducerMap for a feature module store. I followed the approach mentioned below, but it didn't solved the build failure issue:
#ngrx/store combine multiple reducers from feature module
Is there something wrong with the way I have configured store/reducers to be initialized? It would be great if I can get any pointers on this to solve the build error issue.

Here is my code I think you are missing the ROOT_REDUCERS
export const ROOT_REDUCERS = new InjectionToken<
ActionReducerMap<State, Action>
>("Root reducers token", {
factory: () => ({
router: fromRouter.routerReducer
})
});
StoreModule.forRoot(ROOT_REDUCERS, {
metaReducers,
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true
}
}),
Here is my full code for your reference

Jest TypeError: fetch is not a function

I have the following Jest test code to test a fetch to an endpoint:
import MovieApiService from 'services/MovieApiService';
import movies from '../constants/movies';
describe('MovieApiService', () => {
test('if jest work correctly', () => {
expect(true).toBe(true);
});
test('get an array of popular movies', () => {
global.fetch = jest.mock('../mocks/movies');
const movieApiService = new MovieApiService();
return movieApiService.getPopularMovies()
.then(data => expect(data).toBe(movies));
});
});
But I am getting:
I know that the movieApiService.getPopularMovies() is a JavaScript fetch request, but Node.js does not have the fetch API, so how I can I make this test to work using Jest?

I can't test this with the code you supply, but installing and importing the npm module jest-fetch-mock should do the trick.

Try to keep you mock implementation specific to test cases and if multiple test cases are bound to use the same implementation then wrap them up in a describe block along with a beforeEach call inside it.
This helps in describing mock implementation specific to the scenario being tested.
It is hard to test your implementation with the code you supplied, but let's try switching your mock implementation to something like this:
// This is just dummy data - change its shape in a format that your API renders.
const dummyMoviesData = [
{title: 'some-tilte-1', body: 'some-1'},
{title: 'some-tilte-2', body: 'some-2'},
{title: 'some-tilte-3', body: 'some-3'}
];
global.fetch = jest.fn(() => Promise.resolve(dummyMoviesData));
Now, whenever you movie service API gets called, you may expect the outcome to be of shape of dummyMoviesData and even match it.
So,
expect(outcome).toMatchObject(dummyMoviesData);
or
expect(outcome).toEqual(dummyMoviesData);
should do the trick.

As of October 2020, an approach to resolve the error TypeError: fetch is not function is to include the polyfill for fetch using whatwg-fetch.
The package provides a polyfill for .fetch and is well supported and managed by Github.com employees since 2016. It is advisable to read the caveats to understand if whatwg-fetch is the appropriate solution.
Usage is simple for Babel and es2015+, just add to your file.
import 'whatwg-fetch'
If you are using with Webpack add the package in the entry configuration option before your application entry point.
entry: ['whatwg-fetch', ...]
You can read the comprehensive documentation at https://github.github.io/fetch/
If you are unfamiliar with WhatWG, learn more about the Web Hypertext Application Technology Working Group on their website.

Installing and adding the below snippet to the top of my jest file fixed it for me:
import "isomorphic-fetch"