I am using a react app, building the site with Gatsby, Webpack and Babel.
Installing a external library, which uses classes decorators syntaxis, I am getting this error during the building:

Module parse failed: Unexpected character '@'(7: 14)
File was processed with these loaders:
    *
    . / node_modules / gatsby / dist / utils / babel - loader.js
You may need an additional loader to handle the result of these loaders. |
    import {
        SummaryDataToSummary
    } from './converters/SummaryDataToSummary'; |
export let BedrockSummaryRepository = (_dec = injectable(), _dec(_class =
            class BedrockSummaryRepository {
                >
                constructor(@inject(SHARED_CONTAINER_TYPES.SHARED_CONFIGS) |
                        sharedConfigs) {
                        |
                        this.clientConfig = sharedConfigs.bedrock.clientConfig;

I have already installed the plugins for babel @babel/plugin-proposal-decorators and @babel/plugin-syntax-decorators. Now it seems to accept decorators syntax, but something about loaders is missing.

This is the gatsby-node.ts file configuration:

export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({
    stage,
    actions,
    getConfig,
    loaders,
    plugins
}) => {
    const config = getConfig()

    const miniCssExtractPluginIndex = config.plugins.findIndex(
        (plugin: any) => plugin.constructor.name === 'MiniCssExtractPlugin'
    )
    if (miniCssExtractPluginIndex > -1) {
        config.plugins.splice(miniCssExtractPluginIndex, 1)
        if (stage === 'build-javascript') {
            config.plugins.push(
                plugins.extractText({
                    filename: '[name].[contenthash].css',
                    chunkFilename: '[name].[contenthash].css',
                    ignoreOrder: true
                })
            )
        } else {
            config.plugins.push(
                plugins.extractText({
                    filename: '[name].css',
                    chunkFilename: '[id].css',
                    ignoreOrder: true
                })
            )
        }
    }
    actions.replaceWebpackConfig(config)

    config.module.rules = [
        ...config.module.rules.filter((rule: any) => String(rule.test) !== String(/.jsx?$/)),
        {
            ...loaders.js(),
            test: /.jsx?$/,
            exclude: (modulePath: any) => /node_modules/.test(modulePath)
        }
    ]

    if (stage.startsWith('develop') && config.resolve) {
        config.resolve.alias = {
            ...config.resolve.alias
        }
    }

    actions.setWebpackConfig({
        resolve: {
            plugins: [new TsconfigPathsPlugin()]
        }
    })
}

export const onCreateBabelConfig: GatsbyNode['onCreateBabelConfig'] = ({
    actions
}) => {
    actions.setBabelPlugin({
        name: '@babel/plugin-syntax-decorators',
        options: {
            version: 'legacy'
        }
    })
    actions.setBabelPlugin({
        name: '@babel/plugin-proposal-decorators',
        options: {
            version: 'legacy'
        }
    })
}

What am I missing?

I have already solve the problem about allow decorators, but it seems that the problem is something about loaders.