Critical dependency: the request of a dependency is an expression

[jy95]

Hello,

Somewhere in my website (source) , I needed to retrieve some assets to be displayed on the page.

---
description: References local file $ref showcase
title: 📁$ref (as local file)
---

import CodeBlock from '@theme/CodeBlock';
import Schema from "@site/static/schemas/examples/refs/localFile.json";
import JSONSchemaViewer from "@theme/JSONSchemaViewer";
import generateResolverOptions from "@site/src/components/shared-libs/generateResolverOptions"
import StringifyObject from "@site/src/components/shared-libs/stringifyObject"

# $ref (as local file)

JSON Schema :

<CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>

resolverOptions : 

<CodeBlock language="js">{`${StringifyObject(generateResolverOptions({"basePath": "/schemas/examples/refs"}))}`}</CodeBlock>

Viewer :

<JSONSchemaViewer schema={ Schema } resolverOptions={generateResolverOptions({"basePath": "/schemas/examples/refs"})} />

So I built following function :

import generatePath from "@site/src/components/shared-libs/generatePath"

// Here a workaround for Docusaurus, as your assets are public at the end, require them
export default function LocalFileResolver(basePath: string = "") {
  return {
    resolve: (ref: string) => {
      return new Promise((resolve, reject) => {
        const temp_url = generatePath(ref, basePath)
        //import("@site/static/schemas/examples/array/additionalItems1.json")
        import(`@site/static/${temp_url.substring(1)}`)
          .then((result) => resolve(result.default))
          .catch((err) => reject(err))
      })
    },
  }
}

// Example of basePath = '/schemas/examples/refs'
export default function generatePath(path: string, basePath: string = "") {
  const parts = path.toString().split("/")
  let finalPath = basePath

  for (let i = 0; i < parts.length; i++) {
    if (parts[i] === "..") {
      // Move up one directory in the base path
      finalPath = finalPath.split("/").slice(0, -1).join("/")
    } else if (parts[i] === ".") {
      // Ignore current directory notation
      continue
    } else {
      // Append the current directory to the base path
      finalPath = `${finalPath}/${parts[i]}`
    }
  }

  return finalPath
}

It works but I got this warning when doing a docusaurus build :

Warning:  {"moduleIdentifier":"/home/runner/work/docusaurus-json-schema-plugin/docusaurus-json-schema-plugin/testsite/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[5].use[0]!/home/runner/work/docusaurus-json-schema-plugin/docusaurus-json-schema-plugin/testsite/src/components/shared-libs/localFileResolver.tsx","moduleName":"./src/components/shared-libs/localFileResolver.tsx","loc":"3:89-99","message":"Critical dependency: the request of a dependency is an expression","compilerPath":"server"}

I think it might be a good opportunity to have a proper discussion around it as :

• Some people might prefer that <CodeBlock> allows to import local files
• Disable warnings could be hiding issues at some point

const webpack = require('webpack');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new webpack.ContextReplacementPlugin(
      /\/package-name\//,
      (data) => {
        delete data.dependencies[0].critical;
        return data;
      },
    ),
  ]
}

• ...

Thanks in advance

[slorber]

I have no idea what you are doing 🤪 🤷‍♂️

You show me code snippets and don't explain how they are related nor what they are supposed to do, so it's hard to understand.

But it looks fragile and not a good idea.

---

I needed to retrieve some assets to be displayed on the page.

Which asset exactly?
What's the content of it?
Why?
Displayed how?
By which React component code?

Please give all the info at once, I won't explore your site source to try to figure it out.

---

If this is the file you need to load: @site/static/schemas/examples/array/additionalItems1.json

It's a JSON file so why do you need to import it dynamically? you can as well just to import("@site/static/schemas/examples/array/additionalItems1.json") directly and this would ensure the file exists at build time.

You can also use fetch() if you want to load it dynamically

---

Some people might prefer that allows to import local files

I don't even understand how this sentence is related to the rest 🤷‍♂️
Is this what you are trying to achieve here?

Maybe you'll find this useful: https://docusaurus.io/docs/markdown-features/react#importing-code-snippets

There are also remark plugins that can help, I'm not familiar with all of them and you can write your own.
Example: https://github.com/jknoxville/remark-code-snippets

---

Disable warnings could be hiding issues at some point

Webpack settings can disable warnings. It is now your responsibility to figure out if you should do this or not. I don't understand your goal and can't recommend anything.