Use alt with react in ES6 - reactjs

Question

I'm trying to use alt with React and code an Action in ES6 style:
import alt from '../alt';
class LoginActions {
login() {
alert('oi');
}
}
export default alt.createActions(LoginActions);
My .babelrc is using class transformation plugin:
// without options
{
"plugins": ["transform-class-properties"]
}
My package.json is configured with babel and webpack
{
"name": "npm-yarn-babel-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"babel-core": "6",
"babel-loader": "7",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.1",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"alt": "^0.18.6",
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"scripts": {
"build": "webpack -p",
"dev": "webpack-dev-server --hot --inline"
}
I Have a component Hello World:
import React, { Component } from 'react';
import LoginActions from './LoginActions';
export class HelloWorld extends Component {
render() {
return (
<div className="hello-world">
<h1>Hello World</h1>
</div>
);
}
}
export default HelloWorld;
I'm running as:
yarn run dev
If I do not import LoginActions, it works, when I import, it compiles, but it does not work.
If I a run with react-scripts it show me an error that alt can understand ES6 class definition.
What Am I doing wrong?

Answer 1

Your babel-loader is only configured for .jsx files. You need to configure it for .js file too which alt.js is. To do that use the regex /\.jsx?/
{
test: /\.jsx?/,
use: {
loader: 'babel-loader',
options: { presets: ['react', 'es2015'] }
}
},