search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.84k stars 214 forks source link

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

Closed maurocolella closed 12 months ago

maurocolella commented 1 year ago

Hi,

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

benz2012 commented 12 months ago

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 commented 12 months ago

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 commented 12 months ago

@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

error-but-css-added-to-bundle
benz2012 commented 12 months ago

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 commented 12 months ago

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 commented 12 months ago

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

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 commented 12 months ago

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

KingSora commented 12 months ago

@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 commented 11 months ago

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.