No way to add a Webpack plugin

[PiTiLeZarD]

Describe the bug

The use case: I'm trying to use a .env in a react project and add a webpack plugin in the build pipeline to handle that. The problematic step: I needed to add a dependency to webpack as plugins aren't exported anywhere in teambit (or are they? couldn't find it myself). The actual issue: Adding that plugin in the mix gives me all sorts of dependency issues.

Side note: I'm so surprised that it's not a common already solved issue, how do people deal with that? hardcode all things or is there a better solution I don't know about?

Steps to Reproduce

• create a custom react env

• in the env.main.runtime.ts within react.compose add react.useWebpack(webpackModifiers), with webpackModifiers using both commonTransformers for both dev and build

• bit install webpack dotenv

• use this transformer:

    export const commonTransformation = (config: WebpackConfigMutator, _context: WebpackConfigTransformContext) => {
        const envpath = `${process.cwd()}/.env`;
        if (fs.existsSync(envpath)) {
            config.addPlugin(new DefinePlugin(dotenv.parse(envpath)));
        }
  
        return config;
    };### Expected Behavior
  

To be honest, I'd expect to have to do none of that and to have a clear way of using environments variables in my builds. Apps run in local/staging/uat/production all the time everywhere, but maybe there is such a way and I just missed it?

But more to the point, I'd expect to have a working way to add webpack plugins to the config without having to add 50 dependencies and spending 2mn of compile time to suss out what's the next one missing.

Screenshots, exceptions and logs

I get the same missing dependency error so after bit install uglify-js then esbuild then swc/core I get this:

X teambit.pipelines/builder, running build pipe for 2 environments, total 15 tasks (completed in 10s)

The following errors were found while running the build pipeline
Failed task 1: "teambit.preview/preview:GenerateEnvTemplate" of env "teambit.envs/env"
component: org.scope/envs/[email protected]
ModuleNotFoundError: Module not found: Error: Can't resolve '@swc/wasm' in '/path/to/project/node_modules/.pnpm/registry.npmjs.org+@[email protected]/node_modules/@swc/core'
ModuleNotFoundError: Module not found: Error: Can't resolve '@swc/wasm' in '/path/to/project/node_modules/.pnpm/registry.npmjs.org+@[email protected]/node_modules/@swc/core'
...

That's when I decided I don't actually want to install all this stuff because I don't understand why I should, or what's the consequence within bit, or where do they come from. Webpack doesn't specify any of these. It really feels like the wrong direction to solve that issue.

Specifications

• Bit version: 0.0.800
• Workspace type: (harmony/legacy) no idea, harmony? whatever was there when I started a month ago
• Node version: v16.15.0
• npm / yarn version: doesn't matter, I'm using the pnpm with bit, the one installed on the machine is 7.6.0
• Platform: osx

for harmony workspace

• relevant env the one I'm adding this compilation to, it just has a couple of templates, a mui theme wrapper and tsconfigs.
• relevant aspects: after a month of heavily using bit, I still don't get the difference between env and aspects so they're all grouped up in the same component for me

Additional context

I'm really just trying to have my components be able to read process.env.* so when I build for a specific environment, components are configured correctly. Endpoints, urls, graphql_api, azure blobs, stuff like this need to be adapted to each and if there's a better solution I'll take it gratefully and delete this bug issue.

Thanks in advance for your time.

[cd-ihtisham]

Yeah, ikr. Like where are people storing their private keys?

[noelianunez]

Does anyone found a way to read variables from .env? I'm struggling with that with no luck.

[itaymendel]

hi,

the new env-setup has better support for custom webpack configuration to apply your own plugins. please use that - https://bit.cloud/teambit/react/react-env

at any case, when bit builds components, it doesn't create a bundle for them to be available for apps. if this is what you are looking for, i'd recommend looking into "bit apps" (see in docs). using this make it so each componetn has a bundle step and target output of a bundle production deployable. in that case, it does makes sense to use keys and such.

in a normal "component flow", components should not come with their own tokens, they should get their tokens from the app that loads them

[Devwulf]

in a normal "component flow", components should not come with their own tokens, they should get their tokens from the app that loads them

@itaymendel Where should the dotenv files be placed, and how exactly do you get the dotenv variables into the bit app that loads the components in the first place? There's nothing in the docs at all about this.