Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error of importing module #7307

Open
mame7777 opened this issue Oct 21, 2024 · 0 comments
Open

Error of importing module #7307

mame7777 opened this issue Oct 21, 2024 · 0 comments
Labels
ssg: gatsby type: bug code to address defects in shipped code

Comments

@mame7777
Copy link

mame7777 commented Oct 21, 2024

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

@mame7777 mame7777 added the type: bug code to address defects in shipped code label Oct 21, 2024
@mame7777 mame7777 changed the title Please replace with a clear and descriptive title Error of importing module Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ssg: gatsby type: bug code to address defects in shipped code
Projects
None yet
Development

No branches or pull requests

3 participants
@martinjagodic @mame7777 and others