Error: Can't resolve 'fs'

I am getting an error that states the following after attempting to use Casbin:

./node_modules/casbin/lib/esm/enforcer.js:442:0
Module not found: Can't resolve 'fs'

./node_modules/casbin/lib/esm/enforcer.js:442:0
Module not found: Can't resolve 'fs'

Here's my current dependencies:

"dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@refinedev/antd": "^5.37.1",
    "@refinedev/cli": "^2.16.21",
    "@refinedev/core": "^4.46.1",
    "@refinedev/devtools": "^1.1.29",
    "@refinedev/inferencer": "^4.5.16",
    "@refinedev/kbar": "^1.3.5",
    "@refinedev/nextjs-router": "^5.5.5",
    "@refinedev/react-hook-form": "^4.8.13",
    "@refinedev/react-table": "^5.6.5",
    "@refinedev/simple-rest": "^5.0.1",
    "antd": "^5.0.5",
    "axios": "1.6.2",
    "casbin": "^5.28.0",
    "next": "^13.0.6",
    "nookies": "^2.5.2",
    "query-string": "7.1.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },

"dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@refinedev/antd": "^5.37.1",
    "@refinedev/cli": "^2.16.21",
    "@refinedev/core": "^4.46.1",
    "@refinedev/devtools": "^1.1.29",
    "@refinedev/inferencer": "^4.5.16",
    "@refinedev/kbar": "^1.3.5",
    "@refinedev/nextjs-router": "^5.5.5",
    "@refinedev/react-hook-form": "^4.8.13",
    "@refinedev/react-table": "^5.6.5",
    "@refinedev/simple-rest": "^5.0.1",
    "antd": "^5.0.5",
    "axios": "1.6.2",
    "casbin": "^5.28.0",
    "next": "^13.0.6",
    "nookies": "^2.5.2",
    "query-string": "7.1.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },

Everything I've seen on other questions regarding the same problem point to changes that must be done to vite.config.ts but I'm not using that.

6 Replies

kapa.ai•7mo ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is related to the fs module, which is a Node.js built-in module for file system operations. It seems like your application is trying to use this module in a context where it's not available, such as in the browser. The information extracts provided do not contain a direct solution to your problem. However, they do mention the use of Casbin with Refine and the need for certain polyfills for it to work in a browser environment. In the Casbin Installation (https://refine.dev/blog/refine-pixels-6#casbin-installation) section of the Refine blog, it's mentioned that you need to configure polyfills for vite to work in a browser environment. Even though you're not using vite, the concept is the same - you need to provide a browser-compatible version of the fs module or avoid using it in the browser altogether. Here's the polyfill configuration for vite as an example:

import { defineConfig } from "vite";  
import react from "@vitejs/plugin-react";  
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";  
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";  
import rollupNodePolyFill from "rollup-plugin-polyfill-node";  

export default defineConfig({  
 plugins: [react()],  
 optimizeDeps: {  
 esbuildOptions: {  
 define: {  
 global: "globalThis",  
 },  
 plugins: [  
 NodeGlobalsPolyfillPlugin({  
 buffer: true,  
 process: true,  
 }),  
 NodeModulesPolyfillPlugin(),  
 ],  
 },  
 },  
 build: {  
 rollupOptions: {  
 plugins: [rollupNodePolyFill()],  
 },  
 },  
});

import { defineConfig } from "vite";  
import react from "@vitejs/plugin-react";  
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";  
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";  
import rollupNodePolyFill from "rollup-plugin-polyfill-node";  

export default defineConfig({  
 plugins: [react()],  
 optimizeDeps: {  
 esbuildOptions: {  
 define: {  
 global: "globalThis",  
 },  
 plugins: [  
 NodeGlobalsPolyfillPlugin({  
 buffer: true,  
 process: true,  
 }),  
 NodeModulesPolyfillPlugin(),  
 ],  
 },  
 },  
 build: {  
 rollupOptions: {  
 plugins: [rollupNodePolyFill()],  
 },  
 },  
});

You might need to do something similar depending on the build tool you're using. If you're using Webpack, for example, you might need to add a similar configuration to your webpack.config.js file. If you're not sure how to proceed, I recommend checking the documentation of your build tool for how to handle Node.js built-in modules in a browser environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below

broad-brown•7mo ago

@kapa.ai How would I configure this for a Next.JS project?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the information extracts provided do not contain specific instructions on how to configure a Next.js project to resolve the fs module error you're encountering. Next.js uses Webpack under the hood for its build system, and typically, issues with Node.js built-in modules like fs can be resolved with the right Webpack configuration. However, the specifics of this configuration are not detailed in the provided extracts. I recommend checking the Next.js and Webpack documentation or the Casbin library's documentation for more information on how to resolve this issue. You may also find it helpful to search for or ask a question on a platform like Stack Overflow, where you can get help from a community of developers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below

broad-brown•7mo ago

🫠 Examples on reliable and scalable ways to do this without using casbin are welcome!