OSS Gate Workshop: online: 2021-10-30: kaiyu-tech: Vue CLI: Work log #1492
Comments
|
Vue CLIをやってみようと思います。 上記ページのフッターに |
|
トップページに |
npm install -g @vue/cli
vue create my-project |
|
|
|
|
|
|
|
|
|
メッセージに以下のようにあるので、 作成したプロジェクトのディレクトリに移動して、 以下を実行してみる。 |
|
実行結果として以下のようにメッセージが出る。 |
上記についてのログも追加しました！ |
|
|
|
#1492 (comment) とあるのでとりあえず実行してみる。 |
|
|
|
念の為 |
|
|
|
@hata6502 の環境だとうまく動作したため、報告します。 環境
$ npm i -g @vue/cli
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
added 944 packages, and audited 945 packages in 41s
65 packages are looking for funding
run `npm fund` for details
23 vulnerabilities (4 moderate, 19 high)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
$ vue create my-project
Vue CLI v4.5.15
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: NPM
Vue CLI v4.5.15
✨ Creating project in /home/hata6502/test/my-project.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 1283 packages, and audited 1284 packages in 59s
83 packages are looking for funding
run `npm fund` for details
43 vulnerabilities (18 moderate, 25 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
🚀 Invoking generators...
📦 Installing additional dependencies...
added 49 packages, and audited 1333 packages in 4s
88 packages are looking for funding
run `npm fund` for details
45 vulnerabilities (20 moderate, 25 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project my-project.
👉 Get started with the following commands:
$ cd my-project
$ npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 1232ms 11:54:38
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.46:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
|
|
サポーターさんの環境では発生しないとアドバイスいただいたので、 |
|
|
|
エラーメッセージは同じ模様です。 kaiyu-techさんのエラーメッセージ : #1492 (comment) PRのエラーメッセージ : |
|
またMacOSを使用しています。 |
|
|
|
|
@kaiyu-tech
私がよくやるのは、以下です！
|
|
ふりかえり後の作業ですが、追記します。
|
|
すでに #1492 (comment) にかかれているアドバイスのとおりですが、エラーが起きたときにはまず公式リポジトリのIssueをエラーメッセージで検索するとよいです。
この人も npm run serve で起動したときに該当のエラーが発生しているようです。 |
|
調査に関する補足：
|
|
アドバイザーさんの環境と全く同じ環境（OS以外）にすることでエラーが出ないようになりました。 |
npm install -g @vue/cli
vue create my-project
cd my-project
# npm audit fix --force # <- ここでこれを行うことによりプロジェクトが破壊されるようである
npm run serve
|
|
ちなみに、 |
|
上記までがお昼後に行った作業です。 |
|
そこで、既に上がっているIssueをサポーターさんに確認していただいたところ、既にCloseしているとのことでした。 そこで現行の |
Bug：TypeError: eslint.CLIEngine is not a constructor
私はGetting Startedに従って、Vueプロジェクトの新規作成と実行を試みました。
npm install -g @vue/cli
vue create my-project
cd my-project
npm audit fix --force
npm run serve
$ npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 19:48:55
Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
TypeError: eslint.CLIEngine is not a constructor
at Object.module.exports (~/work/oss-gate/my-project/node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
Bug：TypeError: eslint.CLIEngine is not a constructor
npm install -g @vue/cli
vue create my-project
cd my-project
npm audit fix --force
npm run serve
$ npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 19:48:55
Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
TypeError: eslint.CLIEngine is not a constructor
at Object.module.exports (~/work/oss-gate/my-project/node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
|
|
v4でserveに失敗する問題については、eslintのバージョンの上限を依存関係で設定する解決策はどうか？（提案） |
また、 これらについても報告するか、原因を探るかが必要だと考えています。 |
|
英文、ほとんどOKだと思います。ちょっとだけ細かいところをコメントさせていただきます。
I got "TypeError: eslint.CLIEngine is not a constructor." で I got a の a は要らないですね。
この they が何なのか分かりませんでした。 |
あと、ここは I hope じゃなくて、Is is possible to backport that fix to v4? みたいな感じで普通に質問文にしたほうがいいんじゃないかなと思いました。 I hope だと何か言いっぱなしな感じなので。 |
|
さらに細かいことですが
〜のようだ It seems that がここでは使えますね。 |
|
@yuseitahara ご指摘の点を修正してみました、以下の文章で問題点は解消されたでしょうか？🙏 Bug：TypeError: eslint.CLIEngine is not a constructor
npm install -g @vue/cli
vue create my-project
cd my-project
npm audit fix --force
npm run serve
$ npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 19:48:55
Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
TypeError: eslint.CLIEngine is not a constructor
at Object.module.exports (~/work/oss-gate/my-project/node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
|
|
いいと思います。あとはこれをVueのイシューに投稿すれば、開発者の誰かが返事をくれると思います。 v5で修正済みの不具合をv4に移植するのがどのくらい手間のかかることなのか、v5のリリース予定はどうなっているのか、そのあたりの都合によってv4にもこの修正が来るかどうかが決まるだろうと思います。 あと、今気がつきましたが Bag は Bug(不具合) のことですよね。Bagだとかばんになってしまいます。 |
|
ご確認ありがとうございます！ また、Issueを投稿しようとしたら、Vue側が指定するフォーマットで作成するサイトに飛ばされたので少し整形し直して投稿しました。 以下が実際に投稿したIssueです。 仰られる通り実際に |
|
おつかれさまでした！ ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません 👌 ワークショップの感想を集めています！ ブログなどに書かれた際は、このページへリンクの追加をお願いします 🙏 またの参加をお待ちしています！ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a work log of a "OSS Gate workshop".
"OSS Gate workshop" is an activity to increase OSS developers.
Here's been discussed in Japanese. Thanks.
作業ログ作成時の説明
以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。
タイトル例↓：
OSS Gateワークショップ関連情報
The text was updated successfully, but these errors were encountered: