rmdort / react-redux-multilingual

A simple and slim multi-lingual component for React with Redux without react-intl or react-i18n
41 stars 14 forks source link

[error] 'classProperties' isn't currently enabled #19

Closed kindslayer closed 5 years ago

kindslayer commented 5 years ago

image

index.js

ReactDOM.render(   
    <Provider store={store}>   
        <IntlProvider translations={translations}>   
            <Router>   
                <App/>   
            </Router>   
        </IntlProvider>   
    </Provider>,   
    document.getElementById('root')
);  

RootReducer.js

import {combineReducers} from "redux";
import exampleReducer from "redux/reducers/example/example.reducer";
import {IntlReducer as Intl} from 'react-redux-multilingual'

export const reducer = combineReducers({
    example: exampleReducer.reducer,
    Intl
});

export const initialState = {
    example: exampleReducer.INITIAL_STATE,
    Intl   : {locale: 'zh'}
};

export default {reducer, initialState};

Store.js

import rootReducer from 'redux/reducers/root-reducer.js'
import {applyMiddleware, createStore} from "redux";
import logger from "redux-logger";

const middlewares = [logger];

const store = createStore(rootReducer.reducer, rootReducer.initialState, applyMiddleware(...middlewares));

export default store;

App.js

import React from 'react';
import {connect} from "react-redux";
import {withTranslate} from "react-redux-multilingual/src";

const App = ({translate}) => {
    return (
        <div className="App">
            {translate('hello', {name: 'John Doe'})}
        </div>
    );
};

export default connect()(withTranslate(App))

Package.json

{
  "name": "shuttle-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "node-sass": "^4.13.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-redux-multilingual": "^2.0.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Here is the projectFiles.zip

rmdort commented 5 years ago

Like the error says, add babel plugin @babel/plugin-proposal-class-properties

kindslayer commented 5 years ago

Post edited, I had forgotten to show package.json. This error is not related to your repository plugins? by default, we can use statics in the react.js. Error is shown when I use withTranslate. @rmdort please help me ..

kindslayer commented 5 years ago

Hey !!

rmdort commented 5 years ago

I think you are loading the plugin from src directory.

Change import {withTranslate} from "react-redux-multilingual/src"; to import {withTranslate} from "react-redux-multilingual"

kindslayer commented 4 years ago

Thank you ... That was my terrible sry.