webpack にて package.json: Missing semicolon. が出てビルドできない時の対応

最終更新日:

webpack を使用していて、あるライブラリをインストールした時に下記エラーが出てビルドできなくなった。

$ webpack --mode=production

ERROR in ./node_modules/xxxxx/xxxxx/package.json
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path/to/your/project/app/node_modules/xxxxx/xxxxx/package.json: Missing semicolon. (2:8)

  1 | {
> 2 |   "name": "xxxxx/xxxxx",
    |         ^
  3 |   "version": "1.0.0",
  4 |   "description": "xxxxx",
  5 |   "main": "xxxxx.js",

インストールしたライブラリのコードを見てたら下記記述があった。

var package_info = require('./../package.json');

webpack はビルドする時に基本 xxxx-loader が必要で、
sass をビルドしたい時は sass-loader、
js をビルドしたい時は babel-loader、
TypeScript をビルドしたい時は ts-loader、
のような感じでそれぞれ用意する。

json-loader

$ npm install --save-dev json-loader

webpack.config.js

必要箇所だけ抜粋。
本家からほぼコピペ。
type: 'javascript/auto' を追加しないとビルドエラーが起きる。

module.exports = {
	...
	module: {
		rules: [
			...
			{
				test: /\.json$/,
				use: [{
					loader: 'json-loader',
				}],
				type: 'javascript/auto',
			},
			...
		],
	},
	...
}

type: 'javascript/auto' を記述してない場合

ビルドエラーが起きる。

$ webpack --mode=production

ERROR in ./node_modules/xxxxx/xxxxx/package.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {
 ...'
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/json-loader/index.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {
 ...'