ERROR => Support for the experimental syntax 'jsx' isn't currently enabled

[Santhosh-Umapathi]

I received an error and unable to use the react-gaugejs. My project is made with create-react-app and i tried install @babel/plugin-transform-react-jsx, but still it throws the error.

This is my code,

import React, {useEffect} from 'react'

//ReactGauge
import Gauge from 'react-gaugejs';


const ReactGauge = (props) =>
{

   
    const handleResultTextChange = (value) =>
    {
        // this.setState({value: value});
    }

    return (
        <div>
        <Gauge
            value={750}
            minValue={0}
            maxValue={1000}
            animationSpeed={32}
            options={{
                angle: 0.35,
                lineWidth: 0.1,
                radiusScale: 1,
                pointer: {
                    length: 0.6,
                    strokeWidth: 0.035,
                    color: '#000000',
                },
                limitMax: false,
                limitMin: false,
                colorStart: '#6F6EA0',
                colorStop: '#C0C0DB',
                strokeColor: '#EEEEEE',
                generateGradient: true,
                highDpiSupport: true,
            }}
            textChangeHandler={handleResultTextChange}
            donut

            // any other props are passed through to the canvas element
            className='gauge-canvas'
            style={{height: '150px'}}
        />
        </div>
    )
    
};

export default ReactGauge;

Error:

SyntaxError: C:\Users\umapathis\Desktop\Easylink-React\node_modules\react-gaugejs\Gauge.js: Support for the experimental syntax 'jsx' isn't currently enabled (79:5):

  77 | 
  78 |   return (
> 79 |     <>
     |     ^
  80 |       <canvas ref={canvas} {...passThroughProps}></canvas>
  81 |       <span ref={span} style={{display: 'none'}}></span>
  82 |     </>

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

[revolunet]

same here, did you solve it ? the package is not transpiled on npm

[nbkhope]

This might be helpful to you: if you used create-react-app to generate the app, you need to change the webpack configuration for babel-loader. For me, I ejected the app (npm run eject or yarn eject) to get access to the configuration file. In essence, the following setting in create-react-app@4.0.3 should be commented out to make importing a module that uses JSX in its imported code work:

// file: config/webpack.config.js
module.exports = ...
  ...
  return {
    ...
    module: {
      ...,
      rules: [
        ...
        {
          oneOf: [
            ...
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/
              // include: paths.appSrc, // <-- comment this line to make it work

https://github.com/facebook/create-react-app/blob/9d0369b1fe3260e620b08effcf85f1edefc5d1ea/packages/react-scripts/config/webpack.config.js#L396

paths.appSrc points to the src/ directory at the root:

https://github.com/facebook/create-react-app/blob/9d0369b1fe3260e620b08effcf85f1edefc5d1ea/packages/react-scripts/config/paths.js#L70

To preserve the include, you can add specific directories if you wish, like so:

include: [
  paths.appSrc,
  '/some/where/you/want/the-package',
  path.join(paths.appNodeModules, 'the-module-name'), // <-- or do like this using existing constants, if under node_modules
]

Note that if that imported module comes from a symlink 'ed directory that is elsewhere, the above won't work. You would have to write the exact path of where the symlink points to. Webpack documentation says something about that:

https://webpack.js.org/configuration/module/#rule-conditions

Be careful! The resource is the resolved path of the file, which means symlinked resources are the real path not the symlink location. This is good to remember when using tools that symlink packages (like npm link), common conditions like /node_modules/ may inadvertently miss symlinked files. Note that you can turn off symlink resolving (so that resources are resolved to the symlink path) via resolve.symlinks

So you'd set resolve.symlinks: false while working with those symlink 'ed modules.

https://github.com/facebook/create-react-app/blob/9d0369b1fe3260e620b08effcf85f1edefc5d1ea/packages/react-scripts/config/webpack.config.js#L283

[keanemind]

Sorry for taking so long to read this. To be honest, the package is just one component in one file (Gauge.js) with 100 lines of code. Seeing as I licensed this project under the MIT License, I recommend you copy-paste that file from this repo into your own source code and modify it to replace the JSX React.Fragment (<>) with a <div> or something and adjust the closing tag accordingly. I don't remember why I even put this on npm—it should probably just be a gist because it's implemented in a hacky fashion anyway.

But note the existence of this issue if you're going to bring the Gauge component into your own source code: #3.

[keanemind]

Just pushed and published a major version update to replace the fragment with a div.

[nbkhope]

@keanemind just commenting for your interest. It does not matter if you use React.Fragment or not. The issue here is the use of JSX. That is, the syntactic sugar for React.createElement. The code needs to be transpiled to a version of JavaScript that is interpreted by the browser. For example, ES5 is widely supported now. Possibly ES6 too. (Or if you want, change all JSX to calls to React.createElement, but that would be ugly and beat the purpose of JSX altogether).

One could import your module and transpile it themselves, which is what I pointed to in my previous comment. The issue was that webpack was not transpiling (via babel) the directories in node_modules/ which makes sense since there are a lot of folders there. I suggested just adding a specific node_modules/some-library to be included in the list of transpilation.

Now, another approach, which seems to be a standard, is for libraries to transpile their source code and make it available when they npm publish the tar file. So you would have a dist/ directory with the transpiled code that is imported/required by the consumers of your library. That code is in a version of JavaScript that is widely supported (e.g. ES5) and does not need any preprocessing / transpilation.

[vlakius]

Just pushed and published a major version update to replace the fragment with a div.

Hi, sorry but it didn't fix the problem.
It also give me this error when i run npm install react-gaugejs

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: MY PACKAGE npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0" from react-gaugejs@2.0.0 npm ERR! node_modules/react-gaugejs npm ERR! react-gaugejs@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution

[keanemind]

@nbkhope Thanks a lot, that was a really good explanation. To be honest, I didn't really pay attention and assumed this issue was a similar problem to an earlier one. I compiled the component and republished, but again, I'm thinking it may have been a mistake to publish this thing in the first place anyway.

Let me know if that fixed anything…

[keanemind]

@vlakius You are on react 17 when this package specifies react 16 as a peer dependency. Since react 17 should also work, I just published a change to allow react 17.

If anyone else has related problems/suggested fixes please let me know.