Currently, I am working with a setup that involves create-react-app in combination with custom-react-scripts-ts.
Below is the code snippet for my component:
import * as React from "react";
import "./App.css"; // reset.css
import ErrorsContainer from "./components/Error/Container";
import Header from "./components/Header";
import { initStores } from "./stores";
import { Provider } from "mobx-react";
import typography from "./utils/typography";
// font styles
typography.injectStyles();
class App extends React.Component {
public onErrorDismiss = () => {
return null;
};
public render() {
return (
<Provider {...initStores()}>
<div className="App">
<Header foo="string" />
<ErrorsContainer />
</div>
</Provider>
);
}
}
export default App;
The specific error message I am encountering during compilation reads as follows:
(7,1): Import sources within a group must be alphabetized.
Here is an excerpt from my tslint.json file:
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"interface-name": [true, "never-prefix"]
}
}
Although I believe the import order is correct, the compilation process still fails. Any insights on why this might be happening?