{"id":604,"hash":"b057e48e911980e792fef67f2de13f4babf3076a35321cd35994e20bfc722ee2","pattern":"ESLint - Error: Must use import to load ES Module","full_message":"I am currently setting up a boilerplate with React, TypeScript, styled components, Webpack, etc., and I am getting an error when trying to run ESLint:\n\nError: Must use import to load ES Module\n\nHere is a more verbose version of the error:\n\n/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts\n  0:0  error  Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js\nrequire() of ES modules is not supported.\nrequire() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains \"type\": \"module\" which defines all .js files in that package scope as ES modules.\nInstead rename definition.js to end in .cjs, change the requiring code to use import(), or remove \"type\": \"module\" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json\n\nThe error occurs in every single one of my .js and .ts/ .tsx files where I only use import or the file doesn't even have an import at all. I understand what the error is saying, but I don't have any idea why it is being thrown when in fact I only use imports or even no imports at all in some files.\n\nHere is my package.json file where I trigger the linter from using npm run lint:eslint:quiet:\n\n{\n  \"name\": \"my-react-boilerplate\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.tsx\",\n  \"directories\": {\n    \"test\": \"test\"\n  },\n  \"engines\": {\n    \"node\": \">=14.0.0\"\n  },\n  \"type\": \"module\",\n  \"scripts\": {\n    \"build\": \"webpack --config webpack.prod.js\",\n    \"dev\": \"webpack serve --config webpack.dev.js\",\n    \"lint\": \"npm run typecheck && npm run lint:css && npm run lint:eslint:quiet\",\n    \"lint:css\": \"stylelint './src/**/*.{js,ts,tsx}'\",\n    \"lint:eslint:quiet\": \"eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern --quiet\",\n    \"lint:eslint\": \"eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern\",\n    \"lint:eslint:fix\": \"eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern --quiet --fix\",\n    \"test\": \"cross-env NODE_ENV=test jest --coverage\",\n    \"test:watch\": \"cross-env NODE_ENV=test jest --watchAll\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"precommit\": \"npm run lint\"\n  },\n  \"lint-staged\": {\n    \"*.{ts,tsx,js,jsx}\": [\n      \"npm run lint:eslint:fix\",\n      \"git add --force\"\n    ],\n    \"*.{md,json}\": [\n      \"prettier --write\",\n      \"git add --force\"\n    ]\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"npx lint-staged && npm run typecheck\"\n    }\n  },\n  \"resolutions\": {\n    \"styled-components\": \"^5\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.5.4\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.5.0\",\n    \"@babel/preset-env\": \"^7.5.4\",\n    \"@babel/preset-react\": \"^7.0.0\",\n    \"@types/history\": \"^4.7.6\",\n    \"@types/react\": \"^17.0.29\",\n    \"@types/react-dom\": \"^17.0.9\",\n    \"@types/react-router\": \"^5.1.17\",\n    \"@types/react-router-dom\": \"^5.1.5\",\n    \"@types/styled-components\": \"^5.1.15\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.0.0\",\n    \"babel-cli\": \"^6.26.0\",\n    \"babel-eslint\": \"^10.0.2\",\n    \"babel-loader\": \"^8.0.0-beta.6\",\n    \"babel-polyfill\": \"^6.26.0\",\n    \"babel-preset-env\": \"^1.7.0\",\n    \"babel-preset-react\": \"^6.24.1\",\n    \"babel-preset-stage-2\": \"^6.24.1\",\n    \"clean-webpack-plugin\": \"^4.0.0\",\n    \"dotenv-webpack\": \"^7.0.3\",\n    \"error-overlay-webpack-plugin\": \"^1.0.0\",\n    \"eslint\": \"^8.0.0\",\n    \"eslint-config-airbnb\": \"^18.2.0\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-config-with-prettier\": \"^6.0.0\",\n    \"eslint-plugin-compat\": \"^3.3.0\",\n    \"eslint-plugin-import\": \"^2.25.2\",\n    \"eslint-plugin-jsx-a11y\": \"^6.2.3\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"eslint-plugin-react\": \"^7.14.2\",\n    \"eslint-plugin-react-hooks\": \"^4.2.0\",\n    \"extract-text-webpack-plugin\": \"^3.0.2\",\n    \"file-loader\": \"^6.2.0\",\n    \"html-webpack-plugin\": \"^5.3.2\",\n    \"husky\": \"^7.0.2\",\n    \"prettier\": \"^2.4.1\",\n    \"raw-loader\": \"^4.0.2\",\n    \"style-loader\": \"^3.3.0\",\n    \"stylelint\": \"^13.13.1\",\n    \"stylelint-config-recommended\": \"^5.0.0\",\n    \"stylelint-config-styled-components\": \"^0.1.1\",\n    \"stylelint-processor-styled-components\": \"^1.10.0\",\n    \"ts-loader\": \"^9.2.6\",\n    \"tslint\": \"^6.1.3\",\n    \"typescript\": \"^4.4.4\",\n    \"url-loader\": \"^4.1.1\",\n    \"webpack\": \"^5.58.2\",\n    \"webpack-cli\": \"^4.2.0\",\n    \"webpack-dev-server\": \"^4.3.1\",\n    \"webpack-merge\": \"^5.3.0\"\n  },\n  \"dependencies\": {\n    \"history\": \"^4.10.0\",\n    \"process\": \"^0.11.10\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.2.0\",\n    \"styled-components\": \"^5.2.1\"\n  }\n}\n\nHere is my .eslintrc file:\n\n{\n  \"extends\": [\"airbnb\", \"prettier\"],\n  \"parser\": \"babel-eslint\",\n  \"plugins\": [\"prettier\", \"@typescript-eslint\"],\n  \"parserOptions\": {\n    \"ecmaVersion\": 8,\n    \"ecmaFeatures\": {\n      \"experimentalObjectRestSpread\": true,\n      \"impliedStrict\": true,\n      \"classes\": true\n    }\n  },\n  \"env\": {\n    \"browser\": true,\n    \"node\": true,\n    \"jest\": true\n  },\n  \"rules\": {\n    \"arrow-body-style\": [\"error\", \"as-needed\"],\n    \"class-methods-use-this\": 0,\n    \"react/jsx-filename-extension\": 0,\n    \"global-require\": 0,\n    \"react/destructuring-assignment\": 0,\n    \"import/named\": 2,\n    \"linebreak-style\": 0,\n    \"import/no-dynamic-require\": 0,\n    \"import/no-named-as-default\": 0,\n    \"import/no-unresolved\": 2,\n    \"import/prefer-default-export\": 0,\n    \"semi\": [2, \"always\"],\n    \"max-len\": [\n      \"error\",\n      {\n        \"code\": 80,\n        \"ignoreUrls\": true,\n        \"ignoreComments\": true,\n        \"ignoreStrings\": true,\n        \"ignoreT","ecosystem":"npm","package_name":"node.js","package_version":null,"solution":"I think the problem is that you are trying to use the deprecated babel-eslint parser, last updated a year ago, which looks like it doesn't support ES6 modules.  Updating to the latest parser seems to work, at least for simple linting.\n\nSo, do this:\n\nIn package.json, update the line \"babel-eslint\": \"^10.0.2\", to \"@babel/eslint-parser\": \"^7.5.4\",.  This works with the code above but it may be better to use the latest version, which at the time of writing is 7.19.1.\nRun npm i from a terminal/command prompt in the folder\nIn .eslintrc, update the parser line \"parser\": \"babel-eslint\", to \"parser\": \"@babel/eslint-parser\",\nIn .eslintrc, add \"requireConfigFile\": false, to the parserOptions section (underneath \"ecmaVersion\": 8,) (I needed this or babel was looking for config files I don't have)\nRun the command to lint a file\n\nThen, for me with just your two configuration files, the error goes away and I get appropriate linting errors.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/69554485/eslint-error-must-use-import-to-load-es-module","votes":204,"created_at":"2026-04-19T04:51:24.115304+00:00","updated_at":"2026-04-19T04:51:24.115304+00:00"}