0

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"
        }
    }
}

0 Answers0