eslint-plugin-import: False positive of `no-import-module-exports` on `module` variable defined in the module

import 'something'; // => Cannot use import declarations in modules that export using CommonJS (module.exports = 'foo' or exports.bar = 'hi')  import/no-import-module-exports

export const module = {};
module.foo = 42;

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 3
  • Comments: 18 (10 by maintainers)

Most upvoted comments

@ljharb I can reproduce it with the following code as per eslint-plugin-import@2.26.0:

import React from 'react'; // error   Cannot use import declarations in modules that export using ...
import { render } from 'react-dom'; // error
import { loadableReady } from '@loadable/component'; // error
import { BrowserRouter } from 'react-router-dom'; // error
import { HelmetProvider } from 'react-helmet-async'; // error


if (module.hot) {
  render(app, root);
  module.hot.accept();
} else {
  loadableReady(() => {
    hydrateApp(app, root);
  });
}

If I remove the module.hot condition there is no error, the following code is lint free.

import React from 'react';
import { render } from 'react-dom'; 
import { loadableReady } from '@loadable/component'; 
import { BrowserRouter } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';

@snitin315 The solution for the module.hot issue with webpack’s [HotModuleReplacementPlugin](https://webpack.js.org/plugins/hot-module-replacement-plugin) is to use import.meta.webpackHot.

@snitin315 i definitely can reproduce the warnings, but they seem valid to me - module isn’t in scope in ES Modules. I’m not sure how to resolve this.

right

unfortunately I can’t use import because the module system I’m using is CJS (due to "module": "commonjs" entry on my tsconfig)

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'.ts(1343)

What’s targeted shouldn’t matter, only the source; module isn’t available in ESM, and your source is ESM.

My guess is that there’s a way webpack can use import.meta instead of module, and you’d both have less confusing code, and also bypass this overly-aggressive lint rule (that said, i’m still happy to remove some false positives)

I figured out that I’m getting those lint errors when I access any property of module variable that was created by webpack.

image

image

Here’s the code: https://gitlab.com/micalevisk/eslint-plugin-import-issue-2181

I might be missing something. I appreciate your help @ljharb

@micalevisk if you could set up a repro repo that would be most helpful.

You need to set sourceType: ‘module’ in parserOptions

I’m using it already 😕

image

this error arises when I use eslint-config-airbnb-base@15.0.0 (eslint v8.2.0), with v14 it worked. I didn’t investigate this further yet