Transpiling dependencies produces a broken build or doesn't compile at all

mladekt

Hello,
as I’m using Quasar to develop for Cordova as well, one of the things I need to do is ensure the output runs on mobile / in an Android WebView.

One of the things that aren’t supported in the version I am targeting is arrow function syntax (() => {}), so until I upgraded to v1.0.*, I modified Webpack’s rules thusly:

      cfg.module.rules.splice(2, 0, {
        test: /\.(js)$/,
        use: [{
          loader: 'babel-loader',
          options: {
            plugins: [
              '@babel/transform-arrow-functions'
            ]
          }
        }]
      })

As of v1.0.0, however, including any babel-loader rule that affects all .js files in the webpack chain produces dozens of warnings and finally errors out with

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

A similar kind of behavior can be reproduced in a brand new v1.0.* Quasar project by using the transpileDependencies option to, what I thought is the new and more correct way of transpiling all dependencies:

// ...
build: {
  transpileDependencies: [/.*/],
// ...

Which errors out with:

ERROR in ./node_modules/@quasar/extras/roboto-font/roboto-font.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  TypeError: __webpack_require__(...) is not a function

So I conceded - alright, something has changed in v1 that doesn’t allow me to babelify the entire build as before, so I’ll go, seek out each individual offending library and add them separately. I added the transform-arrow-functions plugin to my babel.config.js, added the specific libraries to transpileDependencies which did prevent the syntax from appearing in the output, but also produced build warnings, as in the case of moment or vuex:

warning  in ./src/components/HumanDatePicker.vue?vue&type=script&lang=ts&

"export 'default' (imported as 'moment') was not found in 'moment'

 warning  in ./src/store/ui/ui.ts

"export 'getStoreAccessors' was not found in 'vuex-typescript'

And when I try to open the built app, I get a :

ReferenceError: exports is not defined

This seems to be related to this GitHub issue I found: https://github.com/webpack/webpack/issues/4039 where the maintainer states:

The code above is ok. You can mix require and export. You can’t mix import and module.exports.

Which seems to be one of the changes in Quasar v1 - quasar.conf.js and babel.config.js use module.exports whereas they used to contain an export default. I am, however, not sure how to continue from here.

I use TypeScript with Quasar, but seeing as I get similar behavior simply by putting in the transpileDependencies option like I said above, I think this might be a bug of Quasar.

So my question is:

Is there a way to run the entire build through babel, without having to hunt down specific libraries and hoping they don’t change and use unsupported syntax in the future?
How to fix the runtime errors if I specify the libraries and the build passes?

Thank you!

dennisrichter

I solved it by adding

plugins: ["@babel/plugin-transform-modules-commonjs"]

to babel.config.js

No More Posting New Topics!

Transpiling dependencies produces a broken build or doesn't compile at all