Running FFMPEGJS in a React Project - node.js

I'm trying to get https://github.com/ffmpegjs/ffmpeg.js/ running in a Create React App build project.
import {createWorker} from '#ffmpeg/ffmpeg';
When I import the library the build fails with
./node_modules/#ffmpeg/ffmpeg/src/createWorker.js
Module parse failed: Unexpected token (21:4)
You may need an appropriate loader to handle this file type.
| logger,
| progress,
| ...options
| } = resolvePaths({
| ...defaultOptions,
I'm not sure how to handle this, or where the problem might be. Is this a Webpack issue?

Related

Module Parse Failed: You may need an appropriate loader to handle this file type. ReactJS Error

I am trying to utilise AccordionJS npm in my project. However, when I try to compile the app I get this odd error that I have no idea how to react to:
Here is the error:
`Failed to compile.
./~/react-bootstrap/esm/Accordion.js
Module parse failed: C:\Users\userjohndoe\Desktop\book-app\node_modules\react-bootstrap\esm\Accordion.js Unexpected token (23:4)
You may need an appropriate loader to handle this file type.
| flush,
| alwaysOpen,
| ...controlledProps
| } = useUncontrolled(props, {
| activeKey: 'onSelect'`

Yarn with Webpack: how to use a TypeScript .ts file that is in an outer Node directory not managed by Yarn/Webpack?

I'm working on a k6 (https://k6.io/) load testing project that uses Yarn and Webpack.
It lives as a "sub-project" / sub-folder within a larger project/repo. The larger project uses npm Node modules.
I need to grab a secret from AWS's Secrets Manager in my k6 load testing project. There's a TypeScript Secrets Manager client already in the larger/outside project.
I naively tried importing it:
import SecretsManagerClient from "../../helpers/SecretsManagerClient";
and using it:
const value = await SecretsManagerClient.getSecret("fooSecretName");
And I get all kinds of errors like:
Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
and:
SyntaxError: /foo/helpers/SecretsManagerClient.ts: Unexpected token (7:10)
5 | class SecretsManagerClient {
6 |
> 7 | private client;
| ^
Is what I'm trying to do possible? Do I need to change settings in webpack.config.js?

My awesome coworker found this resource which may work for us:
https://github.com/grafana/k6-jslib-aws

You may need an additional loader to handle the result of these loaders. nodejs v12 m1

./node_modules/html-to-react/node_modules/htmlparser2/lib/esm/index.js 67:9
Module parse failed: Unexpected token (67:9)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| return getFeed(parseDOM(feed, options));
| }
> export * as DomUtils from "domutils"; // Old name for DomHandler
|
| export { DomHandler as DefaultHandler };
nodejs v12
use mac m1
My project did not have any errors before, but now when I run npm start I get this error. I can't find any answer on StackOverflow that solves my problem.

This is a known issue.
I had the same issue after updating from 1.0.0-rc.3 to 1.0.0-rc.12.
Reverting back to rc.3 fixed the issue:
npm i cheerio#1.0.0-rc.3

Using external files for nodejs

I faced a problem with adjusting paths for my project. The project has following structure:
prj
|-common
| |-types
| |-somefile.ts ...
|
|-server
| |-node_modules
| |-package.json ...
|
|-client
| |-node_modules
| |-package.json
| |-angular.json ...
somefile.ts
import { Observable, Subject } from 'rxjs'; !!!Cannot find module 'rxjs' or its corresponding type declarations
export class Someclass {}
As you may see i want to reuse common types between server and client side. somefile.ts is easily imported in project via relative path. But when the somefile.ts is used in some of the project, popups error for "rxjs" module.
How to properly configure package.json for projects?

If it’s not a core module (you installed it), you need to give a path to node_modules folder. Which I can see there’s two.
You need to make sure which one of them contains rxjs.
Then give the path like this:
const rxjs = require("../../server/node_modules/rxjs");

How can I get babel to respect the sovereignty of a linked module?

I've created a simple repo on github to repro my base issue: https://github.com/spiderworm/babel-problem
I have two npm modules locally. One is a library module, the other a demo site for the library module. Since they're both local only, I've npm linked the library module to the demo site.
The demo site was built with create-react-app. Unfortunately, when trying to npm start the demo site, it fails to transpile because of the private member "#" token found in the linked module.
Failed to compile.
../my-test-lib/index.js 5:2
Module parse failed: Unexpected character '#' (5:2)
File was processed with these loaders:
* ./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| export default class MyTestLib {
> #something = 'hi';
|
| constructor() {
Why would babel be trying to transpile the code in the linked module instead of respecting its sovereignty, and why would it fail to compile private member syntax which is supported in node?

Resources