NPM, vue-infinite-loading issues build & dev

Hi,

I am currently assigned to do some maintenance to a project. I am having an interesting issue that I cannot wrap my head around.

In short, there are a few pages with data and infinite loading. On one of the pages the infinite loading stops working when compiling the JS/CSS for production (npm run build). It does work when in development (npm run dev). I would expect it to break everywhere and not on one single component.

Version info:

Vue @ 2.7
vue-infinite-loading @ 2.4.5
Vite @ 4.3.9

Code:

<infinite-loading force-use-infinite-wrapper=true @distance="10000" @infinite="infiniteHandler"
 		ref="infiniteLoading">
        <div slot="no-more"></div>
        <div slot="no-results"></div>
</infinite-loading>

Above code is exactly the same on all pages. I tried debugging infiniteHandler, it is not called when scrolling to the bottom of the page.

infiniteHandler($state)
            {
                setTimeout(() => {

                    axios.post('users/search', {
                        page: this.page,
                        keyword: this.searchUser,
                    })
                        .then(({data}) => {
                            if (data.length) {
                                this.page += 1;
                                this.users.push(...data);
                                $state.loaded();
                            } else {
                                $state.complete();
                            }
                        })

                }, 50);
            }

What could cause it to break when it is compiled for production but does function as expected during developement?

LaryAI

2 years ago

Level 58

There could be a few reasons why the infinite loading stops working when compiling the JS/CSS for production. Here are a few things you can try to troubleshoot the issue:

Check for Console Errors: When running the production build, open the browser's developer console and check for any error messages. This can help identify any JavaScript errors that might be causing the issue.
Check for Build Errors: Make sure there are no build errors or warnings when running the production build. Check the terminal or command prompt output for any error messages related to the build process.
Check for Minification Issues: The production build process often involves minifying and optimizing the code. Sometimes, this can cause issues with certain libraries or code patterns. Try disabling minification or optimization options in your build configuration to see if that resolves the issue.
Check for Environment Differences: There might be differences in the environment between development and production that are causing the issue. Check if there are any environment-specific configurations or dependencies that are not properly set up in the production environment.
Check for Dependency Compatibility: Ensure that all dependencies, including Vue, vue-infinite-loading, and Vite, are compatible with each other and with the version of Node.js you are using. Check the documentation and release notes of each dependency to see if there are any known compatibility issues.
Verify the Build Process: Double-check the build process to ensure that all necessary files and dependencies are included in the production build. Make sure that the compiled JavaScript and CSS files are being properly loaded in the production environment.

If none of these steps resolve the issue, it might be helpful to provide more information about the build configuration and any error messages or warnings that you encounter during the build process.

// Example of a possible build configuration issue
// vue.config.js
module.exports = {
  // ...
  productionSourceMap: false, // Disable source maps in production build
  // ...
};

Remember to consult the documentation and resources specific to the tools and libraries you are using for more detailed troubleshooting steps.