score:290
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.
so, do this:
- in 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.16.3. - run
npm i
from a terminal/command prompt in the folder - in .eslintrc, update the parser line
"parser": "babel-eslint",
to"parser": "@babel/eslint-parser",
- in .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) - run the command to lint a file
then, for me with just your two configuration files, the error goes away and i get appropriate linting errors.
score:-3
"@babel/eslint-parser" depends on "@babel/core". so after "npm install @babel/eslint-parser -s", u should npm i @babel/core -s
score:0
in visual studio code, remove eslint extension, and install again.
score:1
this can happen with quite a lot of lately released frameworks like vuejs or nuxt, mostly because of the usage of esm modules (not fully or at all supported by older node.js versions).
the fastest approach for this is to use something like nvm, after installing it, you could run:
nvm i 16
(v16 is the latest lts as of time of writing)nvm use 16
and you'll be running the project with a full esm support.
you can double check that by running node -v
.
Source: stackoverflow.com
Related Query
- ESlint - Error: Must use import to load ES Module
- React npm run build - Must use import to load ES Module error
- Dealing with "Failed to load plugin 'react' declared in '.eslintrc': Cannot find module 'eslint-plugin-react'" ESLint error
- Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported
- Nextjs Redux Persist Error - SyntaxError: Cannot use import statement outside a module
- Must use import to load ES Module: /Users/*path/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js require() of ES modules is not supported
- Cannot use import statement outside a module error in React JS + JEST + Antd
- ESLint Must use destructuring state assignment
- Jest - SyntaxError: Cannot use import statement outside a module
- Workbox service worker: Cannot use import statement outside a module
- "Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js
- eslint + jsconfig + nextjs module path aliases (absolue path import - @)
- npx create-react-app not working "Must use import to load ES Module:"
- Using Webpack alias cause to ESLint error on import alias in WebStorm
- SyntaxError: Cannot use import statement outside a module when start NodeJS from IntellijIDEA
- Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'
- Reactjs eslint rule must use destructuring state assignment
- React-Image-Annotate - SyntaxError: Cannot use import statement outside a module
- Next.js Import image error Module parse failed: Unexpected character '�' (1:0)
- cannot use import statement outside a module with Next.js
- react jest : Cannot use import statement outside a module
- Webpack error while loading module DomUtils after import enzyme
- ESLint throws an "is missing in props validation" error when use destructuring in function parameter
- How to use import () to dynamically load components in React?
- Storybook main.ts: Cannot use import statement outside a module
- MUI5 not working with jest - SyntaxError: Cannot use import statement outside a module
- If I use a typescript tuple in my react-app i get a eslint error on line 1 in vscode?
- how to import multiple components as a single component and use them in lazy load
- React-Redux: Actions must be plain objects. Use custom middleware for async actions Error
- I am not able to use ecma6 import in my code getting error "unexpected token import "
More Query from same tag
- Get previous props value with React Hooks
- hide id or query string while passing through react router
- error map in missing props reactjs proptypes
- How to solve TypeError: items.map is not a function
- How can I throttle the setState in React?
- React JS and Google Spreadsheets: Cannot Read Property '2' of Null
- React/Redux - TypeError: Cannot read property 'props' of undefined
- Validation in react MDC Web
- Android react-native app not picking up font
- You may need an appropriate loader to handle this file type upload image file
- Oscillator built with react hooks won't stop
- How to aovid using tabIndex for OnKeyDown catch event in react?
- How to immediately update summary value, when column value in antd Table changes?
- Redirect url to www in reactjs nextjs as a server side 301
- Query lost on page refresh in NextJS
- ' TypeError: [Variable].getDay is not a function
- File Upload error - PHP and React
- Displaying an image when item is hovered
- react-mapbox-gl accessing lat and lon on click
- Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Redux action file
- Inject Props to React Component
- react loses 'this' context inside promise
- Converting Typescript Code to Javascript Code?
- Visual Studio: Auto complete HTML tags inside an embedded babel script
- How to pass and get additional data/values from react-leaflet Marker?
- How and when to set mobx domain object properties?
- How to delete this data from firebase?
- Redux app: Cannot read property 'filter' of undefined
- How to access ref that was set in render
- Custom options cannot be selected in MUI Autocomplete?