commonjs output?

[craigmulligan]

Hey :wave: I'd really like to try this lib, but for the life of me I can't figure out how to consume it. I have a very basic babel setup in my project. But I keep hitting this error:

Error [ERR_REQUIRE_ESM] [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/node_modules/oceanwind/index.js
require() of ES modules is not supported.
require() of /app/node_modules/oceanwind/index.js from /app/src/lib/style/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /app/node_modules/oceanwind/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /app/node_modules/oceanwind/package.json.

    at new NodeError (node:internal/errors:278:15)
    at Module._extensions..js (node:internal/modules/cjs/loader:1119:13)
    at Object.require.extensions.<computed> [as .js] (/app/node_modules/babel-watch/runner.js:64:7)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/app/src/lib/style/index.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at babelWatchLoader (/app/node_modules/babel-watch/runner.js:51:13)

I guess this is because babel is transpiling my code to commonjs and so I'm trying to require your esmodule. I've tried everything I could find inorder to include /node_module/oceanwind in my compile step but couldn't figure it out. Do you happen to know the best way to easy way to resolve this? Or would you consider a commonjs output format?

Thanks for the help!

[lukejacksonn]

Hey 👋 thanks for the creating the issue. The reason I got out of bundling projects is because of issues like this. So unfortunately I don't have a definite answer for you.

Perhaps you are trying to import via require instead of import? If so then I imagine this will not work.

I'm not interesting in creating a CJS module as I really think its time we moved on to es modules as they are now an official standard supported by the majority of browsers and even node.

If you would like guidance on how to get out out of the world of babel/webpack then I can probably help there.

[craigmulligan]

If you would like guidance on how to get out out of the world of babel/webpack then I can probably help there.

Thanks I'd be interested in any advice you have, personally I hate having a build step but haven't been able to find an alternative to jsx that feels natural. I've tried htm but I found it hard to use as my components got more complex. I assume there is a way for babel + typescript etc to be more friendly to es6 modules but it's evidently not there yet.

To resolve my issue in the short term I've create a fork and compiled to commonjs myself commit. It all seems to be working great, if you are happy to maintain a cjs output then I'll submit a PR otherwise I'll try keep my fork up-to-date for as long as I need it.

[lukejacksonn]

Nice, glad you managed to resolve your issue!

Regards advice on getting away from babel whilst still supporting es modules, typescript and JSX.. then I would recommend looking at either:

WMR: https://github.com/preactjs/wmr Snowpack: https://github.com/snowpackjs/snowpack

They are both modern build tools which should support your use cases and generally improve developer experience 🙌

[craigmulligan]

Great thanks for advice :100:

Closing now., For anyone landing here looking for commonjs module, you should of coarse try to run things with the standard es6 modules setup, but if you can't you can get a commonjs copy with:

npm install git+https://git@github.com/hobochild/oceanwind.git

Then import it with:

import ow from 'oceanwind/index.cjs'