Nuxt 2.x：添加 babel 的转换插件，适用于导入的 node_module 文件

Question

How to add @babel/plugin-proposal-optional-chaining plugin to .nuxt.config that work for a file imported from node_modules (a one that not pre-build )

By this Example here I do:

export default {
  plugins: [
        '~/plugins/accesso.js' // that one make the trouble
  ],
  build: {
   babel: {
     plugins: [
        ['@babel/plugin-proposal-optional-chaining', {loose: true}]
     ]
   }
 }
}

// ~/plugins/accesso.js
import Accesso from '@perymimon/accesso'

export default function (ctx, inject) {
    inject('Accesso', accesso)
}

And it works fine for some foo?.bar in .vue files but not for files that come from node_module .

why?

The eror is reguar error from webpack

Module parse failed: Unexpected token (311:25)                                                                                                                                                 friendly-errors 14:39:06
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| function frame$extractPayload(frame, authSetting) {
>     let location = frame?.contentWindow?.location || frame.location;
|     const {protocol, host, pathname} = location;
|     const atHome = protocol + '//' + host + pathname === authSetting.redirect_uri;
                                                                                                                                                                                               friendly-errors 14:39:06
 @ ./node_modules/@perymimon/accesso/src/providers.js 1:0-37 3:0-29 3:0-29 8:22-29 34:23-30 51:22-29
 @ ./plugins/accesso.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=modern&path=/__webpack_hmr/modern ./.nuxt/client.js

Answer 1

I'm speculating that it may be that the dependencies in question are not already transpiled.

In vue.config.js you can specify an array of dependencies that should be transpiled by the project.

vue.config.js:

module.exports = {
  transpileDependencies: ['tomsNodeModule'],
}