murongg / vue3-lazyload

A Vue3.x image lazyload plugin
https://murongg.github.io/vue3-lazyload/
166 stars 19 forks source link

Can't import the named export 'L' from non EcmaScript module (only default export is available) #23

Closed man90es closed 2 years ago

man90es commented 2 years ago

Hello! I've been using this plugin in one of my projects for a long time and versions 0.2.2-beta through 0.2.5-beta work perfectly. However, after trying to upgrade it to version 0.3.0 I am getting an error.

 ERROR  Failed to compile with 2 errors                                                                                                          3:16:36 PM

 error  in ./node_modules/vue3-lazyload/dist/index.mjs

Can't import the named export 'L' from non EcmaScript module (only default export is available)

 error  in ./node_modules/vue3-lazyload/dist/chunks/lazy.mjs

Module parse failed: Unexpected token (105:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|   update(el, binding) {
>     this._realObserver(el)?.unobserve(el);
|     const { src, error, lifecycle } = this._valueFormatter(typeof binding === "string" ? binding : binding.value);
|     this._initIntersectionObserver(el, src, error, lifecycle);

 @ ./node_modules/vue3-lazyload/dist/index.mjs 1:0-46 5:21-25
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.15:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I assume that it's caused by funky formats ".cjs" and ".mjs" used in the newest version instead of classic ".js". For context, I am using Node 14.17.6, Vue 3.2.8 and Webpack 4.46.0.

murongg commented 2 years ago

How did you import it? Can you provide code

man90es commented 2 years ago

How did you import it? Can you provide code

Here's the file: https://github.com/octoman90/Kumori/blob/master/src/main.js

murongg commented 2 years ago

Please use the lower version first

murongg commented 2 years ago

I tested vite and vue-cli, they all work. Please try remove yarn.lock then run yarn .

man90es commented 2 years ago

Please try remove yarn.lock then run yarn .

That was the first thing I've tried, still no luck.

man90es commented 2 years ago

I think I managed to fix this error by upgrading all dependencies my project has. Looks like older Vue and/or Webpack versions caused it. Here's the full list of upgrades I did: https://github.com/octoman90/Kumori/commit/0a3d4f4ab0d9b329c4f48fc3029fa895233a9b98

I suggest that you add a newer Vue version as a dependency for this plugin, so that such errors don't happen for other people.

murongg commented 2 years ago

I try upgrading all dependencies too.but you quickly

murongg commented 2 years ago

I think I managed to fix this error by upgrading all dependencies my project has. Looks like older Vue and/or Webpack versions caused it. Here's the full list of upgrades I did: octoman90/Kumori@0a3d4f4

I suggest that you add a newer Vue version as a dependency for this plugin, so that such errors don't happen for other people.

According to my test, only need upgrading @vue/cli-plugin-babe @vue/cli-service @vue/cli-plugin-eslint

murongg commented 2 years ago

I think I managed to fix this error by upgrading all dependencies my project has. Looks like older Vue and/or Webpack versions caused it. Here's the full list of upgrades I did: octoman90/Kumori@0a3d4f4

I suggest that you add a newer Vue version as a dependency for this plugin, so that such errors don't happen for other people.

It seems that it has nothing to do with the latest vue version.