What is the best way to bundle a .js file containing code with the export default syntax?

Question

What is the best way to bundle a .js file containing code with the export default syntax?

I have a single .js file with the following code:

export default (vueInst, obj, events) => {
  for (const eventName of events) {
    ...
  }
}

An issue has occurred:

Error at Function.missingTransform in /node_modules/buble/dist/buble.cjs.js:376:9

This particular file is part of my custom Quasar app extension with a UI kit. However, during the yarn build process, an error occurs due to the lack of a suitable plugin to rollup this specific .js file containing the aforementioned code.

Can you suggest which plugin I should utilize to properly roll up files like this?

Below are the plugins currently included in my rollupPlugins array:

const rollupPlugins = [
  nodeResolve({
    extensions: ['.js'],
    preferBuiltins: false
  }),
  json(),
  VuePlugin(),
  buble({
    objectAssign: 'Object.assign'
  })
]

vue.js webpack rollup rollupjs quasar-framework

Answer 1

Answer №1

In my case, the root cause of the issue was located deeper within the output. I discovered that Buble was struggling to process a specific section of my code (a for loop). After rewriting it, the error disappeared.

Here is an example of the modification I made:

for (const [key, value] of Object.entries(obj)) {
    console.log(key, value);
}

Changed to:

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

Answer 2

In my case, the root cause of the issue was located deeper within the output. I discovered that Buble was struggling to process a specific section of my code (a for loop). After rewriting it, the error disappeared.

Here is an example of the modification I made:

for (const [key, value] of Object.entries(obj)) {
    console.log(key, value);
}

Changed to:

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

What is the best way to bundle a .js file containing code with the export default syntax?

Answer №1

Similar questions

Display JSON data using Vue.js

Utilize axios-cache-interceptor to enforce caching of responses from axios

Implement a formatter function to manipulate the JSON data retrieved from a REST API within the BootstrapVue framework

Integrating Firebase into Vue.js 2 application using Vue CLI with webpack configuration

Utilizing Vue3's draggable component to seamlessly incorporate items

Unable to locate the root element for mounting the component in Cypress with React

The instance is referencing the property or method "sendResetMail" during render, but it is not defined

Flying around in every essential element within a Vue template

Calculate the number of items displayed using v-for and a function in Vue

Decrease the length of a pre-authorized link

Add the search outcome to the input field in vue

What are effective solutions for addressing the CORS Policy issue in a Vue production build?

proper way to delete an event listener in vue 3

Troubleshooting issue with Chrome Vue devtools integration in WebStorm not functioning properly

Executing Function when Vue JS Input Loses Focus

By utilizing custom typeRoots while continuing to export these types alongside the entry point

Uncover the solution to eliminating webpack warnings associated with incorporating the winston logger by utilizing the ContextReplacementPlugin

Incorporating a JavaScript npm module within a TypeScript webpack application

Error message received when attempting to remove object in Laravel and Vue framework

Demonstrating reactivity: updating an array property based on a window event