未捕获的类型错误:fs.readFileSync 不是函数

2024-04-05

我正在尝试获取 webpack 和地图盒-GL https://github.com/mapbox/mapbox-gl-js/blob/master/webpack.config.example.js在 Meteor 系统中协同工作。我到处都查看了上述错误,但没有一个有效。这是我的 webpack 设置

{
  "root": "src",
  "devServer": {
    "host": "localhost"
  },
  "sass": {
    "module": true
  },
  "css": {
    "module": true
  },
  "node": {
    "fs": "empty"
  },
  "externals": {
    "fs": "{}",
    "tls": "{}",
    "net": "{}",
    "console": "{}"
  },
  "module": {
    "loaders": [
      { 
        "test": "/\\.js$/", 
        "include": "./node_modules/mapbox-gl/js/render/painter/use_program.js", 
        "loader": "transform/cacheable?brfs"
      }, {
        "test": "/\\.js$/",
        "include": "./node_modules/mapbox-gl-shaders/index.js",
        "loader": "transform/cacheable?brfs"
      }, {
        "test": "/\\.js$/",
        "include": "./node_modules/webworkify-webpack/index.js",
        "loader": "worker"
      }, {
        "test": "/\\.css$/",
        "loader": "style!css?importLoaders=1!autoprefixer",
        "include": [
            "./node_modules"
        ]
      }, {
        "test": "/\\.scss$/",
        "include": [
          "./node_modules"
        ]
      }, {
        "test": "/\\.sass$/",
        "loader": "!style!css!sass?indentedSyntax!",
        "include": [
          "./node_modules"
        ]
      }, { 
        "test": "/\\.json$/", 
        "loader": "json-loader" 
      }, { 
        "test": "/\\.(png|jpg|jpeg|gif)$/", 
        "loader": "url-loader" 
      }
    ]
  },
  "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ],
  "postLoaders": [
    {
      "include": "./node_modules/mapbox-gl/",
      "loader": "transform",
      "query": "brfs"
    }
  ],
  "resolve": {
    "alias": {
      "webworkify": "webworkify-webpack"
    }
  }
}

供您参考,我使用由反应式堆栈 https://github.com/thereactivestack/meteor-webpack并且它设置 webpack 的方式略有不同。

这是我的package.json用于 npm 设置

"dependencies": {
    "meteor-node-stubs": "^0.2.3",
    "meteoredux": "0.0.2",
    "numeral": "^1.5.3",
    "object-assign": "^4.0.1",
    "react": "^0.14.8",
    "react-addons-create-fragment": "^0.14.8",
    "react-addons-css-transition-group": "^0.14.8",
    "react-addons-linked-state-mixin": "^0.14.8",
    "react-addons-perf": "^0.14.8",
    "react-addons-pure-render-mixin": "^0.14.8",
    "react-addons-test-utils": "^0.14.8",
    "react-addons-transition-group": "^0.14.8",
    "react-addons-update": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-helmet": "^3.0.0",
    "react-mixin": "^3.0.4",
    "react-redux": "^4.4.4",
    "react-tap-event-plugin": "^0.2.2",
    "redux": "^3.4.0",
    "string": "^3.3.1"
  },
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "brfs": "^1.4.3",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "geojson": "^0.3.0",
    "less": "^2.3.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.6.0",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.2.0",
    "sass-loader": "^3.2.0",
    "sass-resources-loader": "^1.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-hot-middleware": "^2.4.1",
    "json-loader": "^0.5.4",
    "webworkify-webpack": "^1.1.0",
    "transform-loader": "^0.2.3",
    "mapbox-gl": "^0.19.0"
  }

我做错了什么?欣赏某人来自MDG https://www.meteor.com/company可以解释这个错误,因为我相信它与 Meteor 系统有关。仅供参考,我用npm start运行页面

UPDATE

根据@also的建议,我将部分设置移至webpack.conf.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            webworkify: 'webworkify-webpack'
        }
    },
    module: {
        loaders: [{
            test: /\.json$/,
            loader: 'json-loader'
        }, {
            test: /\.js$/,
            include: path.resolve('./node_modules/mapbox-gl-shaders/index.js'),
            loader: 'transform/cacheable?brfs'
        }],
        postLoaders: [{
            include: /node_modules\/mapbox-gl-shaders/,
            loader: 'transform',
            query: 'brfs'
        }]
    }
};

