1

Docusaurus2 ページにコード スニペットを埋め込むための React コンポーネントを構築しています。このコンポーネントは、 Prism CSSの修正版であるローカル CSS ファイルを使用して、コード スニペットの構文を強調表示します。このコンポーネントは、NPM パッケージとして公開されます。

パッケージを Docusaurus2 プロジェクトにインポートすると、サーバー ビルドで次のエラーが発生します。ReferenceError: document is not defined

調査の結果、Docsaurus はローカル CSS ファイルまたはローカル CSS ファイルで動作していないようです。

を使用してローカル CSS ファイルをインポートする代わりに、Prism CSSをコンポーネントに直接インポートすると、ビルドの問題は発生しません。import "prismjs/themes/prism.css";import "./prism.css"

私たちが試したこと：

  • MiniCssExtractPluginを使用してみましたが、コード スニペットで強調表示されなくなりました。
  • 一時的な解決策は、css ファイルのみを含む npm パッケージを作成し、それを React コンポーネントにインポートすることです。これにより、プロジェクトでビルド エラーが発生しなくなりました。

コンポーネント内のファイルの例を次に示します。

webpack.config.js:

const path = require('path');
const nodeExternals = require("webpack-node-externals");

module.exports = {
  mode: 'production',
  entry: './src/index.tsx',
  output: {
    path: path.resolve('lib'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /(node_modules)/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ]
  },
  externals: [nodeExternals()],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
}

editor.tsx (prism.css は上記の css ファイルです):

import React from 'react';
import Prism from 'prismjs';
import { ReactCodeJar } from "react-codejar";
import "./prism.css";
import axios from 'axios';
import YAML from 'yaml';

let darkTheme = {
    editorStyle: {
        borderRadius: "25px 25px 25px 0",
        boxShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)",
        fontFamily: "'Source Code Pro', monospace",
        fontSize: "14px",
        fontWeight: "400",
        height: "350px",
        letterSpacing: "normal",
        lineHeight: "20px",
        padding: "20px",
        tabSize: "4",

...

パッケージ.json:

{
  "name": "ligosnippet",
  "version": "1.0.0",
  "main": "./lib/index.js",
  "scripts": {
    "build": "webpack"
  },
  "files": [
    "lib"
  ],
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-react-jsx": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "@types/node": "^13.9.5",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/styled-components": "^5.0.1",
    "babel-loader": "8.0.6",
    "css-loader": "^3.4.2",
    "parcel-bundler": "^1.12.4",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.1.3",
    "typescript": "^3.8.3",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.11",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "prismjs": "^1.20.0",
    "react-codejar": "^1.0.1",
    "yaml": "^1.9.2"
  }
}

.babelrc:

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}
4

0 に答える 0