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

Failed to apply plugin Intellij Gradle

Image
 Failed to apply plugin in Intellij Gradle is caused by wrong Java version being used in Gradle. To fix it, go to Settings -> Build, Execution, Deployment  -> Build Tools -> Gradle , find Gradle section, and select the correct Gradle JVM version. The version of JVM used should be compatible with the version of Gradle you are using.  If all still can't work, try the following: - Invalidate cache (Go to File -> Invalidate Cache ) - Delete the global .gradle folder (Located in your Users folder), as well as your project .gradle folder, and run ./gradlew.bat --refresh-dependencies - Ensure the JAVA_HOME and PATH is pointing to the right JDK version. For my case, my project is using Java 11, so the values should reflect.  JAVA_HOME = C:\Program Files\Java\jdk-11.0.8 PATH=C:\Program Files\Java\jdk-11.0.8\bin Note: Also, please make sure that the \ bin is added at the back of the path. If you have multiple Java version installed, please make sure the path...
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