我从中得到设置here https://github.com/mapbox/mapbox-gl-js/blob/master/webpack.config.example.js。和我的webpack.json

{
  "root": "src",
  "devServer": {
    "host": "localhost"
  },
  "sass": {
    "module": true
  },
  "css": {
    "module": true
  },
  "module": {
    "loaders": [
      {
        "test": "/\\.css$/",
        "loader": "style!css?importLoaders=1!autoprefixer",
        "include": [
            "./node_modules",
          "./src/SewApps/client/css",
            "./src/SewApps/client/Search/css"
        ]
      }, {
        "test": "/\\.scss$/",
        "include": [
          "./node_modules",
          "./src/SewApps/client/css",
          "./src/SewApps/client/Search/css"
        ]
      }, {
        "test": "/\\.sass$/",
        "loader": "!style!css!sass?indentedSyntax!",
        "include": [
          "./node_modules"
        ]
      }, { 
        "test": "/\\.(png|jpg|jpeg|gif)$/", 
        "loader": "url-loader" 
      }
    ]
  },
  "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ]
}

但我还是遇到了另一个错误

=> Exited with code: 8                        
W20160609-14:26:04.106(8)? (STDERR) 
W20160609-14:26:04.107(8)? (STDERR) /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/app/server.js:59
W20160609-14:26:04.107(8)? (STDERR)     import { ReactRouterSSR } from 'meteor/reactrouter:react-router-ssr';
W20160609-14:26:04.107(8)? (STDERR)     ^^^^^^
W20160609-14:26:04.107(8)? (STDERR) SyntaxError: Unexpected reserved word
W20160609-14:26:04.107(8)? (STDERR)     at /Users/muhaimincs/Documents/suolja/src/.meteor/local/build/programs/server/boot.js:278:30
W20160609-14:26:04.107(8)? (STDERR)     at Array.forEach (native)
W20160609-14:26:04.107(8)? (STDERR)     at Function._.each._.forEach (/Users/muhaimincs/.meteor/packages/meteor-tool/.1.3.1.r1m70++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20160609-14:26:04.107(8)? (STDERR)     at /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/boot.js:133:5

以下 webpack.config.js 对我有用。它融合了 @also 对 brfs 匹配器的好主意:

var webpack = require('webpack')
var path = require('path')

module.exports = {
  entry: './app.js',
  output: { path: __dirname, filename: 'bundle.js' },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      webworkify: 'webworkify-webpack',
      'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'stage-0']
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'node_modules/webworkify/index.js'),
        loader: 'worker'
      },
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'transform/cacheable?brfs'
      }
    ]
  },
};

我有一个工作示例 https://github.com/sleepycat/mapboxgl-webpack-example我一直在关注最新情况。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

