Posted at

vueプロジェクトの`npm run build`がエラーになる


vue cli で作成したプロジェクトのbuildができない

2019/06/30 12時頃、vue createで作成したプロジェクトのnpm run buildコマンドができなくなった。

以下のようなエラーが発生。

$ npm run build


⠙ Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠸ Building for production...Unhandled rejection Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/user_name/spring-sec-sample-app/src/main/resources/client-app/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
...

エラーをみる限り、source mapの作成時にコケている?よう。


暫定対応1

そもそもビルド時に、source mapを作成しないようにする。

vueプロジェクトの設定は、vue.config.jsに書き込めば、vueがそのファイルを自動的に検知して読み込んでくれる。

デフォルトでは作成されないので、存在しない場合は自分で作成する。

階層はプロジェクトディレクトリのルートに配置する。

$ vi vue.config.js


./vue.config.js

module.exports = {

// other config
productionSourceMap: false
}

これでひとまず、エラーは回避できる。


暫定対応2

node modules の依存関係を自分で定義する。


package.json

{

"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.1.0",
"vue-router": "^3.0.3",
"terser": "4.0.0" // 追加
},
}

上記のように、terserのバージョンを4.0.0に指定する。


原因

vueプロジェクトはsource map作成時、内部的に依存しているterserというライブラリを利用している。

そのterserがv4.0.1を2019/06/30にリリースした模様。

https://www.npmjs.com/package/terser

そのv4.0.1でバグが紛れ込んだそうです。

issueが上がっていました。

https://github.com/terser-js/terser/issues/380

クライアントってモジュールの依存関係が複雑すぎて、こういう小さな変化がエラーを生み出すし、サーバに比べて極めて大変。。

依存する全てのモジュール理解している人とかいるのかな、、難しい。