从GitHub部署应用至Heroku时出现Module not found错误求助

Hey there! Let's tackle this deployment headache you're hitting on Heroku. The error you’re seeing—ERROR in ./src/Index.tsx Module not found: Error: Can't resolve './ConfigureStore'—is super common when deploying TypeScript apps to Heroku, even if everything runs smoothly locally. Here are the most likely fixes to try:

1. Fix Case Sensitivity Mismatches #

Local systems like Windows or macOS are usually case-insensitive, but Heroku runs on Linux servers which enforce strict case sensitivity. If your actual file is named configureStore.ts (lowercase "c") but you’re importing ./ConfigureStore, that’ll work locally but break on Heroku. Double-check the exact filename in your src folder and make sure your import matches it perfectly.

2. Ensure Webpack Resolves TypeScript Extensions #

Your webpack config might not be set up to automatically resolve .ts/.tsx extensions in the Heroku build. Add or update the resolve.extensions array in your config to include these file types:

module.exports = {
  // ... other config settings
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
};

This tells webpack to look for files with those extensions when you omit them in your import statements.

3. Make Sure Dev Dependencies Are Installed on Heroku #

By default, Heroku skips installing devDependencies when NODE_ENV=production. If webpack tools like webpack-merge or CheckerPlugin are listed in your devDependencies, Heroku won’t have them during the build process, leading to failures. You have two options here:

• Move those webpack-related packages to the dependencies section of your package.json, or
• Run heroku config:set NPM_CONFIG_PRODUCTION=false in your terminal to force Heroku to install devDependencies during builds.

4. Double-Check Your Webpack Merge Setup #

Since you’re using webpack-merge, make sure your production config is properly merging all necessary settings from your base config. For example, if your base config has the resolve rules but your production config doesn’t include that merge, it could cause extension resolution issues. Verify your merge code looks something like this:

const baseConfig = require('./webpack.base.config');
const productionConfig = { /* your production-specific settings */ };

module.exports = merge(baseConfig, productionConfig);

5. Confirm the File Is Committed to Git #

It’s easy to forget to track a file in Git! Run git status locally to make sure ConfigureStore.ts (or its correct filename) is committed and pushed to your GitHub repo. If it’s missing from Git, Heroku won’t have access to it during the build.

After trying these steps, redeploy to Heroku and see if the error clears up. These fixes cover the vast majority of cases for this exact issue.

内容的提问来源于stack exchange，提问作者User3250