rollup-plugin-peer-deps-external | Automatically externalize peerDependencies | Plugin library

I kind of figured it out. I used rollup-plugin-postcss-modules instead of rollup-plugin-postcss. This is what my rollup.config.js ended up looking like:

I'm a bit surprised you're loading types from the types.d file direct and with a build path! I'd expect rather import { Type } from '@myorg/component-library.

That's because as part of creating the package.json for a typescript-authored npm library you'd be defining a main property pointing to the place that exports all the Javascript properties and a types property pointing to the place that exports the typescript types you want.

If that main entry point (because of your build process) is actually build/index.js and the corresponding types file is build/index.d.ts then you'd never directly reference the build folder or files when importing - pointing to the right path is dealt with by the bundling process.

Take a look at a mainstream (but simple) typescript npm module like https://github.com/jamiebuilds/unstated-next/blob/master/package.json ( https://www.npmjs.com/package/unstated-next )

You can see the main property pointing to the file which should export the javascript names https://github.com/jamiebuilds/unstated-next/blob/master/package.json#L6 and the types property pointing to the file which should export the types https://github.com/jamiebuilds/unstated-next/blob/master/package.json#L9 and these happen to be in the 'dist' folder but this is never referenced when importing it as per the docs at https://www.npmjs.com/package/unstated-next

So my setup actually was working. There was somehow a glitch in the symlink. I as able to resolve by running yarn unlink and yarn link. The package is now bundling correctly.

If this issue happens while you're linking the local version of your library in your main project to speed up the development. It might be related to "duplicate version of React".

https://reactjs.org/warnings/invalid-hook-call-warning.html

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

In short:

• run npm link in /your-app/node_modules/react. This should make the React's global link.
• run npm link react in /your-ui-library. This should make the library use the application’s React copy.

So, after two weeks, it turns out that having an image in the theme was what was causing this. Changing the image from an import to a url reference fixed this problem.

You don't really need to do that if you use named exports and any modern bundler for building the app. When Rollup detects you are not using some export it will be removed due to tree-shaking.

If you still want to do it pass an object with the different entries you want to the input option:

Well I look stupid, I randomly decided to change from duckduckgo to google to look up the issue and got a few github links for it one being https://github.com/konvajs/react-konva/issues/189 which made me think to remove my react konva and konva and reinstall it to the latest version and it worked my react-konva was on 16.13 or something and when I upgraded ended up on 17.0.0 which worked

You have to use the postcss plugin before the commonjs one, or it will try to interpret the contents of CSS files as JavaScript. Maybe it also needs to come before the resolve one but not sure about that.

After making those changes you probably won't need to do anything for .less files since rollup-plugin-postcss already handles them.

Edit: after looking at the repository, you didn't need to use the postcss plugin before the other ones, just omit the postcss extensions option or set it correctly (was missing a dot in front of css):

after investigating a lil bit more, i found out that is not your bundlers error (nor webpack, parcel or rollup). To fix this issue, you just have to publish your build into npm and install it from there (not locally) and voila, it works. cheers