Package path ./dist/slimselect.css is not exported from package "\node_modules\slim-select\package.json""

[paradoxe35]

No description provided.

[stefan-lacatus]

Are you using Webpack 5? This seems to be the root cause: webpack/webpack#9509

A new release is needed where the package.json also exposes the css files as "exported"

[paradoxe35]

except using copy-webpack-plugin i couldn't find any other way around it

[bachy]

i have this problem to, css are not loaded with js, the slim select are not styled.
and if i try to import slim-select's css via import 'slim-select/dist/slimselect.min.css' on my main.js i have the same error

Module not found: Error: Package path ./dist/slimselect.min.css is not exported from package /app/node_modules/slim-select (see exports field in /app/node_modules/slim-select/package.json)

no way neither to import the scss from my sass files @import '~slim-select/slimselect.css';

SassError: File to import not found or unreadable: ~slim-select/src/slim-select/slimselect.scss.

i tried to modify the slim-select package.json without success so far

"exports": {
    ".":{
      "require": "./dist/slimselect.min.js",
      "import": "./dist/slimselect.min.mjs"
    },
    "style": "./dist/slimselect.min.css",
    "sass": "./src/slim-select/slimselect.scss",
    "./src/": "./src/",
    "./dist/": "./dist/"
  }

[bachy]

except using copy-webpack-plugin i couldn't find any other way around it

could you elaborate on your solution with copy-webpack-plugin please ?

[bachy]

with

"exports": {
    ".":{
      "require": "./dist/slimselect.min.js",
      "import": "./dist/slimselect.min.mjs"
    },
    "./slimselect.min.css": {
      "require": "./dist/slimselect.min.css",
      "import": "./dist/slimselect.min.css"
    }
  }

i can import css from main.js
made a PR #271

[paradoxe35]

I removed exports key from slim-select package.json, and it works

[paradoxe35]

except using copy-webpack-plugin i couldn't find any other way around it

could you elaborate on your solution with copy-webpack-plugin please ?

remove exports section from slim-select package.json

[timdk]

@brianvoe can you comment on why #271 was rejected?

Is it because target branch was master instead of develop, or another reason?

[timdk]

I have been testing a global export from dist in addition to the current values

From https://webpack.js.org/guides/package-exports/

Properties ending with a / will forward a request with this prefix to the old file system lookup algorithm.

  "exports": {
    ".": {
      "require": "./dist/slimselect.min.js",
      "import": "./dist/slimselect.min.mjs"
    },
    "./dist/": "./dist/"
  },

This fixes the broken imports from scss files

@import '~slim-select/dist/slimselect.min.css';

I can open a PR if this is an acceptable fix.

[brianvoe]

I suppose i dont fully follow the issue. Why do most other people not have this issue? Do you have an example comparison of another package that i can look at for reference?

[timdk]

I encountered the issue only when I upgraded my toolchain to webpack 5 and upgraded Slim Select to 1.27.0 from 1.26.0.

It's mentioned in the issue on webpack's repo (linked above in stepha-lacatus's comment) webpack/webpack#9509 (comment)

An important note here: once the exports field is specified, it should be impossible to import any subpath that is not explicitly specified in the field.

So the combination of adding the exports field in v1.27 and upgrading webpack caused it for me. I downgraded to v1.26 until I had time to look closer.

For what it's worth bachy's solution didn't work for my use case. Based on the docs here https://webpack.js.org/guides/package-exports/#reference-syntax maybe it would have worked if I added sass and css keys in addition to require and import, but given the dist directory is for the bundles I think it's OK to add that to exports.

I had a look around at a few open source repos and I'm struggling to find any that have exports defined in package.json.

[dpilafian]

@brianvoe While trying to resolve a webpack build issue in an unrelated package, I encountered the same CSS "is not exported from package" error.

In case it's helpful, here's the background:
center-key/pretty-print-json#53

I ended up going with:

"./": "./dist/"

because the resulting @import statement is cleaner.

@timdk Thanks for the code!

[Epskampie]

I just made a symlink: ln -s ../node_modules/vendor/slim-select/slimselect.min.css' .

After that you can import './slimselect.min.css'.

[brianvoe]

New update coming soon. Not sure if this is still an issue but if it pops up again after the update we can reopen this.

[glaszig]

yes. still an issue. specifically with webpack 5. without proper exports config in package.json it'll not find any module and complain about missing exports.

see https://webpack.js.org/guides/package-exports/

[brianvoe]

All the build process stuff is the most frustrating thing in the world. Please submit a pr and ill merge it in if you think you have an update that will help "fix" this

[glaszig]

the most frustrating thing

indeed it is.

i'll see what i can do. for everybody else i guess it's something similar to hotwired/stimulus#569. only need to figure out how to treat all the other exports...

[AdiDD]

I found a workaround for this, by doing the import in a css file that I was using, with @import url('/node_modules/slim-select/dist/slimselect.css'); instead of doing it in the js file.

[sshkpp]

I found a workaround for this, by doing the import in a css file that I was using, with @import url('/node_modules/slim-select/dist/slimselect.css'); instead of doing it in the js file.
Thanks! Its works for me.

[marko-hologram]

In case someone else lands here with this issue while migrating from some older version to this or from lack of documentation on this particular part. Code I added here seems to have been added in v2.5.1 so make sure to have at least that version 6dbd0b5

I'm using latest (as of now) v2.6.0 and I managed to import styles using this import statement:

import "slim-select/styles";

Discovered this by checking out the package.json for this project and exports field declares this:

"exports": {
  ".": {
    "require": "./dist/slimselect.umd.js",
    "import": "./dist/slimselect.es.js"
  },
  "./styles": "./dist/slimselect.css"
},

So doing /styles import will actually import /dist/slimselect.css.