vue3-infinite-loading
vue3-infinite-loading copied to clipboard
export 'default' (imported as 'InfiniteLoading') was not found in 'v3-infinite-loading' (module has no exports)
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
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 .
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",
),
},
},
}
I'm experiencing the same issue. It's unfortunate that the example provided in the documentation is generating errors. :(
I'm experiencing the same issue. Using: v3-infinite-loading: 1.3.1 with vue 3.2.13.
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)
Someone get the solution?
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.
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.