Environment variables missing nodeJS webpack plugin

[Janaka-Steph]

I am following this documentation https://docs.metamask.io/snaps/how-to/use-environment-variables/ to use some environment variables, but the build fails with:

➤ YN0000: [snap]: - Building the snap bundle.
➤ YN0000: [snap]: ✖ Compiled 155 files in 1370ms with 1 error.
➤ YN0000: [snap]: 
➤ YN0000: [snap]:   • Module build failed: UnhandledSchemeError: Reading from "node:process" is not handled by plugins (Unhandled scheme).
➤ YN0000: [snap]:     Webpack supports "data:" and "file:" URIs by default.
➤ YN0000: [snap]:     You may need an additional plugin to handle "node:" URIs.
➤ YN0000: [snap]:         at /Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/webpack/lib/NormalModule.js:918:25
➤ YN0000: [snap]:         at Hook.eval [as callAsync] (eval at create (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
➤ YN0000: [snap]:         at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/tapable/lib/Hook.js:18:14)
➤ YN0000: [snap]:         at Object.processResource (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/webpack/lib/NormalModule.js:915:8)
➤ YN0000: [snap]:         at processResource (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
➤ YN0000: [snap]:         at iteratePitchingLoaders (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
➤ YN0000: [snap]:         at runLoaders (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/loader-runner/lib/LoaderRunner.js:398:2)
➤ YN0000: [snap]:         at NormalModule._doBuild (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/webpack/lib/NormalModule.js:905:3)
➤ YN0000: [snap]:         at NormalModule.build (/Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/webpack/lib/NormalModule.js:1081:15)
➤ YN0000: [snap]:         at /Users/stephane/Documents/SevenLabs/bitGPT/bitgpt-snap/node_modules/webpack/lib/Compilation.js:1400:12

Where should I add this webpack plugin?

[Christian Montoya]

Which plugin you are using? Snaps already supports environment variables, you don't need to use a plugin for it.

[Janaka-Steph]

I don't use any plugins. I am talking about plugins because the error says You may need an additional plugin to handle "node:" URIs.. I just use the @metamask/create-snap starter kit and follow this doc https://docs.metamask.io/snaps/how-to/use-environment-variables/ and it doesn't work.

[Maarten Zuidhoorn]

Webpack unfortunately doesn't support node: imports by default, so the easiest solution is to import without the node: prefix. If you're using a dependency which uses node: imports though, you can use Webpack's NormalModuleReplacementPlugin. For example:

// snap.config.ts
const config = {
  // ...
  customizeWebpackConfig: (defaultConfig) =>
    merge(defaultConfig, {
      plugins: [
        new NormalModuleReplacementPlugin(/^node:/u, (resource) => {
          resource.request = resource.request.replace(/^node:/u, '');
        }),
      ],
    }),
}

If you just want to use environment variables you don't need to import anything though. process is a global variable, so you can just use process.env.SOME_VARIABLE.

[Janaka-Steph]

Got it, thank you!