One of PrimeReact DataTable component's import/export implementation uses nested imports to import some packages like so -
const DataTable = () => {
const exportPdf = () => {
import('jspdf').then(jsPDF => {
import('jspdf-autotable').then(() => {
const doc = new jsPDF.default(0, 0)
doc.autoTable(exportColumns, customers)
doc.save('customers.pdf')
})
})
}
return (
// code that uses exportPdf() like -
<Button onClick={exportPdf} />
)
}
My linter is giving me Parsing error: 'import' and 'export' may only appear at the top level as it should. I want to know how to disable this specific ESLint warning or other ways to resolve this.
If it helps, I used create-react-app and my .eslintrc is as follows -
module.exports = {
"env": {
"browser": true,
"es6": true,
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
],
"rules": {
"indent": [
"error",
"tab",
{ "SwitchCase": 1 }
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single",
],
"jsx-quotes": [
"error",
"prefer-single"
],
"semi": [
"error",
"never"
],
"eqeqeq": "error",
"no-trailing-spaces": "error",
"object-curly-spacing": [
"error", "always"
],
"arrow-spacing": [
"error", { "before": true, "after": true }
],
"no-console": 0,
"react/prop-types": 0
},
"settings": {
"react": {
"version": "detect"
}
}
}