在 Heroku 上部署时找不到模块错误

2024-01-07

我正在尝试将 Github 上的应用程序部署到 Heroku 但出现错误:

./src/Index.tsx 中出现错误 找不到模块:错误:无法解析“/app/src”中的“./ConfigureStore” @ ./src/Index.tsx 9:23-50

当我部署在 Heroku 上时,似乎是 Typescript 问题。

尽管如此,在我的本地运行完美,webpack 生成捆绑包并且应用程序运行良好。 下面是我的 webpack.config:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const rootModulePath = "./src/";

module.exports = {
    stats: { modules: false },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']
    },
    entry: {
        'DIG': rootModulePath + "Index.tsx"
    },
    externals: {
        jQuery: 'jQuery'
      },
      node: {
        fs: 'empty'
      },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
          }),
        new webpack.IgnorePlugin(/\.\/locale$/),
        new CheckerPlugin()        
    ],
    devtool: 'source-map',
    output: {
        path: __dirname,
        filename: './public/dig.js'
    },
    module: {
        rules: [
            { test: /\.tsx?$/, include: /src/, use: ['awesome-typescript-loader?silent=true'] },
            //{ test: /\.ts$/, include: /src/, use: 'awesome-typescript-loader?silent=true' },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            // { test: /\.js/, loader: 'imports-loader?define=>false'}
        ]
    }    
};

包.json

{
  "name": "digeratia",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "npm run build && node server.js"
  },
  "author": "Vivek Singh",
  "dependencies": {
    "@types/history": "4.6.2",
    "@types/numeral": "0.0.22",
    "@types/react": "16.1.0",
    "@types/react-bootstrap": "^0.32.6",
    "@types/react-dom": "16.0.4",
    "@types/react-hot-loader": "3.0.6",
    "@types/react-redux": "5.0.15",
    "@types/react-router": "4.0.23",
    "@types/react-router-dom": "4.2.6",
    "@types/react-router-redux": "5.0.13",
    "@types/webpack": "4.1.3",
    "@types/webpack-env": "1.13.5",
    "awesome-typescript-loader": "4.0.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.0.0-alpha.6",
    "chai": "^4.1.2",
    "create-react-class": "^15.6.2",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "domain-task": "^3.0.3",
    "event-source-polyfill": "0.0.12",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.11",
    "history": "4.7.2",
    "html-to-react": "1.3.3",
    "it": "^1.1.1",
    "json-loader": "0.5.7",
    "less": "^3.0.1",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.4",
    "node-noop": "1.0.0",
    "numeral": "^2.0.6",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-element-to-jsx-string": "^13.0.0",
    "react-hot-loader": "4.0.1",
    "react-image": "^1.0.1",
    "react-intl": "^2.4.0",
    "react-moment": "^0.7.0",
    "react-popper": "^0.9.2",
    "react-redux": "5.0.7",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "shelljs": "^0.8.1",
    "style-loader": "^0.20.3",
    "to-string-loader": "^1.1.5",
    "typescript": "2.8.1",
    "url-loader": "1.0.1",
    "webpack": "4.4.1",
    "webpack-hot-middleware": "2.21.2",
    "webpack-merge": "4.1.2",
    "xit": "^0.2.0",
    "abort-controller": "^1.0.0",
    "babel-plugin-syntax-optional-chaining": "^7.0.0-alpha.13",
    "babel-runtime": "^6.26.0",
    "core-js": "^2.5.1",
    "css-loader": "^0.28.4",
    "css-to-string-loader": "^0.1.3",
    "react-render-html": "^0.6.0",
    "toastr": "^2.1.2",
    "webpack-cli": "^2.0.12"
  },
  "devDependencies": {
    "abort-controller": "^1.0.0",
    "babel-plugin-syntax-optional-chaining": "^7.0.0-alpha.13",
    "babel-runtime": "^6.26.0",
    "core-js": "^2.5.1",
    "css-loader": "^0.28.4",
    "css-to-string-loader": "^0.1.3",
    "react-render-html": "^0.6.0",
    "toastr": "^2.1.2",
    "webpack-cli": "^2.0.12"
  }
}

github代码网址是here https://github.com/singhvivek2503/DigeratiGlobalReact

请帮助,因为我很长时间都困在这个问题上。


所以问题不在于你发布的内容。该问题已得到解决,因为您假设Index.ts or Index.tsx相当于index.ts or index.tsx。如果你看下面的线程

