Nuxt.js: Uglify error on build, but fine with dev?

[muhajirdev]

Hi guys,

I am sorry if this is duplicated or not. I tried to find another issue like this, but seems the issue is not the same or it just me who dont understand that.

Here's the repo https://github.com/muhajirframe/nuxt-openmultiurl

I got this error when i run yarn run dev

ERROR in 0.nuxt.bundle.a2aab161f7bb52fd8dfb.js from UglifyJs
Invalid assignment [./~/get-urls/index.js:5,0][0.nuxt.bundle.a2aab161f7bb52fd8dfb.js:800,29]

I did import get-urls at pages/index.vue. So i guess the problem was get-urls. And it depends on url-regex. So i try to use url-regex directly without get-urls. And then i got this error.

ERROR in 0.nuxt.bundle.d8de20ce0eb30c038791.js from UglifyJs
Unexpected token: operator (>) [./~/url-regex/index.js:5,0][0.nuxt.bundl
e.d8de20ce0eb30c038791.js:2990,23]

I guess the problem is that modules is written in es6. And it uses arrow function ( => ), The error said Unexpected operator (>) which is located at arrow function.

So how could be that modules transpiled with i am in development mode, and not transpiled in production.

Can anyone please help me?

_{This question is available on Nuxt.js community (#c793)}

[Atinux]

Hi @muhajirframe

By default, our babel-loader excludes node_modules/ folder so get-urls is not transpiled.

You can update the loader to tell it to transpile get-urls module (BTW, think to do yarn add get-urls, it's not in your package.json).

Add this to your nuxt.config.js:

{
...
  build: {
    extend: function (config) {
      const babelLoader = config.module.rules.find((rule) => rule.loader === 'babel-loader')
      babelLoader.exclude = /node_modules\/(?![get-urls])/
    }
  },
...
}

[muhajirdev]

Hi @atinux,
I tried your solution, but it seems something went wrong. Right after i implement your code. My page transition doesn't works anymore. I have tested with and without the snippet code above, page transition works well without that snippet and works not really well with that snippet. Perhaps something wrong ?
Here's my build config right now in nuxt.config.js .

...
build: {
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      const babelLoader = config.module.rules.find(
        rule => rule.loader === 'babel-loader'
      )
      babelLoader.exclude = /node_modules\/(?![get-urls])/
    }
  }

It makes me frustated :sob:

UPDATE

I recently found that it should be (get-urls) rather than [get-urls]. So for my case (get-urls|url-regex) as get-urls depends on url-regex

But i am struggle with another problem.
I got this error : cannot assign to read only property 'exports' of object '#<object>' showing on my page instead rendering the page.

At first load at '/' its fine, then i click another page, when i go back to '/'. It shows that error.

[pimlie]

For me the solution by @Atinux worked, I have a custom component that is using mixin parts from bootstrap-vue. Instead of importing the mixins I included parts of those mixins with a '...' operator which caused the build to fail.

methods: {
         ...clickOut.methods,
         etc
}

After updating the babelLoader.exclude to include bootstrap-vue it works for me. Maybe this 'trick' could be added to the docs somewhere?

[zhouyu1993]

nice

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.