Update to v11 is breaking my app due to new exports in package.json

[NadimHallaq]

Hello Dmitry,

Recent update is breaking my app, I'm using remix. App works fine on v10 but when I update to v11 all import statements break with errors like Package subpath './bundle' is not defined by "exports"

I also uploaded a photo of the error coming from import statements.

It seems that reshaped/bundle is not being seen at all from my app, only subfolders I can see are bin, dist, nodemodules and postcss and package.json files

I checked the Remix repo, it seems the way you are imported the package is the same.

Any ideas of what could be causing the issue!

Thank you,

[blvdmitry]

Thanks for reporting, will patch the release later today

[blvdmitry]

Can you check if imports work as expected now? (same 1.11 archive)

[NadimHallaq]

Imports are working from reshaped/bundle including the Timeline component, but now wavy underlines are showing under every reshaped import statement with error message Cannot find module 'reshaped/bundle' or its corresponding type declarations.

I tried removing the bundle but as expected it breaks with SyntaxError: Unexpected token 'export'

[blvdmitry]

Ok, let me test it a bit more with the remix example we have.

[blvdmitry]

I've tried installing latest Remix and Reshaped using their basic example (https://github.com/remix-run/examples/blob/main/basic/) and it hasn't complained about the imports.

Maybe it's worth trying nuking the node_modules completely and making sure that reshaped package installation is not cached. I'm going to update our starter in this repo using this example and going to also try the new built-in css modules support there.

[blvdmitry]

Pushed an updated example, that doesn't have all extra dependencies, works with v1.11 and seems to work with css modules and node_modules side effects automatically. If there are no edge cases you can find with those additional config flags – you'll be able to use imports directly from our ESM build instead of the bundle:

https://github.com/reshaped/community/tree/master/examples/remix-starter

[NadimHallaq]

Okay everything is working fine thank you! Painfull update from both remix and reshaped but had to happen someday!

Just a question: Is there a benefit from remix supporting css modules, and whats the difference from importing reshaped or reshaped/bundle ??

[blvdmitry]

File exported in the index reshaped file is using esm build, while reshaped bundle has everything pre compiled. Depending on the environment - bundler a can tree shake unused code including css, since its import happens on the component level.

Glad that it worked for you in the end and wonder what was the difference for Remix. I assume that might be something related to the Typescript version used inside the remix build process or something like that. Thanks for beating with it 🙏