Missing class properties transform.

[MrLibya]

Hello,

I've react project and I'm using react-app-rewired, However when I installed this package I get the following error:

SyntaxError: /path/node_modules/react-medium-image-zoom/dist/index.js: Missing class properties transform.
  329 | }
  330 | class ControlledBase extends Component {
> 331 |     static defaultProps = {
      |     ^
  332 |         a11yNameButtonUnzoom: 'Minimize image',
  333 |         a11yNameButtonZoom: 'Expand image',
  334 |         IconUnzoom: ICompress,
^[[B

I've @babel/plugin-proposal-class-properties installed, here's my babel.config.json

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-react-jsx",
    "@babel/plugin-proposal-class-properties"
  ]
}

[rpearce]

@MrLibya I haven't used react-app-rewired, but I can look into that tonight or tomorrow night.

The support for static even in browsers has been pretty good for a while, so this is interesting.

• Have you tried doing this via webpack in your project?
• Do you have an example I could play with to reproduce the issue?

[rpearce]

@MrLibya What version of nodejs are you running? node --version should give you an answer

[bengotow]

Hey folks, I'm seeing this as well in a standard create-react-app (v4) project using Typescript. Here's the full setup. It's a little bit of a problem for me because I'm using CRA out of the box and don't have a webpack or babel config file in the project, so I can't make adjustments there.

Node: 16.3

Package.json:

    "react": "^16.13.0",
    "react-scripts": "^4.0.3",
    "typescript": "^4.3.4",

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src",
    "../src/types-shared/*"
  ]
}

Will post if I figure out what's going on!

[rpearce]

@bengotow Thank you for offering to help! Can you also dig into this line of thinking for babel.config.json?

(I think this is the right syntax... 🙏 )

  overrides: [
    {
      test: ["./node_modules/react-medium-image-zoom"],
      plugins: ["@babel/plugin-proposal-class-properties"],
    },
  ],

It's not a great solution, but it'd be interesting to know if that unblocks y'all.

[MrLibya]

Hello, sorry for late replay

@rpearce I'm using v16.15.1

but I've already fixed that issue, So I've fixed that issue by using customize-cra, it seems that the issue babel.config.json is being ignored or something, but when I added it to customize-cra it worked well !

sadly I can't share any code because we didn't use that solution ( because we had to update a lot of packages ), but I remember it worked.

i'm not sure what causing the issue because i'm not web developer.

[bengotow]

Hey folks! I think that babel.config.json override would work, but we actually don't have a babel config because it's all provided by the stock create-react-app. I found a thread from earlier this year where folks were trying to get the Monaco text editor (also an ESM module) to work in stock create-react-app projects (microsoft/monaco-editor#82), and it seemed like they were also unable to do it without ejecting or using the rewired react-scripts and overriding the babel config as you suggest. Kinda wild it's not a solved problem yet!

In the meantime I was able to workaround this issue by downgrading to [email protected]. I realize that's kind of a shitty fix, but I didn't want to mess around with the project's configuration too much today 😅

[rpearce]

That's definitely not the experience I want people to have. I'll make it right.

[rpearce]

I'm thinking this has to do with node versions. While there's an issue with the default SVG image (a size thing throwing measurements off with <img /> + .svg + no default width nor height provided), this compiles with Node 18 and the latest Node 16, as far as I can tell:

npx create-react-app cra-test --template typescript
cd cra-test
npm i react-medium-image-zoom 

Then in src/App.jsx

import Zoom from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';

then

<Zoom>
  <img src={logo} className="App-logo" alt="logo" />
</Zoom>

and then

npm run build

[Rubon72]

ERROR in ../node_modules/react-medium-image-zoom/dist/index.js 331:24
Module parse failed: Unexpected token (331:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class ControlledBase extends Component {

static defaultProps = {

| a11yNameButtonUnzoom: 'Minimize image',
| a11yNameButtonZoom: 'Expand image',

webpack compiled with 1 error

[rpearce]

@Rubon72 What nodejs version are you running? node --version

[rpearce]

Can the people having issues please provide the following?

• Result of node --version
• Exact steps to set up create-react-app if different from npx create-react-app cra-test --template typescript
• A dummy example repository would be helpful

Using [email protected], [email protected], and [email protected], I cannot reproduce this issue using npx create-react-app my-app nor npx create-react-app my-app --template typescript. Not being able to reproduce this is an issue.

I could just move static defaultProps = ... to Controlled.defaultProps = ... and pray 🙏 , but I don't know if there are other things that are not going to transpile after that, so it would be useful to have a way to reproduce this.

Any reproduction or debugging help would be appreciated!

[wanderingme]

I'm using node -v 16.13 and experiencing the same 'Missing class properties transform" error.

[rpearce]

Alright, since I can't reproduce this, I'm going to try something to fix it and see if y'all can test it for me.

[rpearce]

@bengotow @Rubon72 @wanderingme Can y'all try [email protected] for me and see if everything is fine, or if there's another transform to sort out?

I switched from es2022 to es2021 transpilation because of folx using things like create-react-app and not wanting to eject.

[rpearce]

Using [email protected] through the asdf tool, I am still unable to reproduce this with [email protected].

I'm going to publish 5.0.3, close this, and if this is still an issue, we can reopen.

Thanks to everybody who has participated! I'll add you to the "All Contributors" list in the README.