Doesn't follow `package.json` `type` in `rollup.config.ts` code?

halo951 commented 2 years ago

Troubleshooting

link: https://stackoverflow.com/questions/73554514/when-using-rollup-config-ts-how-to-deal-with-dependencies-that-only-contain-es

I'm building with rollup --config rollup.config.ts --configPlugin typescript2 and when encountering a plugin containing only ESM exports during construction then, Rollup throws a ERR_REQUIRE_ESM exception.

At present, many packages have changed to support only ESM. Can rollup-plugin-typescript2 automatically convert to MJS or CJS based on "type": "module" field?

the below added by agilgur5 from the SO link:

// plugin
import { Plugin } from 'rollup'
import boxen from 'boxen' // this is a only contain esm package

export const totalSize = (): Plugin => {
    const plugin: Plugin = {
        name: 'rollup-plugin-total-size',
        buildEnd() {
            boxen(` point info `)
        }
    }
    return plugin
}

// rollup.config.ts
import { totalSize } from './plugin'

export default () => {
    input: 'lib/index.ts',
    output: 'dist/index.js',
    plugins: [
      // total bundle size
      totalSize()
    ]
}

Environment

any where

Versions

"rollup": "^2.70.2",
"rollup-plugin-typescript2": "^0.31.2",

agilgur5 commented 2 years ago

no repro

Please don't remove large portions of the issue template, it is there for a reason. Not following guidelines is generally frowned upon by the entire OSS community, and such issues are de-prioritized and may be closed without response as such.

In particular, you did not provide a repro, did not provide your tsconfig.json, did not provide your full package.json, and are missing multiple versions, among other things.

`configPlugin` vs. `plugin`

rollup -- config rollup.config.ts -- plugin typescript2

This was the original text in your comment (I've edited it now), but I assume you meant --configPlugin typescript2? As in, using Rollup's configPlugin feature to transpile the rollup.config.ts to JS that Rollup can understand?

Rollup's configPlugin feature is done transparently, as in, the plugin itself does not know that it's being used as a configPlugin vs. a normal plugin, which I learned in #310. So, in that sense, rpt2 doesn't do anything special when used as a configPlugin.

Can rollup-plugin-typescript2 automatically convert to MJS or CJS based on "type": "module" field?

The Rollup compiler only knows how to interpret ESM, so most plugins transform code into ESM. This is why @rollup/plugin-commonjs exists and why rpt2 requires that you use module: "ES2015" or above in your tsconfig.json. rpt2 validates the module value of your tsconfig.json, so since you didn't get an error, I'm assuming your tsconfig.json is properly configured (though you did not provide one, per above).

As such, rpt2 does not do any conversion what-so-ever. It also should not do any conversion as that would not conform to the Rollup plugin spec.

likely root cause

The compiler is different from the CLI, however. Per the configuration docs, current versions of the Rollup CLI will assume a config is in ESM and will bundle and transpile to CJS in order for Node to understand it (as Node is generally the runtime when using the CLI). .cjs and .mjs extensions merely prevent transpiling and have Node read it directly.

You did not provide a repro, so I can't really do a trace, but my guess is that rpt2 is transpiling the TS to ESM, then the Rollup CLI itself is converting that to CJS. Per your comment, boxen is ESM-only, so a CJS require call on it will cause an ERR_REQUIRE_ESM.

But rpt2 is not causing that, the Rollup CLI itself is causing that. So there is nothing that rpt2 can do, and this issue likely belongs upstream in Rollup's own issue tracker.

Based on that, if you wrote this as a plain rollup.config.js in JS instead of TS, the Rollup CLI should similarly error out when parsing boxen, which would confirm that this is upstream in Rollup itself. rollup.config.mjs will work because the Rollup CLI does not transpile .mjs files. Here is an excerpt from the docs:

On the other hand if you are using at least Node 13 and have "type": "module" in your package.json file, Rollup's transpilation will prevent your configuration file from importing packages that are themselves ES modules. In that case, changing your file extension to .mjs will instruct Rollup to import your configuration directly as an ES module.

possible workarounds

I think you might be able to workaround this by just renaming your file rollup.config.mjs but still using --configPlugin typescript2. As in, leave your code as TS, but use .mjs as the file extension:

rollup --config rollup.config.mjs --configPlugin typescript2

If that doesn't work though, then you'd probably want to file an issue upstream in Rollup and requesting a new CLI flag, such as --no-transpile-config or something, in order to force the untranspiled .mjs behavior even when the file extension is not .mjs.

Some other alternative workarounds to try might be the .mts extension, or using something like @betit/rollup-plugin-rename-extensions as an additional configPlugin after rpt2 to convert the extension from .ts to .mjs.

In any case, as this is an upstream issue in Rollup itself, this is out-of-scope for this plugin.

halo951 commented 2 years ago

my english not very good, but thank you for answering this issue.

english: I thought question about this later, I think the reason is execute rollup <options> command, the actual operation is node rollup <options>, in this case, it will not be triggered --loader=esm, and execute with default cjs.
origin: 我后来思考了这个问题, 原因可能是执行 rollup <options> 命令, 实际执行的是 node rollup <options>. 这种情况下, 不会触发 --loader=esm 选项, 并使用默认的 cjs 执行。

agilgur5 commented 2 years ago

my english not very good, but thank you for answering this issue.

I tried to do my best interpreting your question (and reading between the lines when there were errors or missing details)! I know a few languages, but unfortunately Chinese is not one of them 😕

I thought question about this later, I think the reason is execute rollup <options> command, the actual operation is node rollup <options>, in this case, it will not be triggered --loader=esm, and execute with default cjs.

I don't believe that node rollup <options> would work, as rollup is meant to be called directly. If I had to guess, what you probably did was npm run build, which referenced a package.json script with rollup <options>. Again, a reproduction would be very helpful for you or anyone reading this. rpt2 has a repro environment on StackBlitz here, which you could use to submit an issue to Rollup (since this is not an rpt2 issue).

halo951 commented 2 years ago

look here: https://stackblitz.com/edit/rpt2-repro-ccfqkv?file=plugins/rollup-test-plugin.ts

please run build and see rollup-test-plugin

agilgur5 commented 2 years ago

look here: https://stackblitz.com/edit/rpt2-repro-ccfqkv?file=plugins/rollup-test-plugin.ts

please run build and see rollup-test-plugin

npm run build works once you fix the package.json (you have an additional comma there).

So this doesn't quite show the error either 😕

ezolenko / rollup-plugin-typescript2