no-cycle breaks when my files import node_module index.es.js files from fortawesome

[mikestopcontinues]

This is a totally wacky one. The files throwing errors below are imported by two of my js files. And for some reason, they're getting parsed, even though no other files in node_modules are. Of course, I'm in a monorepo, which might confound things a bit:

/@arc // root package
  /node_modules // actual modules hoisted to here
  /apps
    /react-app
      /components
        /Icon.js // importer

The import statements are nothing special:

import {library} from '@fortawesome/fontawesome-svg-core';
import {faFacebookF} from '@fortawesome/free-brands-svg-icons';
import {faCalendar} from '@fortawesome/free-regular-svg-icons';
import {faBook} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

And these are the errors:

Error while parsing /Users/msc/Code/hub/@arc/node_modules/@fortawesome/fontawesome-svg-core/index.es.js
Line undefined, column undefined: Cannot read property 'tokens' of null
`parseForESLint` from parser `/Users/msc/Code/hub/@arc/node_modules/babel-eslint/lib/index.js` is invalid and will just be ignored

Error while parsing /Users/msc/Code/hub/@arc/node_modules/@fortawesome/free-brands-svg-icons/index.es.js
Line undefined, column undefined: Cannot read property 'tokens' of null
`parseForESLint` from parser `/Users/msc/Code/hub/@arc/node_modules/babel-eslint/lib/index.js` is invalid and will just be ignored

Error while parsing /Users/msc/Code/hub/@arc/node_modules/@fortawesome/free-regular-svg-icons/index.es.js
Line undefined, column undefined: Cannot read property 'tokens' of null
`parseForESLint` from parser `/Users/msc/Code/hub/@arc/node_modules/babel-eslint/lib/index.js` is invalid and will just be ignored

Error while parsing /Users/msc/Code/hub/@arc/node_modules/@fortawesome/free-solid-svg-icons/index.es.js
Line undefined, column undefined: Cannot read property 'tokens' of null
`parseForESLint` from parser `/Users/msc/Code/hub/@arc/node_modules/babel-eslint/lib/index.js` is invalid and will just be ignored

Error while parsing /Users/msc/Code/hub/@arc/node_modules/@fortawesome/react-fontawesome/index.es.js
Line undefined, column undefined: Cannot read property 'tokens' of null
`parseForESLint` from parser `/Users/msc/Code/hub/@arc/node_modules/babel-eslint/lib/index.js` is invalid and will just be ignored

The errors go away when I disable no-cycle. Thanks again for the help!

[ljharb]

https://unpkg.com/@fortawesome/fontawesome-svg-core@1.2.28/index.es.js is invalid, because .es.js doesn't mean anything. node module files that end in .js have to be CJS, not ESM (no export token, for example), unless their package.json has type: module, which that one doesn't. Raw ESM files are .mjs.

In this case, that package is broken, because it published what should be CJS, as raw ESM.

I believe you can add that package to the import/ignore setting, and it should be ignored? Otherwise, #1681 would probably solve this as well.

[mikestopcontinues]

Thanks. I'm going to open a ticket with them and try the setting now.

[ljharb]

Thanks, please post the link here when you do so I can subscribe :-)

[robmadole]

@ljharb can you help me understand this a little better?

The index.es.js has an export token at the bottom. And the package.json lists the following:

"module": "index.es.js",
"jsnext:main": "index.es.js",

What am I missing? Can you point me to some spec or official doc that outlines the rules?

[ljharb]

Right, but .js files in node_modules can only use CJS, not ESM - ie, module.exports =.

[robmadole]

@ljharb any official source doc? We're happy to make changes but I need a reference.

[ljharb]

node’s official docs for .js vs .mjs, but no, there’s no official doc for “js files should always be transpiled on prepublish into CJS”, that’s just the overwhelming community convention for a decade.

[robmadole]

Thanks @ljharb