Closed3

typeScriptにてremarkが使えない

khalekhale

const processedContent = await remark()にて、以下エラー発生。

This expression is not callable.
  Type 'typeof import("D:/workspace/next-catch/node_modules/remark/index")' has no call signatures.ts(2349)
posts
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import remark from "remark";
import html from "remark-html";

// const remark = require("/remark/index");

const postsDirectory = path.join(process.cwd(), "posts");

export type blog = {
  blogId: string;
  title: string;
  date: string;
};

/**
 * ブログのIdを一件受け取り、本文を返却します.
 *
 * @param blogId ブログId
 * @returns ブログ本文
 */
export const getPostData = async (blogId: string): Promise<blog> => {
  const fullPath = path.join(postsDirectory, `${blogId}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  // 投稿のメタデータ部分を解析するために gray-matter を使う
  const matterResult = matter(fileContents);
  const date: string = matterResult.data["date"];
  const title: string = matterResult.data["title"];

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  // データを id と組み合わせる
  return {
    blogId,
    date,
    title,
  };
};
khalekhale

ライブラリ依存関係

package.json
{
  "name": "next-catch",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "gray-matter": "^4.0.3",
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1"
  },
  "devDependencies": {
    "@types/react": "^17.0.39",
    "eslint": "8.7.0",
    "eslint-config-next": "12.0.8",
    "typescript": "^4.5.5"
  }
}
khalekhale

公式見たら、remarkは名前付きimportに変更されていた。
本体見るとdefaultじゃない。
typeScript対応された際にでも型定義が追加されたのかな?

remark/node_modules/index.d.ts
export const remark: import('unified').FrozenProcessor<
  import('mdast').Root,
  import('mdast').Root,
  import('mdast').Root,
  string
>

sample.ts
import {reporter} from 'vfile-reporter'
import {remark} from 'remark'
import remarkPresetLintConsistent from 'remark-preset-lint-consistent'
import remarkPresetLintRecommended from 'remark-preset-lint-recommended'

main()

async function main() {
  const file = await remark()
    .use(remarkPresetLintConsistent)
    .use(remarkPresetLintRecommended)
    .process('1) Hello, _Jupiter_ and *Neptune*!')

  console.error(reporter(file))
}

https://github.com/remarkjs/remark#example-checking-markdown

このスクラップは2022/02/13にクローズされました