Support for the experimental syntax 'decorators' isn't currently enabled (5:3):

This guide is targeted specifically to people who encountered this error while using MobX with ReactJS

Error

Now I know, its frustrating when you got this error, no worries, I know exactly what caused the error. Here was my code that caused the error:

// store.js
import { observable, action } from 'mobx';

class ProductStore {
  @observable products = [];

  @action
  addProduct(product) {
    this.products.push(product);
  }
}

const store = new ProductStore();
export default store;

Solutions tried

You might see this message in your console:

"Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation."

and you might have added this new dependencies in both .babelrc [source], babel.config.json [source], installing the dependencies in dev using npm [source], installing it as regular dependency [source], using react-app rewired to install the new dependency [source]. IT ALL DOESN'T WORK!!

That is because you are trying to use the decorators using the babel, and it doesn't coincide well with MobX.

Solution:

Then I came across this post, and I realized, MobX has it's own decorator class to use

Here is the modified version of code:

// store.js
import { makeObservable,observable,  computed, action, decorate  } from 'mobx';

class ProductStore {
  constructor() {
    makeObservable(ProductStore, {
      products: observable,
      addProduct: action
    })
  }
  products = [];

  addProduct(product) {
    this.products.push(product);
  }
}
const store = new ProductStore();
export default store;

What changed was, I used makeObservable (the latest version, since decorate doesn't exist in the latest version of MobX), instead of using the decorator "@observable" and vio la, the error is gone!


IMPORTANT:

Also, make sure your webpack.config.js is configured properly, if your babel looks like this

// webpack.config.js
module.exports = {

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
      ],
    },
  };
 

it's time to remove this

use: {
            loader: 'babel-loader',
          },

and you should be good to go!



Comments

Post a Comment

Popular posts from this blog

How to add environment variables into Heroku container

Image
 Method 1: Using .env file  NOTE: Please add your .env file into .gitignore to not make the file visiblein github. Before we start, please make sure you have ran ' heroku scale worker=1 -a (app) ' in your app.  1) Create an .env file and add your environment variable like so: your-environment-variable=123 2) In your code, import load_dotenv from dotenv like so: import os from dotenv import load_dotenv load_dotenv() test-env = os.getenv('your-environment-variable')  print(test-env)  Note: Please make sure you have requirements.txt present by doing 'pip freeze > requirements.txt' 3) Create your dockerfile FROM python:latest WORKDIR / COPY . . RUN pip install -r requirements.txt CMD [ "python", "test.py" ] 4) Run ' heroku container:push worker -a (app name) ' 5) Run ' heroku container:release worker -a (app name) ' 6) Wait for 10-20 seconds... 7) You can test if your app is working by running ' heroku logs -a (app name)...
Read more

Running CQL scripts in Cassandra

How to run CQL scripts in Cassandra  There are 2 ways to run a CQL script, the first way would be running the following command: - cqlsh -f {directory} The second way would be using the command within the CQLSH terminal: - source '{directory}' Where does the {directory} points to? The directory points to the root of your server. For example, if you are on linux, the root would be `/`. Therefore, if you placed your scripts under the folder `scripts`, your directory would look like this `/scripts/{cql_script_name}.cql`.  I've been running the command, but it keeps saying `No such file or directory`? If you met this error, please make sure that:      - The file actually exist in the directory. You can check if by typing `ls -l {directory}`. If it doesn't exist, it will show the same error. If you are on docker, and you are unsure of how to mount your CQL file into your container, you can check out this guide.      - The CQL file has the correct exten...
Read more