Nuxt.js: Nuxt is throwing `Uncaught ReferenceError: exports is not defined` on transpiling an es6 library

Created on 6 Nov 2019 · 7Comments · Source: nuxt/nuxt.js

Version

v2.10.2

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-typescript-ch8jz?fontsize=14

Steps to reproduce

Setup a Nuxt project.
Install and import the bip39 library.
Add the library to the transpile array in the build section of nuxt.config.js.

What is expected ?

For the library to transpile correctly

What is actually happening?

Uncaught ReferenceError: exports is not defined error is being thrown at Object.defineProperty(exports, "__esModule", { value: true });

_{This bug report is available on Nuxt community (#c9991)}

bug-report

Source

SDVII

Most helpful comment

@aldarund Thanks, managed to fix the issue. For those who encounter a similar problem, this is my implementation:

build: {
    babel: {
      sourceType: 'unambiguous',
      presets({ isServer }) {
        const targets = isServer ? { node: 'current' } : { ie: 11 };
        return [[require.resolve('@nuxt/babel-preset-app'), { targets }]];
      },
    },
    transpile: ['bip39'],
  },

SDVII on 11 Nov 2019

🚀1 ❤1

All 7 comments

Because its not es module but a commonjs.

aldarund on 9 Nov 2019

I think it is, due to the fact that it would throw a syntax error on IE when it's not transpiled.

I even contacted the developers of the package and they said that it requires transpiling in order to work on IE ( https://github.com/bitcoinjs/bip39/issues/127 ).

You can also check the package, there are arrow functions (IE usually breaks around there).

SDVII on 9 Nov 2019

see https://github.com/babel/babel/issues/9187

aldarund on 9 Nov 2019

I'll look into it, thanks for the reply.

SDVII on 9 Nov 2019

@aldarund Thanks, managed to fix the issue. For those who encounter a similar problem, this is my implementation:

build: {
    babel: {
      sourceType: 'unambiguous',
      presets({ isServer }) {
        const targets = isServer ? { node: 'current' } : { ie: 11 };
        return [[require.resolve('@nuxt/babel-preset-app'), { targets }]];
      },
    },
    transpile: ['bip39'],
  },

SDVII on 11 Nov 2019

🚀1 ❤1

@SDVII Thanks dude, you helped me a lot! I no longer knew what to do, deeply thankful.

gcarpi on 2 Jun 2020

👍1

The other two offending libs I encountered were vue-d3-charts and vue-luxon (leaving the names here for Google).

However, sourceType: 'unambiguous' alone was enough, fiddling with presets was not necessary. Nuxt defaults are current node for SSR and {ie: 9} for client-side build. Switching to IE11 I think only changes ES3 to ES5, which is not much difference anyway.