ES modules can't be used in next.js

[aulneau]

I've been following the project for a while and I'm really excited about the release coming up. I mainly use next.js for most of my projects and would love to play around with this too! Unfortunately, the packages are only bundled as es modules, and while sometimes it works to use next-transpile-modules, it doesn't work with this set of packages.

We use tsdx for a lot of our packages, it could be an easy win to use that here, too!

Thanks so much

[itsdouges]

hi! thanks for raising the issue - does next not support esmodules for the browser dependencies? 🤔 does tree shaking not work there?

the babel plugin is commonjs if that changes anything.

[WillsonHaw]

This is also an issue using snowpack. The require('./provider-x') calls throw an error when using esm:

[pgmanutd]

Looks like there are 2 issues. First is that we are shipping mix of es modules and common js modules under runtime.

import { isNodeEnvironment } from '../is-node';
export var useCache = false ? require('./provider-server').useCache
    : require('./provider-browser').useCache;
var Provider = false ? require('./provider-server').default
    : require('./provider-browser').default;
export default Provider;
//# sourceMappingURL=index.js.map

Secondly, consumers might need to compile node_modules/@compiled/react with compiler they are using. For eg. with babel and webpack:

use: [
            {
                loader: 'babel-loader',
            },
        ],
        // Exclude the untransformed packages
        exclude: /node_modules\/(?!(MODULE1|MODULE2)\/).*/,
...

For next.js, there is an open issue for compiling modules under node_modules.

[itsdouges]

Yeah. Let me create another issue to remove the commonjs code split paths. Made here: #405