Nuxt.js の勉強していた時に最新のcreate-nuxt-app(v3.3.0)を使ってNuxtプロジェクトを作成した時にCan't create . because there's already a non-empty directory . existing in path.というエラーを踏んでしまったのでその時にどう対応したのかのメモをまとめておく．

前提

使用するファイルは以下になる．

# sample-nuxt/docker-compose.yml
version: "3"
services:
  frontend:
    build: ./frontend
    ports:
      - 8080:8080
    command: /bin/sh -c "yarn dev"
    volumes:
      - ./frontend:/app
      - frontend-node_modules:/app/node_modules
    environment:
      - HOST=0.0.0.0
      - PORT=8080
    tty: true
volumes:
  frontend-node_modules:

# sample-nuxt/frontend/Dockerfile
FROM node:12.9.0-alpine

ENV APP_HOME /app
ENV PATH ${APP_HOME}/node_modules/.bin:$PATH
ENV TZ Asia/Tokyo

ENV HOST 0.0.0.0
ENV PORT 8080

WORKDIR ${APP_HOME}
ADD . ${APP_HOME}

RUN apk update \
    && apk upgrade \
    && yarn install \
    && yarn global add create-nuxt-app \
    && rm -rf /var/cache/apk/*

EXPOSE ${PORT}

CMD ["yarn", "dev"]

rails new .(現在のディレクトリでRailsプロジェクトを作る)のような要領で現在のディレクトリでNuxtプロジェクトコードを作ろうとするとエラーになった．

$ pwd
sample-nuxt
$ docker-compose run --rm frontend yarn create nuxt-app .
yarn create v1.17.3
[1/4] Resolving packages...
⠠ color-name@1.1.3(node:1) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limi

・・・省略・・・

warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.17.3".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-nuxt-app@3.3.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.3.0
Can't create . because there's already a non-empty directory . existing in path.
Done in 16.75s.

原因

本家のリポジトリを見てみると，どうやらプロジェクトの作成する先のディレクトリが空ではない場合はエラーになる仕様のようだ．今回の場合，frontendディレクトリにDockerfileがあるからエラーになったと考えられる．

github.com

回避方法

仕様なので仕方ないため力技ではあるが，さらに新しくfrontendプロジェクトを作成し(つまりfrontend/frontendの中にNuxtプロジェクトが作られる状態になる)，その後でfrontend/直下にNuxtプロジェクトのファイル・ディレクトリを移動するようにする．

$ docker-compose run --rm frontend yarn create nuxt-app frontend
yarn create v1.17.3
[1/4] Resolving packages...
⠈ graceful-fs@^4.1.6(node:1) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
・・・省略・・・
create-nuxt-app v3.3.0
✨  Generating Nuxt.js project in frontend
? Project name: (frontend) 
・・・省略・・・
各設定を入力していく
# frontend直下にNuxtプロジェクトのファイル・ディレクトリを隠しファイル込みで移動する．
$ mv frontend/frontend/{*,.[^\.]*} frontend
# frontend/frontendは削除する
$ rm -r frontend/frontend
# node_modules内のパス等の情報を更新させるためにyarn installし直す
$ docker-compose run --rm --service-ports frontend yarn install

これで，docker-compose upすればNuxtプロジェクトが起動される．

まとめと所感

今回は create nuxt-app v3.3.0 でプロジェクトを作成する時に少し躓いたことについてまとめてみた．

前(今年の春頃)に使っていた create nuxt-app では現在のディレクトリにNuxtプロジェクトを作成することができていたように思えた(先程のプルリクエストも今年の7月にマージされたようなので...)が，Railsプロジェクトの作成方法とごっちゃに考えていたようにも思えるため混乱しないように気をつける．

docker-compose run --rm --service-ports frontend create-nuxt-app -hでヘルプを見てもそれらしい便利なオプションも見当たらないため，今後のアップデートに期待かなぁと思いながら作業を再開した．