未捕获的类型错误:fs.readFileSync 不是函数 的相关文章

  • VSCode 在 React 的 JSX 中错误地格式化三进制

    我正在运行 VSCode 来开发我的 React 应用程序 我有一个简单的三元 isLoading
  • Webpack中watch编译时加速scss的方法

    太长了 滚动到底部寻找答案 或者将 Webpack 和 Dart Sass VM 结合起来 https github com sass dart sass releases https github com sass dart sass r
  • 使用 JQueryUI Autocomplete 和 Meteor 的规范方法

    使用 Meteor 我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法 我有两个工作提案 想听听关于差异的意见 以及是否有更好的方法来做同样的事情 使用发布 订阅 Server Meteor publish auto
  • 在 useRef() 中存储回调

    这是一个可变引用的示例 它存储来自反应过度的博客 https overreacted io making setinterval declarative with react hooks function useInterval callb
  • 让Webpack不捆绑文件

    所以现在我正在使用一个原型 我们使用 webpack 用于构建 tsx 文件和复制 html 文件 和 webpack dev server 之间的组合来提供开发服务 正如您可以假设的那样 我们也使用 React 和 ReactDOM 作为
  • 如何将 create-react-app 与较旧的 React 版本一起使用?

    使用时创建反应应用程序 https github com facebookincubator create react app with 自定义反应脚本 https github com kitze custom react scripts
  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt
  • React-Redux:绑定按键操作以启动减速器序列的规范方法是什么?

    这是一个关于react redux的新手问题 我花了几个小时四处搜寻才发现 所以我发布了这个问题 然后为后代回答 也可能是代码审查 我正在使用 React Redux 创建一个游戏 我想使用 WASD 键在小地图上移动角色 这只是更大努力的
  • 使用 React-navigation 的 React Native 中的模态窗口

    我在用react navigation在 React Native 中 我想在启动时确定用户是否已登录 如果他 她已经登录 我想打开一个模式窗口 全屏 如何最好地做到这一点 我在反应导航文档中找不到有条件显示屏幕的任何内容 看 你需要改变m
  • Meteor 用户属性

    我希望能够在 Meteor 身份验证系统中将用户标记为 管理员 并允许该用户执行特殊操作 以及显示一些如果他们不是管理员则不会显示的 gui 元素 我已经尝试在用户对象上设置一个 admin 属性 这在服务器端可以正常工作 对于管理操作的
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • 如何在React中处理多个路由器

    假设我们有一个网络应用程序 它通常有很多视图 例如索引页面 管理面板 帮助页面 联系人等 我在主index js 中使用react router dom 来处理它们 它工作得很好 但是现在我在开发管理面板时遇到了问题 它是 index js
  • ./types 的大小写与底层文件系统不匹配

    所以我从 eslint 收到了一些奇怪的警告 types 是流类型文件 我认为 eslint 将 checkbox 读取为小写 而实际上它是 Checkbox 大写 C I try git mv casesensitive tmp git
  • 了解 React Native 中的默认字体大小

    在过去的几个月里 我一直在开发一个 React Native 应用程序 但有些事情总是让我困惑 而我现在正试图弄清楚它的真相 我正在尝试标准化应用程序中的字体大小 正文 标题等 并且正在努力了解 React Native 究竟从哪里获取默认
  • 类型“never”上不存在属性“click”。 TS2339

    根据有关 TypeScript 此类错误的其他类似问题 关于问题 44147937 https stackoverflow com questions 44147937 property does not exist on type nev
  • 如何在React Material UI简单输入中启用文件上传?

    我正在创建一个简单的表单来使用带有 redux 表单和材料 ui 的 electro react boilerplate 来上传文件 问题是我不知道如何创建输入文件字段 因为材料用户界面不支持上传文件输入 关于如何实现这一目标有什么想法吗
  • 向 ReduxReducer 添加回调

    是否有任何错误 反模式 就 React Redux 中的思考 中添加了一个回调action data转化为行动 reducer ACTION FOR REDUCER var x 123 if action data callback act
  • Mongo按动态字段排序

    所以我传入了一个动态变量 它是我想要排序的字段的名称 假设下面的 sortVariable 可能等于 price createdAt name 等 这不起作用 我该怎么做 function findStuff sortVariable va
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • 过滤嵌套的 JSON 对象

    我有一个搜索栏 您可以在其中输入员工姓名 它应该根据过滤器返回姓名 我有一个嵌套的 JSON 对象 如下所示 我需要深入了解该对象以访问数组中的员工姓名 您可以看到我尝试实现的多个选项 它们已被注释掉 我的问题是代码没有过滤名称并返回所有名

