Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax

[shilik]

After upgrading to the latest version of vue-axios, I got the following error message.

***** Fatal JavaScript exception - application has been terminated. ***** NativeScript encountered a fatal error: Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./node_modules/vue-axios/dist/vue-axios.esm.min.js at set(file: app/webpack:/douyou/webpack/runtime/harmony module decorator:7:0 at ./node_modules/vue-axios/dist/vue-axios.esm.min.js(file: app/webpack:/douyou/node_modules/vue-axios/dist/vue-axios.esm.min.js:1:688 at __webpack_require__(file: app/webpack:/douyou/webpack/bootstrap:19:0 at ./app/main.js(file:///app/bundle.js:28:68) at __webpack_require__(file: app/webpack:/douyou/webpack/bootstrap:19:0 at __webpack_exec__(file:///app/bundle.js:12601:39) at (file:///app/bundle.js:12602:221) at __webpack_require__.X(file: app/webpack:/douyou/webpack/runtime/startup entrypoint:6:0 at (file:///app/bundle.js:12602:47) at (file:///app/bundle.js:12607:3) at require(:1:137)

Any suggestions for the above errors? Thanks.

[hotrungnhan]

the lastest version using esm export system , which is conflig with some code in src.

import VueAxios from "vue-axios"

Let try commonjs build instead.

Import VueAxios from "vue-axios/dist/vue-axios.common.min

[shilik]

Thanks for the suggestion, but still got the same error even changed the code order to Vue.use(VueAxios,axios)

(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./node_modules/vue-axios/dist/vue-axios.esm.min.js at set(file: app/webpack:/douyou/webpack/runtime/harmony module decorator:7:0 at ./node_modules/vue-axios/dist/vue-axios.esm.min.js(file: app/webpack:/douyou/node_modules/vue-axios/dist/vue-axios.esm.min.js:1:688 at __webpack_require__(file: app/webpack:/douyou/webpack/bootstrap:19:0 at ./app/main.js(file:///app/bundle.js:28:68) at __webpack_require__(file: app/webpack:/douyou/webpack/bootstrap:19:0 at __webpack_exec__(file:///app/bundle.js:12602:39) at (file:///app/bundle.js:12603:221) at __webpack_require__.X(file: app/webpack:/douyou/webpack/runtime/startup entrypoint:6:0 at (file:///app/bundle.js:12603:47) at (file:///app/bundle.js:12608:3) at require(:1:137) ', reason: '(null)' *** First throw call stack:

[shilik]

@hotrungnhan Finally, I got the problem solved! The import method I used that worked previously, doesn't work now. import VueAxios from "vue-axios" While an alternative way you suggested worked like a charm. const VueAxios =require("vue-axios/dist/vue-axios.common.min)

Not sure what is wrong with the original import method.

[hotrungnhan]

It cause by webpack config of native script because the implement contain both "module.exports" and "export default".

[shilik]

@hotrungnhan Thanks for the description for the possible solution. You are right, I just upgraded @nativescript/webpack from 5.0.0-rc.8 to formal release of 5.0.0. But vue-axios is the only plugin that yielded the errors after the upgrade.

[imcvampire]

@hotrungnhan Should we set the default entry to .common.js to make sure that there is no breaking change?

[hotrungnhan]

This in index.js cause the error for esm.

if (typeof exports == "object") {
  module.exports = plugin;
And
Export default plugin
} 

Just remove export type ,check these all solve. Es6 import syntax is more fomal than the other, so we dont need to keep other.

[imcvampire]

@hotrungnhan So what is your suggestion?

[Alanscut]

Hi @shilik, could you provide your webpeck config and import way? I can't reproduce the error with vue-cli project. And your fainal solution is to use const VueAxios =require("vue-axios/dist/vue-axios.common.min)?

[shilik]

Hi @Alanscut Here is the setting of my webpack.config.js `const webpack = require("@nativescript/webpack");

module.exports = (env) => { webpack.init(env);

// Learn how to customize:
// https://docs.nativescript.org/webpack

webpack.chainWebpack((config) => {
config.set('externalsPresets', {
node: false
     })
config.resolve.fallback = config.resolve.fallback || {};
//config.resolve.fallback.url2 = require.resolve('url/');
config.resolve.set("fallback", {
  os: false,
  tty: false,
  assert: false,
  stream: false,
  https: false,
  http: false,
  url: false,
  util: false,
  zlib: false,
  path: false,
  fs: false,
  assert:false,
  buffer:false,
  console:false,
  constants:false,
  crypto:false,
  domain:false,
  events:false,
  punycode:false,
  process:false,
  querystring:false,
  _stream_duplex:false,
  _stream_passthrough:false,
  _stream_readable:false,
  _stream_transform:false,
  _stream_writable:false,
  string_decoder:false,
  sys:false,
  timers:false,
  vm:false,
});

});

return webpack.resolveConfig();

}; `

And you are right, I used const VueAxios =require("vue-axios/dist/vue-axios.common.min") as a solution to this problem. An alternative way suggested by @hotrungnhan like mport VueAxios from "vue-axios/dist/vue-axios.common.min") worked as well.

[Alanscut]

thanks your reply! It seems to relate with the export way of vue-axios, referred to https://github.com/babel/babel/issues/12731 , adding sourceType: "unambiguous" to babel.config.js may fix this issue:

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: "3.8.3"
      }
    ]
  ],
  sourceType: "unambiguous"
}

[shilik]

Hi, @Alanscut Thanks for the advisement. I have tried sourceType: "unambiguous" before, but got the same result. The only one that works for me is const VueAxios =require("vue-axios/dist/vue-axios.common.min") and import VueAxios from "vue-axios/dist/vue-axios.common.min"

[imcvampire]

Hi @Alanscut @shilik, have you tried the latest version? Has the problem been fixed?