Webpack 5 support is broken

[transitive-bullshit]

See vercel/swr#1112 and #20

[DaniGuardiola]

@transitive-bullshit we can probably do without swr, don't you think? No need to revalidate here!

I'm working on the project today btw, so I could test it on a branch, and see how it goes.

[transitive-bullshit]

Agreed; swr seems like overkill.

[transitive-bullshit]

I think I got it working with 0.5.3.

It seems that whenever we try to get fancy with package.json exports:

  "type": "module",
  "exports": {
    "./src/styles.css": "./src/styles.css",
    ".": {
      "import": "./build/esm/index.js",
      "default": "./build/cjs/index.js"
    }
  },

the result is that the cjs version doesn't work because webpack views it as "type": "module" and interprets it as ESM. For now, just removing the exports seems to solve everything...

[sokra]

You can place a package.json here: build/cjs/package.json with { "type": "commonjs" }.

Otherwise build/cjs/index.js is below a package.json with "type": "module" and treated as ESM.

[DaniGuardiola]

Thanks @sokra, I'm gonna try to implement it. Just for clarification, what I need to do is:

• Create the build/cjs/package.json file with { "type": "commonjs" }
• Don't ignore this file in git

Is that correct? It is a bit weird for me to put a file in the build dir. Won't it get deleted/overridden by webpack on build?

[transitive-bullshit]

@DaniGuardiola we would need to do something like:

{
  "postbuild": "echo '{ \"type\": \"commonjs\" }' > build/cjs/package.json"
}

which would create this package file every time. This isn't really elegant, however.. it's unfortunate that Typescript doesn't support this as output microsoft/TypeScript#18442.

Currently, just removing exports and relying on the "old" behavior works fine afaict with both Webpack v4 and Webpack v5:

{
  "main": "build/cjs/index.js",
  "module": "build/esm/index.js",
  "typings": "build/esm/index.d.ts"
}

without adding the new exports feature.

@sokra really appreciate you chiming in 💪 and congrats on the new job at Vercel! I've run into this exact same issue with 3-4 different TypeScript-powered packages that I own where my end result has been to degrade to the old, non-exports syntax which seems to "just work" by being less explicit. I'm curious how package authors like us who want to support TypeScript => ESM + CJS should be doing things going forwards since imho the exports feature seems to make things more complicated and brittle without much upside.

Thanks!

[transitive-bullshit]

Fixed in 0.6.0

[StarAzure]

Fixed in 0.6.0

0.6.0 of what ?