Error when I try to run my app as expo web app

Expo SDK
1
  1. SDK Version: 34.0.0
  2. Platforms(Android/iOS/web/all): web

When I try to test using expo start --web, I get this error in the browser -

Support for the experimental syntax 'classProperties' isn't currently enabled (30:28):
.
.
.
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Even after I add the plugin using npm install --save-dev @babel/plugin-proposal-class-properties, the same error comes up. None of the solutions I found online work. Does anyone here know how I can fix this?

2 Likes
2

Hi

Are you intentionally using class properties? If not, maybe replace them. Otherwise check your babel.config.js to make sure it has a plugins section that references @babel/plugin-proposal-class-properties. I have not tried this myself, so not sure if it will work, but it seems to be what the error message is suggesting.

See also:

3

I think I have to use class properties to enable custom toolbar in my react native expo app. So yes, it is intentional.

Questions:

  • babel.config.js exists in the node_modules folder, is that correct?
  • I tried to add the plugins section with plugin-proposal-class-properties but it didn’t work anyway

Is there something else here I’m missing?

4

Could you post the code where you’re using the custom properties?

To answer your question, I was referring to the babel.config.js at the root of your project. If I create a new project with expo init I get a babel.config.js file at the root of the project. It looks as follows:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

If you do indeed need the custom properties I would try changing that to the following (untested):

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-proposal-class-properties'],
  };
};
5 
class SplashScreen extends React.Component {
  static navigationOptions = { // this line is where the error points
    title: 'Splash',
    header: null,
    gesturesEnabled: false
  };

And thanks for letting me know but I do not have a babel.config.js file in my root directory. How is that possible?

6

I’m not sure. It could be because you’re on SDK 34.

Regarding your code, I have very similar code in one app and it works on the web with no complaints about class properties. The difference is that I’m on SDK 35.

I suspect the following from my package.json might be the reason it’s working in SDK 35:

  "devDependencies": {
    "babel-preset-expo": "^7.0.0"
  },

in addition to the babel.config.js mentioned previously.

The only problem I have with running that app on the web is that it complains it can’t find assets/blah.png when in fact there are assets/blah@1x.png, assets/blah@2x.png and assets/blah@3x.png. So just for the purposes of testing your issue I copied all the *@3x.png files to *.png and it worked fine after that.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.