bug: unable to do a crypto dApp node-polyfills and commonjs issue

mburger81 commented 2 years ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.1

Current Behavior

We try to make a crypto dApp with stenciljs. Doing this we discovered several issues with rollup bundling and probably with the plugins for node polyfills, commonjs and nodeResolver.

first of all when we start a simple dApp with @walletconnect we run into issues like this

[ ERROR ]  Node Polyfills Required
           For the import "buffer" to be bundled from ./node_modules/multibase/src/index.js, ensure the
           "rollup-plugin-node-polyfills" plugin is installed and added to the stencil config plugins (client). Please
           see the bundling docs for more information. Further information: https://stenciljs.com/docs/module-bundling

Which is fine because we know we have to use the "rollup-plugin-node-polyfills", but I use "rollup-plugin-polyfill-node" because its never and mantained compared to ionic's, so we load the plugin just like this

rollupPlugins: {
    before: [
    ],
    after: [
      nodePolyfills(),
    ]
  }

issue now we get this error TypeError: Cannot read properties of undefined (reading 'env') I think this means we have to tell at nodeResolver plugin to compile for browser, so we setup this in the configuration
```
export const config: Config = {
// THIS DOESN'T WORKs
// nodeResolve: {
//   browser: true,
//   preferBuiltins: true
// },
rollupPlugins: {
before: [
  nodeResolve(
    {
      browser: true,
      preferBuiltins: true
    }
  )
],
after: [
  nodePolyfills(),
]
}
};
```
And here we have our first issue, because if we use the config property nodeResolve nothing changed, but if we load the external @rollup/plugin-node-resolve and load it on rollupPlugins.before this error pass away. So it seems like the internal nodeResolve doesn't work.

issue TypeError: Failed to resolve module specifier "process". Relative references must start with either "/", "./", or "../" I don't know why this is happening, this is happening for all imports of node polyfills like process, buffer, stream and so on. I'm not sure why this is happening because this should resolve the rollup-plugin-polyfill-node plugin? But It seems I can omit this errors using the @rollup/plugin-alias plugin before nodeResolve plugin, like this

before: [
  alias({
    entries: [
      { find: 'process', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'path', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'util', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'buffer', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'crypto', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'http', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'https', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'os', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'url', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'assert', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'events', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'string_decoder/', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'string_decoder', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'stream', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'punycode', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' },
      { find: 'querystring', replacement: './node_modules/rollup-plugin-polyfill-node/dist/index.js' }
    ]
  }),

issue now I got this error

index.js?app-data=conditional:2934 TypeError: Cannot read properties of undefined (reading 'posix')
at index.js:14:42 undefined

It's a nightmare.

I thinks also we should set transformMixedEsModules to plugin-commonjs which is another issue IMO.

Expected Behavior

I would like that the plugins work to get work the node polyfills like they should work

Steps to Reproduce

Clone https://github.com/mburger81/stencil-dapp and try, maybe you should start commenting all the plugins

Code Reproduction URL

https://github.com/mburger81/stencil-dapp

Additional Information

No response

rwaskiewicz commented 2 years ago

Hey @mburger81 👋

It's not entirely clear to me what the bug being reported is from the issue summary. This reads as multiple issues that you're running into while getting rollup plugin(s) configured. This issue tracker is unable to provide support-related questions. For those, I'd suggest asking in the Stencil Slack or the Ionic Forums.

I'm going to close this issue as a support-related ticket. If you feel there is a bug in Stencil, can you please open a new issue with a reproduction case that includes the minimal amount of code to reproduce the issue?

Thanks!

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our slack channel for questions about Stencil.

Thank you for using Stencil!

ionic-team / stencil