server side rendering / import into node was recently broken

Many thanks for antd-img-crop, which I really like and use at https://cocalc.com/config/account/avatar

Importing this package in node used to work:

mkdir tmp
cd tmp
npm init -y
npm install antd-img-crop@4.2.4
echo 'require('antd-img-crop')' > a.js
node a.js

Now it doesn’t:

mkdir tmp2
cd tmp2
npm init -y
npm install antd-img-crop@latest
echo 'require('antd-img-crop')' > a.js
node a.js
/tmp/z3$ node a.js
/private/tmp/z3/node_modules/antd/es/locale-provider/LocaleReceiver.js:1
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/private/tmp/z3/node_modules/antd-img-crop/dist/antd-img-crop.cjs.js:21:22)

The problem is that something is getting confused between ES modules and CommonJS modules and loading the wrong thing.

It’s nice to have node.js support, since it’s needed for server side rendering, which can come up naturally when using next.js.

Please close this if you don’t want to fix this, and I’ll figure out how to restructure my app to work around this problem or just stick with an old version of antd-img-crop.

Thanks!

[williamstein]

Hi, here is the one commit I made to create the package @cocalc/antd-img-crop above:

https://github.com/sagemathinc/antd-img-crop/commit/b3fef1503439fac3b99b556c42dd8c7c58e37495

It’s what works for me. Basically I replace the commonjs module with a dummy one. I had forgot to push this commit before, so sorry if you looked for it and didn’t find it.

[williamstein]

I ended up making this https://www.npmjs.com/package/@cocalc/antd-img-crop in case anybody else runs into this issue. After trying several things I gave up and just made the commonjs version a dummy function. At least that doesn’t crash.