webpack:在 MacOS 上正常,在 Linux 上加载器错误 https://stackoverflow.com/questions/28789050/webpack-fine-on-macos-loader-errors-on-linux

它解释了在 Mac 上构建您不会遇到这个问题。我假设 Windows 也有同样的情况。但与Linux你将面临这个问题。这就是这里正在发生的事情。如果你 ssh 到 heroku 盒子

$ heroku ps:exec
Establishing credentials... done
Connecting to web.1 on ⬢ sleepy-sea-65699...
~ $ webpack -p --verbose
Hash: 8c20236f8268ce043077
Version: webpack 3.10.0
Time: 24904ms
            Asset     Size  Chunks                    Chunk Names
    ./docs/dig.js   608 kB       0  [emitted]  [big]  DIG
./docs/dig.js.map  4.25 MB       0  [emitted]         DIG
Entrypoint DIG [big] = ./docs/dig.js ./docs/dig.js.map
chunk    {0} ./docs/dig.js, ./docs/dig.js.map (DIG) 1.38 MB [entry] [rendered]
...
...
ERROR in ./src/configureStore.ts
Module not found: Error: Can't resolve './Stores' in '/app/src'
resolve './Stores' in '/app/src'
  using description file: /app/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /app/package.json (relative path: ./src)
    using description file: /app/package.json (relative path: ./src/Stores)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /app/src/Stores is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /app/src/Stores.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /app/src/Stores.jsx doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /app/src/Stores.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /app/src/Stores.tsx doesn't exist
      .css
        Field 'browser' doesn't contain a valid alias configuration
        /app/src/Stores.css doesn't exist
      as directory
        existing directory
          using path: /app/src/Stores/index
            using description file: /app/package.json (relative path: ./src/Stores/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /app/src/Stores/index doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /app/src/Stores/index.js doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                /app/src/Stores/index.jsx doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                /app/src/Stores/index.ts doesn't exist
              .tsx
                Field 'browser' doesn't contain a valid alias configuration
                /app/src/Stores/index.tsx doesn't exist
              .css
                Field 'browser' doesn't contain a valid alias configuration
                /app/src/Stores/index.css doesn't exist

正如您所看到的,错误文件的大小写是index并不是Index

另外,如果你检查你的回购配置

$ cat .git/config
[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true

您可以看到ignorecase被设定为true,这不好,因为这样 git 就不会查看文件重命名和案例更改并推送重命名的文件。

所以本质上的错误是你的Index.ts should index.ts使您的构建跨操作系统兼容

区分大小写的插件

您应该为您的开发启用区分大小写的插件以避免此类问题

$ npm install --save-dev case-sensitive-paths-webpack-plugin

> [email protected] /cdn-cgi/l/email-protection install /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact/node_modules/fsevents
> node install

[fsevents] Success: 
+ [email protected] /cdn-cgi/l/email-protection
added 117 packages from 85 contributors and removed 3 packages in 9.661s

更新您的webpack.config.js像下面这样

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const rootModulePath = "./src/";
const rootBundlePath = "./src/bundle/";
const isDevBuild = true;
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');


module.exports = {
    stats: { modules: false },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']
    },
    entry: {
        'DIG': rootModulePath + "Index.tsx"
    },
    externals: {
        jQuery: 'jQuery'
      },
      node: {
        fs: 'empty'
      },
    plugins: [
        new CaseSensitivePathsPlugin(),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
          }),
 ....

现在,当您构建时,您也将直接在 Windows/Mac 中看到这些问题

sh-3.2$ npm run build

> [email protected] /cdn-cgi/l/email-protection build /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact
> webpack -p

Hash: 3762a6deb22d9fabd37b
Version: webpack 3.10.0
Time: 12279ms
            Asset     Size  Chunks                    Chunk Names
    ./docs/dig.js   511 kB       0  [emitted]  [big]  DIG
./docs/dig.js.map  3.56 MB       0  [emitted]         DIG

ERROR in ./src/configureStore.ts
Module not found: Error: [CaseSensitivePathsPlugin] `/Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact/src/Stores/index.ts` does not match the corresponding path on disk `Index.ts`.
 @ ./src/configureStore.ts 6:15-34
 @ ./src/Index.tsx
npm ERR! code ELIFECYCLE
npm ERR! errno 2
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Heroku 上部署时找不到模块错误 的相关文章

  • 使用实体框架重叠约会

    我将 asp net mvc 与实体框架一起使用 我有一个包含 startat 字段 endat 字段和 roomid 字段 称为 SpaceConfigurationId 的约会列表 并且希望查找给定房间已重复预订的约会列表 可以假设 e
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • IsReusable 属性中的上下文切换

    是否可重用属性 下面是我的理解IsReusable财产 如果处理程序返回静态内容 将值设置为 true 是安全的 但如果线程返回动态内容 为了使其线程安全 IsReusable应设置为 false 在这种情况下 可能会发生上下文切换 这可能
  • React 键“mods”的切片缩减器在初始化期间返回未定义。 (还原)

    减速器 index js import combineReducers from redux import mods from mods js export default combineReducers lt error comes fr
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • 在react中使用map方法渲染JSON API

    我对 JSON 对象 数组和映射方法的语法和结构有困难 我是 React 新手 正处于学习的初始阶段 这是我粘贴在下面的 JSON 文件代码 cloud Asia availability last15Min 100 last24Hour
  • 未能将一些参考推送至 [email protected]

    当我尝试推送到 Heroku 存储库时收到此错误 我已经设置了autocrlf false在gitconfig中 但这个问题仍然存在 我也尝试过这个解决方案here https stackoverflow com questions 566
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • 如何在reactjs中访问悬停状态?

    我有一个侧面导航 里面有很多篮球队 因此 当其中一个团队悬停在上方时 我想为每个团队显示不同的内容 另外 我正在使用 Reactjs 所以如果我可以有一个可以传递给另一个组件的变量 那就太棒了 React 组件在其顶级界面中公开所有标准 J
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 由于 apollo-client 未定义,无法解构 GraphQL 查询?

    我正在寻找调试与错误消息相关的问题 未捕获的类型错误 无法解构 0 apollo client WEBPACK IMPORTED MODULE 4 useQuery 因为它未定义 Context 我正在为我的 React js 项目设置后端
  • Webpack 与 typescript 获取 TypeScript 发出无输出错误

    我从这里得到了这个配置https www npmjs com package ts loader https www npmjs com package ts loader webpack config js var path requir
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 无法将 MVC 4 部署到服务器

    我的 Web 应用程序只是一个用 VS 2010 MVC 4 制作的简单 Web 应用程序 没有任何外部代码 它只是 VS 2010 的默认应用程序 我有 Plesk 的豪华 Windows 托管 我从未更改过帐户中的任何功能 我将所有文件
  • Angular 2 和 TypeScript 的承诺

    我正在尝试使用routerCanDeactivate我的应用程序中的组件的函数 简单的使用方法如下 routerCanDeactivate return confirm Are you sure you want to leave this
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • Asp.net MVC 路由 - 防止通过约束路由到 XML 文件

    我正在尝试找到一种方法来阻止用户访问特定的 xml 文件 我尝试过做 routes MapRoute SiteMap SiteMap siteMap xml new new isLocal new LocalHostRouteConstra
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 如何渲染变量(或 prop)内部的 jsx/html?

    const Footer gt let a b Hey b return div Some bold text a div 这只会呈现为Some bold text b Hey b 如何将粗体文本渲染为粗体 变量内容是我自己的 所以我不必担

随机推荐

  • SQL 计数器和返回器,将结果加倍

    我正在尝试制作一个列表 显示我的论坛上的所有类别 显示类别名称 ID 以及计数 计算有多少线程附加到该类别 它工作得很好 但是 它打印了两次结果 这是 SQL SELECT categories category name threads
  • 如何构建具有正常、斜体和粗体字体的轴标签

    我想构造以下 x 轴标签 bla bla bli bli bla blom bla 正常 正常斜体 斜体 正常粗体斜体 是否可以 多谢 编辑 是否也可以更改字体 plot 1 1 xlab expression bla bla italic
  • NATS 与分子。如何更改 NATS max_payload 值?

    我的问题是我需要增加 NATS 收到的 max payload 值 但我不知道在哪里可以做到这一点 该项目使用 Moleculer NATS 是通过 docker 创建为容器 当我尝试发出大于 1MB NATS 的请求时返回 ERROR N
  • Linq 仅查询每个唯一 ID 的前 N ​​行

    假设我有一个IQueryable这将返回一个数据类型ID属性 列 我想进一步过滤我的查询 我不想评估查询 如下 对于每一个独特的ID从主查询中 我想Take n where n是某个任意数 也就是说 我只想保留第一个n每个唯一 ID 的行
  • 如何在 IntelliJ IDEA 中使用“自定义 jar”?

    我正在尝试设置 IntelliJ IDEA 尝试了 12 和 13 Mac 以使用包含 Java 应用程序的 jar 文件的 Java 类 我已通过以下过程将 jar 设置为模块依赖项 从 项目窗口 开始 选择我的主Java模块 使用菜单文
  • Swift 异步 let 带循环

    我想并行获取数据 我找到了一个并行调用 API 的示例 但我想存储async let variables与循环 异步让我们举个例子 但是 此示例未使用循环 async let firstPhoto downloadPhoto named p
  • 使用 lapply 编写 data.frames 列表以分隔 CSV 文件

    问题说明了一切 我想获取一个充满 data frames 的列表对象 并将每个 data frame 写入一个单独的 csv 文件 其中 csv 文件的名称对应于列表对象的名称 这是一个可重现的示例以及我迄今为止编写的代码 df lt da
  • 带有 php 服务器套接字的 TLS

    Hi我的问题是 我的服务器端代码 编写为 php 中有一个打开的套接字 我需要转换此套接字以使用 TLS 在将流传递给使用清晰流的现有代码之前对流进行协商和描述没有加密 归档这个最简单的解决方案是什么 PHP 支持使用流上下文的 TLS S
  • Amazon Cognito 删除帐户

    我有 Amazon Cognito 用户池 其中添加了很少的用户 我已添加触发器以在发布确认后调用我的 Lambda 函数 我们在 Cognito 中是否有任何触发器在 用户注销 和 删除用户 之后调用 Lambda 函数 我在 Cogni
  • 如何使用 Unity WebCamTexture 保存 png

    我想使用设备本机相机保存图片 目前我无法将图像保存到文件中 我有一个原始图像 其纹理是本机设备相机图像 我正在从原始图像中获取字节并编码为 png 然后我将 png 写入我的计算机上的文件中 public WebCamTexture web
  • C# azure storage download 中路径访问被拒绝

    从天蓝色存储下载文件时 我遇到访问路径被拒绝的异常 下面是代码片段 string path c TEMP Retrieve storage account from connection string CloudStorageAccount
  • UITableViewCell 带有操作的按钮

    您好 我有一个自定义 UITableViewCell 带有三个按钮来处理购物车功能 加号 减号和删除按钮 我需要知道哪个单元格已被触摸 我已经尝试使用 标签解决方案 但由于细胞的生命周期 它不起作用 谁能帮我找到解决方案吗 提前致谢 我使用
  • 为什么我收到错误“MyActivity 不是封闭类?”

    我有一个 libgdx 程序 它以以下类开头 public class MyActivity extends AndroidApplication implements IActivityRequestHandler 我需要有一个Activ
  • Vuex axios调用无法处理422响应

    我正在尝试处理来自 API 的 422 响应 以防在进行异步 Axios 调用时数据无效 在组件中 我有一个类似的方法 async saveChanges this isSaving true await this store dispat
  • javax.imageio.IIOException:无法从 URL 获取输入流!

    我用java代码编写了一段代码来保存指定链接中的图像 它大部分工作正常 但有时它会抛出异常 即 javax imageio IIOException 无法从 URL 获取输入流 在 javax imageio ImageIO read Im
  • MySQL Select 和 IF() 语句

    我对 MySQL 有点陌生 我需要帮助 我有一张桌子Invoices和一张桌子Payments 我无法生成显示所有已支付发票的报告In Full or a Partial Payment已于 2019 年 12 月 31 日收到 一张发票可
  • OpenCL 内核未矢量化

    我正在尝试构建一个内核来进行并行字符串搜索 为此 我倾向于使用有限状态机 fsm 的转换表位于内核参数状态中 代码 kernel void Find constant char text const int offset const int
  • java:关闭子进程std流?

    来自 javadocjava lang Process http download oracle com javase 1 5 0 docs api java lang Process html 创建进程的方法可能不适用于某些本机平台上的特
  • scapy中sniff函数的过滤器无法正常工作

    看来filter of sniff功能无法正常工作 我正在使用以下过滤器执行嗅探 a sniff count 1 filter tcp and host 192 168 10 55 and port 14010 但有时sniff抓住一个UD
  • 在 Heroku 上部署时找不到模块错误

    我正在尝试将 Github 上的应用程序部署到 Heroku 但出现错误 src Index tsx 中出现错误 找不到模块 错误 无法解析 app src 中的 ConfigureStore src Index tsx 9 23 50 当