export 'default' (imported as 'InfiniteLoading') was not found in 'v3-infinite-loading' (module has no exports)

[utkarshMall91]

Hi im facing this error just after importing the package
I created a test project to show it

Dependency list of project
"dependencies": { "core-js": "^3.8.3", "v3-infinite-loading": "^1.3.1", "vue": "^3.2.26" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} },

All I did is import the module:

import InfiniteLoading from "v3-infinite-loading";
import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots

const app = createApp(App).mount("#app");
app.component("infinite-loading", InfiniteLoading);`

Error Warning when you run vue-cli-service serve :
export 'default' (imported as 'V3InfiniteLoading') was not found in 'v3-infinite-loading' (module has no exports)
Error in chrome dev console:

Uncaught TypeError: Cannot read properties of undefined (reading 'pushScopeId')
    at S (v3-infinite-loading.umd.js:1:1)
    at eval (v3-infinite-loading.umd.js:1:1)
    at eval (v3-infinite-loading.umd.js:1:1)
    at eval (v3-infinite-loading.umd.js:1:1)
    at ./node_modules/v3-infinite-loading/lib/v3-infinite-loading.umd.js (chunk-vendors.js:1868:1)
    at __webpack_require__ (app.js:1106:33)
    at fn (app.js:1340:21)
    at eval (main.js:16:77)
    at ./src/main.js (app.js:195:1)
    at __webpack_require__ (app.js:1106:33)

Dummy Project Repo: LINK

[andsnake]

hi, i can confirm the same thing happened with my project as well.

It was working fine when i installed it a couple of months back, but i tried last Saturday to install a new npm package and this started to show up. At first i though it might have something to do with the new package i installed, but the same happens regardless of packages. If i revert back to the previous version and try adding anything into package.json and run npm install. This error shows up .

[rparnpuu]

For some reason UMD didn´t work for me either, yet ESM did.

I added workaround to Webpack via aliasing, so it would use ESM file instead of UMD.

module.exports = (env, argv) => {
    return {
        resolve: {
            alias: {
                  "v3-infinite-loading$": path.resolve(
                    __dirname,
                    "node_modules/v3-infinite-loading/lib/v3-infinite-loading.es.js",
                ),
            },
        },
}

[Serzhs]

I'm experiencing the same issue. It's unfortunate that the example provided in the documentation is generating errors. :(

[Exootic]

I'm experiencing the same issue. Using: v3-infinite-loading: 1.3.1 with vue 3.2.13.

[niraviwebbracket]

I am also experiencing the same issue with Vue 3
export 'default' (imported as 'InfiniteLoading') was not found in 'v3-infinite-loading' (module has no exports)

[MarcinFeli]

Someone get the solution?

[TakumaTajikawa]

I am encountering the same error.
I am struggling without being able to resolve it.
If anyone has resolved this issue, please share the solution.

[joven1export]

i found a rather simple solution to this problem, by just directly importing the v3-infinite-loading.es.js in the .Vue component i wanna use it in. import InfiniteLoading from "../../../../../node_modules/v3-infinite-loading/lib/v3-infinite-loading.es.js"/"v3-infinite-loading/lib/v3-infinite-loading.es.js""; by tracking back to the root of the directory and crawling into the node_modules folder then into the v3-infinite-loading folder, similar to what @rparnpuu's code does. There's probably a way to go straight to the root directory without having to type in so much "../", if there is, do tell me, it will be much appreciated.

[anievolve]

downgrade to 1.2.2 will solve the issue

[oumoussa98]

If the default import isn't working as expected
try to explicitly import the desired module format like so

import InfiniteLoading from "v3-infinite-loading/lib/v3-infinite-loading.es.js"