Error of importing module

[mame7777]

Describe the bug

I get an error when importing a module at CMS's administrator page.

I use registerPreviewTemplate in cms.js and the error occurs at “import” in the component file loaded with it.
In the component file, I use alias like import MyStyle from "@common/Style".
But, cms.js cannot interpret the alias.

To Reproduce

1, npx decap-server
2. In another session of shell, npx gatsby develop

The files are organized as follows.

/
 ├ src/
 │ └ cms/
 │   └ cms.js
 ├ templates/
 │ └ layout.js
 ├ common/
 │ └ Style.js
 ├ src/
 │ └ admin/
 │   └ config.yml
 ├ gatsby-config.js
 ├ gatsby-node.js
 └  jsconfig.json

cms.js

import CMS from "decap-cms-app";

import MyLayout from "./../templates/layout"

CMS.registerPreviewTemplate("MyCollection", MyLayout);

layout.js

import "@common/Style"

const MyLayout = () => {
    return (
        <Style>hogehoge</Style>
    );
};

export default MyLayout;

config.yml

......
collections:
  - name: "MyCollection"
    label: "MyCollection"
......

gatsby-config.js

......
    {
      resolve: `gatsby-plugin-decap-cms`,
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
......

gatsby-node.js

const path = require("path");

......

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@common": path.resolve(__dirname, "src/common/"),
      },
    },
  });
};

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@common/*": ["src/common/*"],
    }
  }
}

Expected behavior

 error  in ./src/templates/layout.js
⠀
Module not found: Error: Can't resolve '@common/Style' in '/src/templates'

Screenshots

Applicable Versions:

• Decap CMS version:
  • decap-cms-app@3.1.10
  • decap-cms-core@3.3.6
  • gatsby-plugin-decap-cms@4.0.4
• Git provider: GitHub
• OS: ubuntu:20.04 (Docker container)
• Browser version: chrome 129.0

• Node.JS version: v18.12.1

CMS configuration

backend:
  name: github
  repo: ***
  branch: master
  commit_messages:
    create: "Create {{collection}} “{{slug}}”"
    update: "Update {{collection}} “{{slug}}”"
    delete: "Delete {{collection}} “{{slug}}”"
    uploadMedia: "[skip ci] Upload “{{path}}”"
    deleteMedia: "[skip ci] Delete “{{path}}”"

locale: "ja"

publish_mode: editorial_workflow
media_folder: static/img
public_folder: /img

collections:
  - name: "MyCollection"
    label: "MyCollection"
......

Additional context