19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webpackを使ってビルドするときにハマったことまとめ

Last updated at Posted at 2018-12-16

yarn initして、yarn addで諸々パッケージをインストールして、
さあいざ

$ ./node_modules/.bin/webpack-dev-server

と打ち込んでサーバーを起動させようとしたらエラーが。

簡素ですが、解決までの道のりをメモ_φ(・_・。

webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.```
→

```console
$ yarn add webpack-cli

で対処。

The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.```

起動時にmodeの指定をすることで回避

```console
$ ./node_modules/.bin/webpack-dev-server --mode development --open

しかし今度はこんなエラーが
SyntaxError: Unexpected token } in JSON at position

どうやらpackage.jsonの中に不要な文字列が混ざり込んでしまったらしい。エラー処理の過程でコピペしたところとかを消去して、すっきりさせたらこのエラーは消えた。

しかし、今度は

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'```

というエラーが。
babel-coreはインストール済みだったはずだが、再度

```console
$ yarn add babel-loader@7

今度は、

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/preset-env" relative to directory```

が、

```console
$ yarn add babel-preset-env

としても解決しない。

すったもんだの末に、

エラー解決を模索する過程で、
https://qiita.com/mimikun/items/860bad42c9b5bd10c7f4
https://www.valentinog.com/blog/webpack-tutorial/に従って、

.babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}

ファイルを作成していたけれど、その表記がまずかった模様。
取り急ぎ.babelrcファイルを削除したら無事コンパイルされた。
1時間くらい合計で処理にかかったかもしれない…

19
14
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?