Module not found Error when deployed on Heroku

前端 未结 5 1639
感动是毒
感动是毒 2021-02-14 14:09

I am trying to deploy my app on Github to Heroku but getting error:

ERROR in ./src/Index.tsx Module not found: Error: Can\'t resolve \'./ConfigureStore\

5条回答
  •  醉酒成梦
    2021-02-14 14:43

    So the issue is not what you posted it is. The issue got fixed because you assume Index.ts or Index.tsx is equivalent to index.ts or index.tsx. If you look at the below thread

    webpack: fine on MacOS, loader errors on linux

    It explains that building on Mac you wont face the issue. And I assume the same case with Windows as well. But with Linux you will face the issue. That is what is happening here. If you ssh to the heroku box

    $ 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
    

    As you can see the case of the file in error is index and not Index

    Also if you check you repo config

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

    You can see the ignorecase is set to true, which is not good, because then git won't look at the file renames and cases changes and push renamed files.

    So essentially the error is that your Index.ts should index.ts to make your build Cross-OS compatible

    Case sensitive plugin

    You should enable the case sensitive plugin for you development to avoid such issues

    $ npm install --save-dev case-sensitive-paths-webpack-plugin
    
    > fsevents@1.1.3 install /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact/node_modules/fsevents
    > node install
    
    [fsevents] Success: 
    + case-sensitive-paths-webpack-plugin@2.1.2
    added 117 packages from 85 contributors and removed 3 packages in 9.661s
    

    Update your webpack.config.js like below

    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'
              }),
     ....
    

    Now when you build you will see these issues directly in Windows/Mac as well

    sh-3.2$ npm run build
    
    > digeratiaglobal@1.0.0 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
    

提交回复
热议问题