React.js/JSX・ElectronでWebアプリ　Webpack４でのビルドができない

前提・実現したいこと

プログラミング歴5ヶ月の初心者です。
本のコードを写経してReact/JSXとElectronを使ったWebアプリ作成の練習をしていますが、webpack4を使ったビルドができません。

2017/08発行の「いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニック」（クジラ飛行机　著）の第4章「Electronを使ってみよう」のコードを写経しています。

まず、フォルダ'electron_hello'を作成し、electron, react, react-dom, babel-core, babel-preset-es2015, babel-preset-reactをnpmでインストールしました。

です。
Electronでpackage.jsonを参照し、main.jsを実行します。outディレクトリにコンパイルされたファイルが出力されるようにしたいです。

発生している問題・エラーメッセージ

まず本のコードをそのまま写経して　npm rub build　でビルドをしたら以下のエラーが出ました。

npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 480 while parsing near '...bpack": "^4.2.0",
npm ERR! },
npm ERR! }
npm ERR! '
npm ERR! File: C:\Users\clalt\Desktop\electron_hello\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\clalt\AppData\Roaming\npm-cache_logs\2018-03-24T02_12_41_426Z-debug.log

そのときのコードは下記の通りです。
package.jsonのコード

{
"name": "electron_hello",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"electron": "^1.8.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^4.2.0",
},
}

index.htmlのコード

<!DOCTYPE html> <html><head> <meta charset="UTF-8" /> <title>Hello World!</title> </head><body> <div id = 'root'></div> <script src = 'out/index.js'></script> </body> </html>

const electron = require('electron')
const path = require('path')
const url = require('url')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow

app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})

main.jsのコード

function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
mainWindow.on('closed', function () {
mainWindow = null
})
}

index.jsのコード

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component{
render(){
return (<div>
<h1>Hello</h1>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
)

webpack.config.jsのコード

const path = require('path')
const webpack = require('webpack')

const externalPlugins = new webpack.ExternalsPlugin('commonjs', [
'app',
'auto-updater',
'browser-window',
'content-tracing',
'dialog',
'electron',
'global-shortcut',
'ipc',
'menu',
'menu-item',
'power-monitor',
'protocol',
'tray',
'remote',
'web-frame',
'clipboard',
'crash-reporter',
'screen',
'shell'
])

module.export = {
entry:{
index:path.join(__dirname, 'src', 'index.js')
},
output: {
path: path.join(__dirname, 'out'),
filename: '[name].js'
},
devtool: 'cheap-module-eval-source-map',
target: 'node',
module: {
rules:[
{
test: /.js$/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
]
},
plugins: [
externalPlugins
]
}

試したこと

新しいバージョンのwebpack4をインストールしていること、そして写経したコードはwebpack4に対応したコードではないことは分かりました。
そこで、こちらのページを参考にコードを書き換えました。

設定ファイル不要！webpack 4 でReactをビルドしてみた
https://qiita.com/shisama/items/730e7a2e6a3090a63a38

変更後のwebpack.config.jsのコード

const path = require('path')
const webpack = require('webpack')

module.export = {
mode: 'production',
entry: {
'index': [
path.resolve(__dirname, 'src/index.js')
]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public'),
publicPath: '/',
},
devtool: 'cheap-module-eval-source-map',
target: 'node',
module: {
rules: [
{
test: /.(js|jsx)$/,
use: 'babel-loader',
},
],
resolve: {
extensions: ['.js', '.jsx'],
}
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],

}

また、webpack-cliが必要ということも分かったので

npm install --save-dev webpack-cli

でインストールをしようとしました。

しかしここで
npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 480 while parsing near '...bpack": "^4.2.0",
npm ERR! },
npm ERR! }
npm ERR! '
npm ERR! File: C:\Users\clalt\Desktop\electron_hello\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\clalt\AppData\Roaming\npm-cache_logs\2018-03-24T12_27_15_877Z-debug.log

のエラーが出てしまい webpack-cli　がインストールできませんでした。
エラーの2,3行目はpackage.jsonのwebpackのバージョンを表している部分だとは思うのですが、ここからどの部分をどのように修正したらwebpack-cli　のインストールをしてビルドが出来るのでしょうか？

ご教示お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

package.jsonもJSONファイルですので、配列やオブジェクトの最後にコンマを入れてはいけません。

"webpack": "^4.2.0",の最後のコンマを消してください。

投稿2018/03/24 12:54

maisumakun

総合スコア145184

Y-A-A

2018/03/24 13:15

ありがとうございます。 package.jsonをご指摘の通り "webpack": "^4.2.0"に変えました。しかし先ほど同様 npm ERR! Failed to parse json npm ERR! Unexpected token } in JSON at position 484 while parsing near '...k": "^4.2.0" のエラーが出てしまいます。