質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

0回答

2049閲覧

Vue単一ファイルコンポーネントbuild時にError: Parsing file 'import' and 'export' may only appear at the top levelが出る

mellan22

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/04/12 03:56

編集2022/01/12 10:55

前提・実現したいこと

困っていること
Vueの単一コンポーネントファイルをbuildしようとするとParsing fileエラーが出ます。
Error:Parsing file /Users/username/VSProject/travelplan/components/message.vue: 'import' and 'export' may only appear at the top level (7:0)

Babelがexportをうまく処理できていないように思うのですが、解決方法がわかりません。

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

エラーメッセージ

$ ./node_modules/.bin/gulp build [11:33:57] Using gulpfile ~/VSProject/travelplan/gulpfile.js [11:33:57] Starting 'build'... [11:33:57] Finished 'build' after 10 ms events.js:287 throw er; // Unhandled 'error' event ^ Error: Parsing file /Users/username/VSProject/travelplan/components/message.vue: 'import' and 'export' may only appear at the top level (7:0) at Deps.parseDeps (/Users/username/VSProject/travelplan/node_modules/module-deps/index.js:510:15) at getDeps (/Users/username/VSProject/travelplan/node_modules/module-deps/index.js:438:44) at /Users/username/VSProject/travelplan/node_modules/module-deps/index.js:421:38 at ConcatStream.<anonymous> (/Users/username/VSProject/travelplan/node_modules/concat-stream/index.js:37:43) at ConcatStream.emit (events.js:322:22) at ConcatStream.EventEmitter.emit (domain.js:505:15) at finishMaybe (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_writable.js:630:14) at endWritable (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_writable.js:638:3) at ConcatStream.Writable.end (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_writable.js:594:41) at DuplexWrapper.onend (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_readable.js:577:10)

該当のソースコード

message.vue

<template> <p>{{ message }}</p> </template> <script> export default { data() { return { message: "Hello!", }; }, }; </script>

main.js

var Vue = require("vue"); new Vue({ el: "#app", components: { MyMessage: require("./components/message.vue"), }, });

main.html

<html> <head> <title>test</title> </head> <body> <div id="app"> <my-message></my-message> </div> </body> </html>

package.json

{ "name": "travelplan", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "gulp build", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "***", "license": "ISC", "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.5", "babelify": "^10.0.0", "browserify": "^16.5.1", "gulp": "^4.0.2", "vinyl-source-stream": "^2.0.0", "vueify": "^9.4.1" }, "browser": { "vue": "vue/dist/vue.common.js" }, "browserify": { "transform": [ [ "babelify", { "presets": [ "@babel/preset-env" ] } ], "vueify" ] } }

試したこと

https://stackoverflow.com/questions/37902849/import-and-export-may-only-appear-at-the-top-level/45626246

こちらの質問が近いかと思ったのですが、Webpackでなくbrowserifyを用いている時の解決策がわかりませんでした。。
(babel-loaderの設定で治るとあったのでbabel-loader@8をインストールしてみましたがbabel-loaderにはwebpackが要ると言われてしまいました)

補足情報(FW/ツールのバージョンなど)

環境
mac OS Catalina
"browserify": "^16.5.1"
"gulp": "^4.0.2"
"babelify": "^10.0.0"
"vue": "^2.6.11"
"vueify": "^9.4.1"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問