Can't resolve tippy.js/dist/tippy.css

[jacobgraf]

Per the docs, I am using the following in app.js. I use Laravel Mix/Webpack as my preprocessor.

// Tippy.js
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'

When compiling, I get the following error...

Module not found: Error: Can't resolve 'tippy.js/dist/tippy.css' in '/Users/jacobgraf/Sites/mysite/src/js'

When I look in node_modules/tippy.js, I don't even see a dist directory. I deleted the whole node_modules directory and re-ran npm install and still no dist directory.

What am I missing here?

[pirtpal-matharu]

I have also same issue when i import in js file import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css';

ERROR in ./node_modules/tippy.js/dist/tippy.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}

[jacobgraf]

I was also getting this starting this morning. I have no idea what changed or how to fix it, but maybe all of this is related?

[jacobgraf]

It appears css-loader was automatically updated from 5.x to 6.x which is breaking all these things. Not sure what package is allowing the breaking update through, but I need to get css-loader back to 5.x which fixes everything.

[jacobgraf]

FYI, I found that css-loader is getting updated to the newly-released 6.x. css-loader isn't even in my package.json which means some package I am using is allowing it to get updated to 6.x. In the meantime, I hard-coded my package.json to css-loader 5.x which fixes the issue. Still trying to figure out what exactly is allowing the update to 6.x to occur. Hope that helps you get back up and running too!

"css-loader": "^5.2"