Question: ESM to CJS

[TatisLois]

Wondering how difficult it would be to transpile the dist ESM output into CJS?

I'm using PayloadCMS which is built on CJS and does not at this moment support ESM so i'm running into this error

/Users/xxx/xxx/xxx/xxx/node_modules/reshaped/dist/index.js:1 export { default as Accordion } from "./components/Accordion/index.js";

I tried adding vite to the reshaped folder and have it build to CJS to see if I could get a quick win but certain files such as /bundle, /bundle.css and /theme.css were not generated.

Before I go down a rabbit hole, I was wondering if their is an easier way or if it's just not worth pursuing.

Thank you 🙇🏽

[blvdmitry]

It's not hard to add a CJS build but since it will include both builds in the package and most of the times we need ESM as a default one – it will likely mean that you'll have to improve from a path like reshaped/cjs. Thinking about that, I wonder if just using our pre-built bundle would achieve the same for you, like in this Gatsby example: https://reshaped.so/content/docs/getting-started/integrations/gatsby#start-using-reshaped-components

[TatisLois]

I don't mind an explicit import path personally ie reshaped/cjs. By pre-built bundle do you mean installing from ./vendor/reshaped.tgz i'm already doing that. I also tried to unpack it and refactor the build directly but am not familiar enough with what needs to be changed to output cjs.

[blvdmitry]

I mean instead of import { Button } from "reshaped"; doing import { Button } from "reshaped/bundle";. But notice that in this case you also need to import reshaped/bundle.css once in your application since js and css are bundled separately

[TatisLois]

you're right 🙏🏽

import { Button } from "reshaped/bundle"; with importing the css worked.

My editor throws a type error but it's not causing a build issue

[blvdmitry]

Let me take a look into this

[blvdmitry]

I've updated the package.json "exports" field to correctly point to index.d.ts file for this use case and you'll need to use "nodenext" moduleResolution in tsconfig (https://www.typescriptlang.org/tsconfig#moduleResolution), going to add this information for the bundle imports setup documentation.

You can meanwhile try updating the package.json file of the Reshaped package in node_modules as well to see if that resolves your problem:

"exports": {
        ".": {
            "import": "./dist/index.js",
            "types": "./dist/index.d.ts"
        },
        "./themes/reshaped/theme.css": "./dist/themes/reshaped/theme.css",
        "./themes/fragments/twitter/theme.css": "./dist/themes/fragments/twitter/theme.css",
        "./postcss": "./postcss.js",
        "./bundle": {
            "import": "./dist/bundle.js",
            "types": "./dist/index.d.ts"
        },
        "./bundle.css": "./dist/bundle.css"
    },

[TatisLois]

Not sure why but this was still causing some issues, as of right now what's working is

importing like this import { Reshaped } from "reshaped/dist/bundle"; then manually patching the Reshaped package.json exports in node_modules with this line "./dist/bundle": "./dist/bundle.js" without it, it throws an error that the export isnt found in the subpath

[blvdmitry]

And that's happening on the latest version of Reshaped for you, right?

[blvdmitry]

@TatisLois after trying to find the differences across various build tools, I've decided to revert back to the pre-release script that moves everything to the root folder of the package. Going to release this now and going to include it into 1.13 release

[blvdmitry]

It's live now, can you check if it works again?

[TatisLois]

@blvdmitry just downloaded the latest 1.13.0 and when I remove the

dist from my imports and import directly from reshaped/bundle it throws this error Error: Package subpath './bundle' is not defined by "exports" in /Users/tatis/code/mejor/bento/node_modules/reshaped/package.json

package.json export

    "exports": {
        ".": {
            "import": "./dist/index.js",
            "types": "./dist/index.d.ts"
        },
        "./themes/reshaped/theme.css": "./dist/themes/reshaped/theme.css",
        "./themes/fragments/twitter/theme.css": "./dist/themes/fragments/twitter/theme.css",
        "./postcss": "./postcss.js",
        "./bundle": {
            "import": "./dist/bundle.js",
            "types": "./dist/index.d.ts"
        },
        "./bundle.css": "./dist/bundle.css"
    },

[TatisLois]

I think it struggles with this syntax

{
            "import": "./dist/bundle.js",
            "types": "./dist/index.d.ts"
        },

When I flatten it too "./bundle": "./dist/bundle.js",

It works fine, expect that I lose the typescript def so need to wrap it like this :(

const ReshapedText = (props: TextProps) => (
  <Text {...props}>{props.children}</Text>
);

[blvdmitry]

@TatisLois Hm, are you sure it's the latest one? Maybe try deleting npm cache and nuking node_modules. There should be no "exports" field in the package.json anymore if you check the file in the archive

[TatisLois]

@blvdmitry okay let me nuke, clean and fresh download!

[TatisLois]

Just for transparency it's reshaped-react-v1.13.0.tgz from the profile -> download react lib

[TatisLois]

Is that the right version to download, shouldnt it be bumping up on each release?

[blvdmitry]

Being outside the npm registry comes with a bit of chaos. I don't want to overwhelm others with small patch releases in the announcements, so I'm usually patching urgent DX requests in the same release. Do you think it would make sense to also bump the version of the release in the changelog for more transparency?

[TatisLois]

Idk how they did it but I was an early paid remix run supporter.

They used to have a setup where you could NPM install remix but would only actually install if you had a secret as an env variable.

That could be a nice solution, you get all the benefits of NPM but still have a pay wall.

Without it, I think doing what you're doing now is fine, I just wasn't sure if I was on a stale version or not.

[blvdmitry]

I think they had a private NPM registry for that, which I'm still planning to implement but have been focusing on the library and documentation first for now. I think once I'm closer to releasing v2 – I'll get back to the distribution problem.

[blvdmitry]

@TatisLois hey, has the update worked for you in the end or is there still something left that's blocking you? :)

[TatisLois]

@blvdmitry I was able to get it working by using patch-package to modify the exports in package.json. I lose the types but it works for the use case.

[blvdmitry]

Ok, I'll publish a few more small improvements tomorrow and I will publish them with another version used in the file, so hopefully it will reset the npm cache if that didn't work this time. Will let you know then

[blvdmitry]

@TatisLois 1.13.1 is live now