ECMAScript 5 - Error Missing class properties transform - javascript

I am implementing the Class extend and i get this error Missing class properties transform.
The Component was
import React from ('react')
const Manna = React.createClass({,
initVal: {
likes: 10,
}
render() {
// code
return {
// code
}
}
});
module.exports = Manna
and changed to
import React from 'react';
export default class Manna extends React.Component {
InitVal: {
likes: 10
}
render() {
// code
return {
// code
}
}
};
This is my configuration in webpack.config.dev.js
{
test: /\.js$/,
loaders: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0',
include: path.join(__dirname, 'client')
},
I have changed the loader following this answer
Before it was loaders: ['babel']
I have also added to .babelrc the plugin
["transform-class-properties"],
This is the error in the console
Missing class properties transform.
15 | // },
16 |
> 17 | InitVal: {
| ^
18 | likes: 10,
19 | code: "2",
20 | size: 350,
I do not understand why it is complaining now for Missing class properties transform, what is wrong in the component?, everything was working fine before of these changes
Here a gist with the full React component

Try with =
import React from 'react';
export default class Manna extends React.Component {
InitVal = {
likes: 10
}
render() {
// code
return {
// code
}
}
};
Check this
UPDATE
Since we are using stage-0 and transform-class-properties is included in stage-2, we don't have to include it manually in .babelrc under plugins. The following configuration works fine: "presets": ["es2015", "stage-0", "react"].
In the gist at line 5 InitVal is written with an uppercase i while at line 39 is written with a lowercase i: initVal. Additionally render method returns an Object Literal, which is invalid, a single child element as to be returned as explained here.
Here is the official documentation for react components defined as es6 classes.

Related

React-Image-Annotate - SyntaxError: Cannot use import statement outside a module

I'm trying to use react-image-annotate but it's giving me this issue when I first try to set it up.
And here's how I'm using it:
import React from 'react'
import ReactImageAnnotate from 'react-image-annotate'
function ImageAnnotator() {
return (
<ReactImageAnnotate
selectedImage="https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
// taskDescription="# Draw region around each face\n\nInclude chin and hair."
// images={[
// { src: 'https://example.com/image1.png', name: 'Image 1' },
// ]}
// regionClsList={['Man Face', 'Woman Face']}
/>
)
}
export default ImageAnnotator
I'm using Next.js if that matters
UPDATE 1
I tried using this babel plugin as suggested by Alejandro Vales. It gives the same error as before. Here's the babel key in my package.json:
"babel": {
"presets": [
"next/babel"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"#babel/plugin-transform-modules-commonjs",
{
"allowTopLevelThis": true
}
]
]
}
I would say that the issue relies in the library itself by what they replied in here (similar bug) https://github.com/UniversalDataTool/react-image-annotate/issues/90#issuecomment-683221311
Indeed one way to fix it I would say is adding babel to the project so you can transform the imports in your project to require automatically without having to change the code on your whole project.
This is the babel package you are looking for https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
Another reason for this could be an outdated version of your package, as some people report to have this fixed after using a newer version of Create React App (https://github.com/UniversalDataTool/react-image-annotate/issues/37#issuecomment-607372287)
Another fix you could do (a little crazier depending on your resources) is forking the library, creating a CJS version of the lib, and then pushing that to the library, so you and anybody else can use that in the future.
I got a tricky solution!
Problem is that react-image-annotate can only be imported in client-side(SSR got error for import keyword)
So, let react-image-annotate in Nextjs be imported only in client side
(https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)
in Next Page that needs this component, You can make component like this
import dynamic from "next/dynamic";
const DynamicComponentWithNoSSR = dynamic(() => import("src/components/Upload/Annotation"), { ssr: false });
import { NextPage } from "next";
const Page: NextPage = () => {
return (
<>
<DynamicComponentWithNoSSR />
</>
);
};
export default Page;
Make component like this
//#ts-ignore
import ReactImageAnnotate from "react-image-annotate";
import React from "react";
const Annotation = () => {
return (
<ReactImageAnnotate
labelImages
regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
regionTagList={["tag1", "tag2", "tag3"]}
images={[
{
src: "https://placekitten.com/408/287",
name: "Image 1",
regions: [],
},
]}
/>
);
};
export default Annotation;

Setting up Slate.js

I am trying to set up a simple slate.js editor, with the following code:
import { Editor } from 'slate-react'
import { Value } from 'slate'
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.',
},
],
},
],
},
],}, });
// Define our app...
class App extends React.Component {
// Set the initial value when the app is first constructed.
state = {
value: initialValue,
};
// On change, update the app's React state with the new editor value.
onChange = ({ value }) => {
this.setState({ value })
} // Render the editor.
render() {
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
export default App
I simply copy pasted the code from the slate.js walkthorugh, but I get the following error:
./src/App.js
Syntax error: Unexpected character '​' (34:0)
32 | this.setState({ value })
33 | }
> 34 | ​
| ^
35 | // Render the editor.
36 | render() {
37 | return <Editor value={this.state.value} onChange={this.onChange} />
It´s my first time both using react and slate, I just wanted to get a feel for it. I hope you can help me explaining whats wrong :)
I don't know if you've solved it already. But I just faced that problem, I think there's a leftover character from when you copied it from their documentation.
Try removing the whitespace completely between the end of the block and the comment and then add them to your liking again, it should work!

React issue - # is an unexpected token

I'm trying to implement react-keydown which can be found here: https://github.com/glortho/react-keydown using the following code example:
import React from 'react';
import keydown, { Keys } from 'react-keydown';
class MethodDecoratorExample extends React.Component {
constructor( props ) {
super( props );
this.state = {
hello: false
};
}
#keydown( 'enter' )
toggleHello() {
this.setState( { hello: !this.state.hello } );
}
render() {
return (
<div>
<h3>Method Decorator Example</h3>
<div>Press the <strong>enter</strong> key to toggle hello.</div>
{ this.state.hello &&
<h1>Enter is key code {Keys.enter}!</h1>
}
<div>And click again outside box to see scoping.</div>
</div>
);
}
}
When I try this I get an unexpected token error on the #. I have no clue how to solve this.
What am I missing?
Thanks
Babel 6 no longer supports ES decorator syntax out of the box so you need to install the babel-plugin-transform-decorators-legacy plugin.
Install babel-plugin-transform-decorators-legacy
npm install --save-dev babel-plugin-transform-decorators-legacy
Add the plugin in your .babelrc
{
"plugins": [
"transform-decorators-legacy"
]
}
or
add the loader directly in your webpack.config.js
{
test: /\.jsx?$/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-decorators-legacy' ]
}
}
I found the answer here: How do I get decorators working with babel & webpack?
Thanks to #cbll for mentioning decorators, because I did not know that that is the correct term. Helped me with searching for solutions

