找不到模块：无法解析“fs”

Question

I found a solution on internet that helped a lot of users. But in this case it din't helped me.

here is my package.json

{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.4",
    "git-revision-webpack-plugin": "^3.0.3",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dashboard": "^3.0.7",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "write-file-webpack-plugin": "^4.5.0"
  },
  "dependencies": {
    "@hot-loader/react-dom": "^16.9.0",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.2.10",
    "@mui/icons-material": "^5.8.3",
    "@mui/lab": "5.0.0-alpha.67",
    "@mui/material": "^5.4.0",
    "clean-webpack-plugin": "^1.0.0",
    "clone": "^2.1.2",
    "config": "^3.2.3",
    "curl": "^0.1.4",
    "date-fns": "^2.0.0-beta.5",
    "dmn-js": "10.1.0",
    "dmn-js-properties-panel": "^0.6.2",
    "es6-promise": "^4.2.8",
    "history": "^4.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jodit-react": "^1.0.70",
    "moment-jalaali": "^0.9.2",
    "node-libcurl": "^2.3.3",
    "promise": "^8.0.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.9.0",
    "re-resizable": "^4.0.0",
    "react": "^16.8.6",
    "react-cron-generator": "^1.1.5",
    "react-csv": "^2.0.3",
    "react-csv-downloader": "^2.2.0",
    "react-d3-tree": "^1.17.1",
    "react-dom": "^16.8.6",
    "react-drop-zone": "^3.0.6",
    "react-hot-loader": "^4.9.0",
    "react-intl": "^4.5.0",
    "react-json-pretty": "^2.1.0",
    "react-json-view": "^1.19.1",
    "react-mdl": "^1.11.0",
    "react-redux": "^6.0.1",
    "react-responsive-modal": "^3.6.0",
    "react-router-dom": "^5.0.0",
    "react-swipeable-views": "^0.13.3",
    "react-tree-graph": "^4.0.0",
    "react-xml-parser": "^1.1.8",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-dynamic-modules": "^3.5.0",
    "redux-dynamic-modules-thunk": "^3.5.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  }
}

Here is my webpack

const config = merge.smart(common.config, {
  mode: "development",
  devtool: "inline-source-map",
  output: {
    filename: "js/[name].js",
    chunkFilename: "js/[name].chunk.js"
  },
  devServer: {
    disableHostCheck: true,
    contentBase: path.join(__dirname, "./dist"),
    writeToDisk: true,
    compress: true,
    inline: true,
    port: 3001,
    publicPath: common.basePath,
    historyApiFallback: true,
    open: true,
    openPage: common.basePath.replace(/^\//, ""),
    hot: true,
    progress: true,
    overlay: true,
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    proxy: {
      '/api': {
        target: ``,
        pathRewrite: { '^/api': '' },
        secure: false,
        headers: {
          Host: ''
        }
      }
    }
  },
  resolve: {
    alias: {
      'inferno': ''
    }
  },
});

module.exports = config;

i have tried this solution also but not usefull

config.node = {
  fs: 'empty',
}

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

即使安装了 npm mjml-react 所需的所有依赖项，我也收到此错误

未找到模块：错误：无法解析“C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\clean-css\lib\reader”中的“fs”模块未找到：错误：无法解析“C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\clean-css\lib\reader”中的“fs”模块：错误：Can' t 在 'C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\uglify-js\tools' 中解析 'fs' 找不到模块：错误：无法解析 'mjml' 'C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\mjml-react\dist\es\src'

Answer 1

它在您的浏览器中不可用。 只有在使用 node 运行应用程序时才能使用它。 https://nodejs.org/api/fs.html

Answer 2

一段时间后，我找到了解决这个问题的方法。 npm MJML-REACT 在这里可能不起作用。 所以，我开始寻找其他一些与我的 NGINX Web 应用程序配合得很好的库。

结果，我找到了一个 mjml-browser（ https://www.npmjs.com/package/mjml-browser ）库，我终于可以将 mjml 集成到我的应用程序中。

你要做的是，下载npm mjml-browser..https://www.npmjs.com/package/mjml-browser 将它导入你的应用程序（从“mjml-browser”导入mjml2html）

mjmltohtml = () => {
        let vtl = "mjmlCode";
        let html;
        try {
            html = mjml2html(vtl).html;
            //console.log(html)
        } catch (error) {
            return;
        }
        this.setState({ mjmlhtml: html })
    }

此代码会将您的 mjml 转换为 html。

稍后谢谢我😎