随机推荐

  • 在打字稿中导入模块时,绝对路径的根是什么?

    我正在使用打字稿 在 Visual Studio 2015 中 开发一个应用程序 并具有以下基本文件结构 Solution AppProject Scripts framework Utils ts app SomeApp ts tscon
  • 通过socks的Python ssh客户端(代理)

    所以 我需要通过代理socks连接到SSH服务器 我阅读了 paramiko 和twisted conch 文档 但没有在那里找到代理袜子支持 这个套接字包装器允许您使用静态 ssh 隧道 我找到了解决我的问题的通用方法 使用帕里科SSHC
  • OCaml 在运行时编译和加载

    我正在尝试实现类似的目标eval 在 OCaml 中 我有一个string我想从中得到一个 OCaml 函数 目前我正在做以下事情 我将字符串转储到new ml并编译文件 Compile implementation Format std
  • JavaScript AJAX 远程记录器 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在平台上开发 JavaScript 应用程序 该平台不支持日志输出 不允许为记录器输出打开新窗口
  • Swift 使用 UnsafePointer 从 UnsafeMutablePointer 获取值

    我正在努力通过contextInfo of typeUnsafeMutablePointer
  • 如何将异常保存在txt文件中?

    public DataTable InsertItemDetails FeedRetailPL objFeedRetPL DataTable GetListID new DataTable try SqlParameter arParams
  • 如何知道 Mongoose 的 upsert 是否创建了新文档?

    我在 node js express js 中有这段代码 var User mongoose model User var usersRouter express Router usersRouter put id function req
  • 升级AGP版本失败

    我无法更新我的项目 当我尝试这样做时 我收到了这条消息 升级助手无法升级此项目 找不到执行将 AGP 版本从 4 1 3 升级到 4 2 0 命令的方法 可能是因为该项目的构建文件使用了升级助手当前不支持的功能 例如 使用定义的常量 在 b
  • 如何在 Treeview 控件中使子节点可见 = false

    我有一个带有树视图控件的窗口窗体 该树视图有一个根节点和 2 个子节点 我的要求是我需要隐藏第一个子节点 是否有可能使特定孩子点头可见为假 是的 您可以从树节点继承并创建您自己的行为 就像这样 public class RootNode T
  • 使用 Angular 6 和 Spring Rest API 下载文件

    我在使用 Angular 6 从 Rest api 下载文件时遇到问题 后端方法 RequestMapping value print id public ResponseEntity
  • 使用python发送消息时出现错误400

    我正在尝试使用 Gmail API 发送电子邮件 我已成功通过身份验证 并且我的计算机上有一个 client secret json 文件 我已经能够使用 Gmail API 网站上的快速入门示例获取标签列表 我已成功将范围重置为 SCOP
  • 如何从蓝牙 LE 设备获取数据

    我有一台支持蓝牙 LE 的蓝牙条形码扫描仪 我试图在扫描时从中获取条形码信息 我可以正常连接onServicesDiscovered被叫到我的BluetoothGattCallback但我不知道从那里该做什么 通过经典的蓝牙连接 您将获得I
  • 使用 Redux 获取数据时如何避免竞争条件?

    我们有一个异步获取对象的操作 我们称之为getPostDetails 它需要一个参数来获取哪个帖子 一个 ID 用户会看到一个帖子列表 可以单击其中一个来获取一些详细信息 如果用户点击 Post 1 我们会发送一个GET POST动作可能看
  • 尝试连接到cleardb时出错

    再次嗨 我想连接到heroku中的cleardb实例 我从heroku配置变量中获取主机名和凭据CLEAR DATABASE URL但我收到以下错误 错误 2003 HY000 无法连接到 us cdbr east 06 cleardb n
  • 为什么我应该开始使用 Google Material Design Lite 而不是 Twitter Bootstrap 或 Foundation

    免责声明 我不想开始任何对抗谷歌粉丝 我只是问 因为我没有找到我的问题的直接答案 也许已经开始使用它的人 或任何谷歌开发人员 可以提供建议 谷歌最近宣布材料设计精简版 1 0 https developers google com web
  • (R, dplyr) 选择以相同字符串开头的多列并按组汇总平均值 (90% CI)

    我是 tidyverse 的新手 从概念上讲 我想计算以 ab 开头 按 case 分组的所有列的平均值和 90 CI 尝试了很多方法 但似乎都不起作用 我的实际数据有很多列 所以明确列出它们不是一个选择 测试数据如下 library ti
  • Keycloak 支持基本身份验证吗?

    Keycloak 是否支持基本身份验证 授权标头包含单词 Basic 单词 后跟一个空格和一个 base64 编码的字符串 username password 如果支持 我如何为其配置领域和客户端设置 我想使用 Keycloak 保护我的其
  • Android异常处理最佳实践?

    如果我的应用程序崩溃 它会挂起几秒钟 然后 Android 告诉我该应用程序崩溃并需要关闭 所以我正在考虑用一般的方法捕获我的应用程序中的所有异常 try catch Exception e 并制作一个新的Activity这解释了应用程序立
  • 如何确定日期是否是周末(不使用 lubridate)

    我有一个日期对象向量 yyyy mm dd 我想确定其中是否有周末 有没有一个函数可以直接确定这一点 我可以用wday in the 润滑封装然后判断返回值是否为01 or 07 但是还有其他更直接的吗 x lt seq Sys Date
  • 未捕获的类型错误:fs.readFileSync 不是函数

    我正在尝试获取 webpack 和地图盒 GL https github com mapbox mapbox gl js blob master webpack config example js在 Meteor 系统中协同工作 我到处都查