What is the form of Javascript used in this class declaration?

This is from the table example from React-toolbox (which could use a tag)
class TableTest extends React.Component {
state = { selected: [], source: users };
handleSelect = (selected) => {
this.setState({selected});
};
render () {
return (
<Table
model={UserModel}
onSelect={this.handleSelect}
selectable
multiSelectable
selected={this.state.selected}
source={this.state.source}
/>
);
}
}
This does not compile with webpack/babel for me but the following 'correct' Javascript does. Is this JSX notation and a sign that I'm not transpiling JSX as I think I am?
class TableTest extends React.Component {
constructor() {
super();
this.state = { selected: [], source: users };
this.handleSelect = (selected) => {
this.setState({selected});
};
}
render () {
return (
<Table
model={UserModel}
onSelect={this.handleSelect}
selectable
multiSelectable
selected={this.state.selected}
source={this.state.source} />
);
}
}
Webpack/babel chokes on:
ERROR in ./src/client/app/app.jsx
Module build failed: SyntaxError: Unexpected token (21:8)
19 |
20 | class TableTest extends React.Component {
> 21 | state = { selected: [], source: users };
This is using class properties, which are currently part of Babel's stage 2 preset.
For this code, the = statements in the class body would get moved into the constructor by the class properties transform.
Here's the original code in the Babel REPL with suitable presets applied.
You will need to add this preset (or a lower stage preset, as all Babel stage presets also include higher stage features) to your Babel config, or add the transform plugin to it individually.
Example Babel config which would provide all the features you need to transpile the original code:
{
presets: ['es2015', 'react', 'stage-2']
}
It's throwing an error on the = declaration inside of the class. You need to bind this to handleSelect due to React's no autobinding rule.
https://facebook.github.io/react/docs/reusable-components.html#no-autobinding
class TableTest extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: [], source: users
};
this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(selected) {
this.setState({selected});
}
render () {
return (
<Table
model={UserModel}
onSelect={this.handleSelect}
selectable
multiSelectable
selected={this.state.selected}
source={this.state.source}
/>
);
}
}

ReactJS export const and component from one module

I have two modules that I want to share a const array. One of these modules includes both the const array and a component, whilst the other module only includes a component.
This is what I have in module "A".
export const ORDER_COLUMNS = [
{ name: 'orderNumber', title: 'Order', width: '10%', type: 'string' },
{ name: 'orderType', title: 'Type', width: '10%', type: 'string' }
];
class OrderGridControl extends React.Component {
constructor(props) {
super(props);
this.state = {
orderColumns: ORDER_COLUMNS
};
}
...
}
export default OrderGridControl;
And in module "B".
import {OrderGridControl, ORDER_COLUMNS} from 'component/order-grid-control';
class OrderQueryPage extends React.Component {
constructor(props) {
super(props);
this.state = {
orderColumns: ORDER_COLUMNS
};
console.info(this.state.orderColumns);
}
...
render() {
return (
<div>
<PropertyGrid gridSetup={this.state.orderColumns} />
</div>
);
}
}
When I run this I get the following error. invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'moduleB'.
However, the console.info(this.state.orderColumns) line logs all the column objects I expect.
Interestingly, if I copy the array into module "B" and assign the columns in the constructor exactly the same way it seems to work. It only seems to be an issue when I'm importing from the other module.
You've got it almost right-- you're exporting a default export (OrderGridControl) and a named export (ORDER_COLUMNS).
However, in B.js, you're trying to import two named exports.
Modify your import to look like this:
import OrderGridControl, { ORDER_COLUMNS } from 'component/order-grid-control';
The advantage of having a default export is that you don't have to match its name exactly when importing it, so you could do something like
import GridControl, { ORDER_COLUMNS } from 'component/order-grid-control';

Categories