[Bug] Error: `env` and `jsc.target` cannot be used together

[harsharavindra]

Describe the bug

I am getting this error when "npm run storybook"

I am suspecting this error is from this package.

Steps to reproduce the behavior

My main.js:

module.exports = {
  stories: ['../packages/**/index.stories.tsx', '../packages/autocomplete/src/index.stories.js', '../packages/table/src/stories/**.tsx', '../packages/icons/src/index.stories.js'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-a11y',
    '@storybook/addon-backgrounds',
    '@storybook/addon-links',
    '@storybook/addon-webpack5-compiler-swc',
    '@chromatic-com/storybook'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      fsCache: true,
      lazyCompilation: true
    }
  },
  core: {
    builder: 'webpack5'
  }
};

and my .swcrc file which is used to build my packages:

{
  "$schema": "http://json.schemastore.org/swcrc",
  "module": {
    "type": "es6"
  },
  
  "jsc": {
    "target": "es2018",

    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": false,
      "dynamicImport": false
    },

    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  },
  "sourceMaps": true,
  "exclude": [".*\\.test\\.tsx?$", ".*\\.playroom\\.ts$"]
}

Removing "target": "es2018", and adding env works, but I want to keep "target": "es2018".

is the error due to :

https://github.com/storybookjs/addon-webpack5-compiler-swc/blob/main/src/preset.ts#L13

[harsharavindra]

To fix this issue, I need to remove env from swc-loader. After making the changes, my main.js looks like below. I wish there is cleaner approach to resolve this.

module.exports = {
  stories: ['../packages/**/index.stories.tsx', '../packages/autocomplete/src/index.stories.js', '../packages/table/src/stories/**.tsx', '../packages/icons/src/index.stories.js'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-a11y',
    '@storybook/addon-backgrounds',
    '@storybook/addon-links',
    '@storybook/addon-webpack5-compiler-swc',
    '@chromatic-com/storybook'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      fsCache: true,
      lazyCompilation: true
    }
  },
  core: {
    builder: 'webpack5'
  },
  webpackFinal: async config => {
    config.module.rules.forEach(rule => {
      if (rule.use) {
        rule.use.forEach(loaderConfig => {
          if (typeof loaderConfig === 'object' && loaderConfig.loader?.includes('swc-loader')) {
            // Fix SWC loader conflict
            loaderConfig.options = {
              jsc: {target: 'es2022'}, // Ensure target is set
              env: null // Disable `env` to prevent conflict
            };
          }
        });
      }
    });
    return config;
  }
};