Question: getting "import/no-unresolved" with eslint in TypeScript project

[maurocolella]

Hi,

I am struggling to get TypeScript to resolve this export/module, and I wasn't sure how to ask for help.

[benz2012]

Me too, and originally I thought it was an real import error however I see the CSS resolving in my build output. I don't believe TypeScript is relevant to the issue.

For me the steps to reproduce were

1. spin up a project with create-react-app
2. npm install overlayscrollbars
3. Within any source js/jsx file in the tree: import 'overlayscrollbars/overlayscrollbars.css'

Which gives

Unable to resolve path to module 'overlayscrollbars/overlayscrollbars.css' import/no-unresolved

Given that this seems to be a newer NodeJS import feature due to the note in the README about using a different import for older Node version, it makes me think that this might be an issue with ESLint itself 🤷

[KingSora]

Good day @maurocolella / @benz2012

Do you have any example code for me? What packages did you install, which node version are you using and how does your eslint and tsconfig files look like?

[benz2012]

@KingSora Here you go https://github.com/benz2012/overlayscrollbars-issues-570

This is create-react-app v5.0.1 with the addition of the airbnb eslint config, which enables errors on import/no-unresolved.

My Node version is v18.16.0

[benz2012]

Upgrading to latest Node stable (v18.18.2) seems to obfuscate the error during an npm start but the error still consistently exists during an npm run build, and within the VSCode plugin, so I think that's just an issue with CRA having access to different eslint versions

[benz2012]

I've even tried ejecting the CRA and then manually upgrading eslint and eslint-webpack-plugin, but that didn't resolve the issue. Basically, I'm curious if CRA is core to the issue here, and was hoping to not have to spin up a React project from scratch to test that assumption, lol

[KingSora]

@maurocolella @benz2012 I believe you two have the same issue here. Turns out this is a known issue for eslint and CRA:

• Interpreting exports fields in package.json facebook/create-react-app#10892
• no-unresolved is not aware of exports definition in package.json import-js/eslint-plugin-import#1810

As long as your build works you could just do something like:

// eslint-disable-next-line import/no-unresolved
import 'overlayscrollbars/overlayscrollbars.css';

But since this is a little bit unsatisfactory I've made some compatibility changes in the newest version v2.4.1 where you can now always use the path import 'overlayscrollbars/styles/overlayscrollbars.css'; regardless of your environment.

So going forward 'overlayscrollbars/styles/overlayscrollbars.css' will always work, while 'overlayscrollbars/overlayscrollbars.css' only works if the bundler and your linter know how to handle the exports field in the package.json.

@benz2012 thanks again for you example repo which helped me to figure this issue out, this made the process much quicker

[benz2012]

Awesome! Confirming the lengthier import works for me in v2.4.1. Thank you

[KingSora]

@maurocolella I'll close this issue for now.. In case your problem is not solved please don't hesitate to give feedback here or to open a new issue.

[maurocolella]

Appreciate it, thanks. Just wanted to note that I am not using create-react-app, but if this resolves typings for other users, then fantastic! I am thankful.