Error when using options array for multiple parser configurations

[hogarthww-labs]

As per: https://swc.rs/docs/configuring-swc/#multiple-entries

We've been trying to use the following swc configuration options:

[
  {
    "test": ".tsx?$",
    "jsc": {
      "parser": {
        "syntax": "typescript",
        "tsx": true,
        "decorators": false,
        "dynamicImport": true
      },
      "transform": {
        "react": {
          "pragma": "React.createElement",
          "pragmaFrag": "React.Fragment",
          "throwIfNamespace": true,
          "development": false,
          "useBuiltins": false
        }
      },
      "target": "es5"
    }
  },
  {
    "test": ".jsx?$",
    "jsc": {
      "parser": {
        "syntax": "ecmascript",
        "jsx": true,
        "decorators": false,
        "dynamicImport": true
      },
      "transform": {
        "react": {
          "pragma": "React.createElement",
          "pragmaFrag": "React.Fragment",
          "throwIfNamespace": true,
          "development": false,
          "useBuiltins": false
        }
      },      
      "target": "es5"
    }
  }
]

We've tried adding this to a .swrc file in the app folder for the app being build and in the root of our Nx monorepo (same folder as our webpack.config.js). Not sure if it is picked up correctly. Then when we tried setting these options directly in the webpack rule with the loader:

const options = [
  {
    "test": ".tsx?$",
    "jsc": {
      "parser": {
        "syntax": "typescript",
        "tsx": true      
      },
      "transform": {
        "react": {
          "pragma": "React.createElement",
          "pragmaFrag": "React.Fragment",
          "throwIfNamespace": true,
          "development": false,
          "useBuiltins": false
        }
      },
      "target": "es5"
    }
  },
  {
    "test": ".jsx?$",
    "jsc": {
      "parser": {
        "syntax": "ecmascript",
        "jsx": true
      },
      "transform": {
        "react": {
          "pragma": "React.createElement",
          "pragmaFrag": "React.Fragment",
          "throwIfNamespace": true,
          "development": false,
          "useBuiltins": false
        }
      },      
      "target": "es5"
    }
  }
]

module.exports = {
  test: /\.([jt])sx?$/ ,
  exclude: /node_modules/,
  use: {
      // `.swcrc` in the root can be used to configure swc
      loader: require.resolve('swc-loader'),
      options
  }
}

We get the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].use should be one of these:
   non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration.module.rules[1].use.options should be an object.
    * configuration.module.rules[1].use.options should be a string.
    * configuration.module.rules[1].use.options should be one of these:
      object | string
    * configuration.module.rules[1].use.options should be one of these:
      object | string
      -> Loader options

Complaining that options must be an object or string. What should we do?

The Webpack rule for swc-loader when we print it:

{
  test: /\.([jt])sx?$/,
  exclude: /node_modules/,
  use: {
    loader: '/Users/kristianmandrup/repos/hogarth/lab-experiments/zonza5-nx/node_modules/swc-loader/src/index.js'
  }
}

We need SWC to transpile ts and tsx files as typescript files and js and jsx files as ecmascript files. We are currently transitioning from Javascript to Typescript and have a mix.

ERROR in /Users/kristianmandrup/repos/hogarth/lab-experiments/zonza5-nx/node_modules/zonza5-lib-form-widgets/src/js/UpdateCollectionForm/CreateCollectionForm.jsx 9:4
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     errorMessage, onToggleMode, onInputChange, required, label,
| }) => (
>     <div className="createCollectionForm">
|         <div className="form-group row collection-form">
|             <label

[phoenisx]

@hogarthww-labs For the time being you can import swcrc config to your webpack config and do the extension test in the webpack config itself. This will help you to migrate your code, without waiting for this fix to happen.

import swcJSConfig from "./.swcrc.mjs";
import swcTSConfig from "./.swcrc.ts.mjs";

...
    rules: [
      {
        test: /\.m?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "swc-loader",
            options: swcJSConfig,
          }
        ]
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "swc-loader",
            options: swcTSConfig,
          }
        ]
      },
    ]
...

Hope this helps, as it helped me resolve the issue on my end.

[evantd]

Since TypeScript is a superset of JavaScript (i.e. all JavaScript is valid TypeScript), you may also be able to just use your TypeScript config.