VueJS SFC (Single File Component) не будет компилироваться - PullRequest
Новая
       6

VueJS SFC (Single File Component) не будет компилироваться

0 голосов
/ 12 февраля 2019

Я получаю эту ошибку всякий раз, когда добавляю дополнительную строку html в html в моем SFC ~ home.vue.См. Ошибку ниже: 

> webpack --mode development

Hash: 1e4bd20702518101b259
Version: webpack 4.29.3
Time: 2565ms
Built at: 02/11/2019 10:53:45 PM
    Asset     Size  Chunks             Chunk Names
bundle.js  433 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 475 bytes {main} [built]
[./wwwroot/app.js] 211 bytes {main} [built]
[./wwwroot/routes.js] 194 bytes {main} [built]
    + 11 hidden modules

ERROR in ./wwwroot/components/home.vue?vue&type=template&id=f890ddf8& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./wwwroot/components/home.vue?vue&type=template&id=f890ddf8&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
RangeError: Invalid string length
    at repeat$1 (C:~Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4558:28)
    at Object.generateCodeFrame (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4540:52)
    at loaderContext.emitError.compiled.errors.map (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:64:34)
    at Array.map (<anonymous>)
    at Object.module.exports (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:63:25)
 @ ./wwwroot/components/home.vue?vue&type=template&id=f890ddf8& 1:0-202 1:0-202
 @ ./wwwroot/components/home.vue
 @ ./wwwroot/app.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! musterv3@1.0.0 serve: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the musterv3@1.0.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\~\AppData\Roaming\npm-cache\_logs\2019-02-11T21_53_45_974Z-debug.log

Это происходит только в том случае, если я добавлю дополнительную строку html в html в теге шаблона компонента.Вот код компонента home.vue

<template>
    <div class="container">
        <div class="banner row align-items-center">
            <div class="col-md-4 col-12">
                <h1 class="banner__header">Earn money on your spare rooms</h1>
                <p class="">Find out how much you could earn.</p>

                <div class="input-group mb-3 banner__calculator">
                    <input type="text" class="form-control" placeholder="Location" list="locations" aria-label="Location">

                    <button type="button" class="btn">GO</button>
                </div>
            </div>
            <div class="col-md-8 col-12 d-none d-sm-block text-center">
                <div class="banner__property">
                    <div class="banner__property__info">
                        <p>NGN 250,000/Year</p>
                        <p>Tayo's Apartment, Yaba, Lagos</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data : function() {
            return { message: 'Hello World' };
        }
    }
</script>

Если я добавлю дополнительную строку в код шаблона, я получу сообщение об ошибке.

Может кто-нибудь объяснить это?Имейте в виду, что я использую webpack и vue-loader.

Полный журнал 

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'serve' ]
2 info using npm@6.4.1
3 info using node@v10.13.0
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle musterv3@1.0.0~preserve: musterv3@1.0.0
6 info lifecycle musterv3@1.0.0~serve: musterv3@1.0.0
7 verbose lifecycle musterv3@1.0.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle musterv3@1.0.0~serve: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster\node_modules\.bin;.\node_modules\.bin;C:\PROGRAM FILES (X86)\MICROSOFT VISUAL STUDIO\2017\COMMUNITY\COMMON7\IDE\EXTENSIONS\GITHUB\GITHUB\lib\win32\x86;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\nodejs\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin\;C:\WINDOWS\System32\OpenSSH\;C:\Users\Ugo Okoro\AppData\Local\Microsoft\WindowsApps;C:\Users\Ugo Okoro\AppData\Roaming\npm;C:\Users\Ugo Okoro\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Ugo Okoro\AppData\Local\Yarn\bin;C:\Users\Ugo Okoro\.dotnet\tools;C:\Users\Ugo Okoro\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\git
9 verbose lifecycle musterv3@1.0.0~serve: CWD: C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
10 silly lifecycle musterv3@1.0.0~serve: Args: [ '/d /s /c', 'webpack --mode development' ]
11 silly lifecycle musterv3@1.0.0~serve: Returned: code: 2  signal: null
12 info lifecycle musterv3@1.0.0~serve: Failed to exec serve script
13 verbose stack Error: musterv3@1.0.0 serve: `webpack --mode development`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid musterv3@1.0.0
15 verbose cwd C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
18 verbose node v10.13.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 2
22 error musterv3@1.0.0 serve: `webpack --mode development`
22 error Exit status 2
23 error Failed at the musterv3@1.0.0 serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Ответы [ 2 ]

0 голосов
/ 26 июля 2019

Ответы для людей, которые приходят сюда из Google (этот ответ является лучшим результатом этой ошибки).

Причиной этой ошибки было то, что у меня был только один корневой элемент в шаблоне, но он не закрыл тег должным образом (пропустил / в закрывающем теге).

0 голосов
/ 12 февраля 2019

Добавление любой другой строки кода (html) вне корневого элемента div в шаблоне стало причиной ошибки.Шаблон может иметь только один корневой элемент.

...