How to make Docusaurus works with local CSS file? - css

Question

We are building a React component for embedding code snippets onto a Docusaurus2 page. This component uses a local CSS file, which is a modified version of Prism CSS, to highlight syntax on the code snippets. This component is then published as a NPM package.
When importing our package to our Docusaurus2 project, we get the following error on server build : ReferenceError: document is not defined
After investigation, it seems like Docusaurus is not working with the local CSS file or any local CSS file.
If we import the Prism CSS directly into our component using import "prismjs/themes/prism.css"; instead of importing a local CSS file with import "./prism.css", there is no build issue.
What we tried :
We tried using the MiniCssExtractPlugin, but ended up with no more
highlight in the code snippets.
The temporary solution we have is to created a npm package that only
contains the css file and to import it into our React
component. There is no more build error in the project by doing this.
Here are examples of the files in our component :
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 is the css file discuted above):
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",
...
package.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"]
}