Running React v17 won't compile - @microlink/react gives an error about needing an additional loader in (MicrolinkError)

[BrianHHough]

Bug Report

You can use live code at Codesandbox: React | Vanilla

Current Behavior

I have this running in a different React project successfully that is React V18. However, in my React V17 codebase, I cannot get the micro-link to render. It will fail to compile and print this error below:

Failed to compile.

./node_modules/@microlink/mql/src/browser.js 20:7
Module parse failed: Unexpected token (20:7)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| class MicrolinkError extends Error {
>   name = 'MicrolinkError';
| 
|   constructor(props) {

Expected behavior/code You should be able to embed the microlink as expected like in the documentation and how i can do it in the React 18 version I have.

Possible Solution

It seems to me that there is something related to the babel loader that makes the latest package optimized to the current react build. However, is there a way we can downgrade the microlink to a previous version.

The version I am trying to work with is "@microlink/react": "^5.5.9", however, perhaps there is a legacy version of the package that would work better with React17.

Additional context/Screenshots

Add any other context about the problem here. If applicable, add screenshots to help explain.

[Kikobeats]

Hello,

Out of the box, the fact this library uses babel shouldn't be relevant. I don't think it's a problem by the library since it's used by lot of people under different stack (for example, microlink.io it's Gatsby site).

Plus, here you can see some CodeSandbox, mixing Microlink SDK and the React version, all of them working smoothly:

• @microlink/react with react@18
• @microlink/react with react@17
• @microlink/react with react@16

Maybe can you isolate your issue into a CodeSandbox to make it reproducible and understand what's happening?

[BrianHHough]

Thanks @Kikobeats! I'm cross-comparing your React 17 version with mine.

So it seems to be complaining about the import in my react component. When I hover over the ... over the @microlink/react in my import statement (import Microlink from "@microlink/react";), the hover box says this (yet I am not using TypeScript in my project):

module "/.../.../.../.../.../node_modules/@microlink/react/dist/microlink"

Could not find a declaration file for module '@microlink/react'. '/.../.../.../.../.../node_modules/@microlink/react/dist/microlink.js' implicitly has an 'any' type.

  Try `npm i --save-dev @types/microlink__react` if it exists or add a new declaration (.d.ts) file containing `declare module '@microlink/react';`ts(7016)

As soon as I try to compile my app with the import and component of @microlink/react, it says this:

Failed to compile.

./node_modules/@microlink/mql/src/browser.js 20:7
Module parse failed: Unexpected token (20:7)
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.
| 
| class MicrolinkError extends Error {
>   name = 'MicrolinkError';
| 
|   constructor(props) {

Going to keep checking through what this could be...but just so strange because I have another build with the exact setup. It just won't cooperate in this React 17 repo I have.