"export 'default'('_vue_script__'로 표시됨)를 '!babel-default'에서 찾을 수 없습니다.

"export 'default'('_vue_script__'로 표시됨)를 '!babel-default'에서 찾을 수 없습니다.

Vue.js 2 프로젝트를 로드하면 콘솔에 이 오류 메시지가 나타납니다.

./src/components/UserSettings.vue
18:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./UserSettings.vue'

UserSettings.vue는 페이지이며, 필요한 것은 없습니다.export default =이 내용은 다음과 같습니다../src/components/UserSettings.vue

<template>
  <page-content page-title="My Settings">
    <div class="main-content">
        <md-headline>Notification Position</md-headline>
        <div class="row">
                        <div class="box">
                            <label :class="{'active' : position == 'top-left' }" for="position-top-left" class="tile"> <input v-model="position" id="position-top-left" value="top-left" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'top-center' }" for="position-top-center" class="tile"> <input v-model="position" id="position-top-center" value="top-center" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'top-right' }" for="position-top-right" class="tile"> <input v-model="position" id="position-top-right"  value="top-right" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'bottom-left' }" for="position-bottom-left" class="tile"> <input v-model="position" id="position-bottom-left"  value="bottom-left" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'bottom-center' }" for="position-bottom-center" class="tile"> <input v-model="position" id="position-bottom-center"  value="bottom-center" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'bottom-right' }" for="position-bottom-right" class="tile"> <input v-model="position" id="position-bottom-right" value="bottom-right" name="position" type="radio"/> </label>
                        </div>
                    </div>
    </div>
  </page-content>
</template>

<script>
import 'materialize-css/dist/css/materialize.min.css'
</script>
<style>
.box {
            width: 120px;
            margin-left: 20px;
        }

.tile {
    width: 31.5%;
    background: #9aeae3;
    height: 40px;
    border: 1px solid #26a69a;
    float: left;
    margin: 1px;
    cursor: pointer;
    border-radius: 1px;
}

.tile.active {
    background: #26a69a;
    border-color: #0d6f66;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
    padding: 1px 2em;
    border-radius: 6px;
    background: white;
}
</style>

이쪽은 제 담당자입니다webpack.config.js내용

var path = require('path')
const merge = require('webpack-merge');
const NpmInstallPlugin = require('npm-install-webpack2-plugin');
var webpack = require('webpack')
var ManifestPlugin = require('webpack-manifest-plugin')
var InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')

const common = {
    entry: './src/app.js',
    devServer: {
      hot: true,
      historyApiFallback: true,
      noInfo: true
    },
    performance: {
        hints: false
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /(\.css$)/,
        loaders: ['css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(woff|woff2|ttf|eot)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
    resolve : {
        alias: {
            'vue$': 'vue/dist/vue'
        }
    }
}
if(TARGET === "dev-server") {
    module.exports = merge(common, {
        devtool: 'cheap-module-eval-source-map',
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            stats: true,
            noInfo: true,
            quiet: true,

            stats: 'errors-only',
            host: process.env.HOST,
            disableHostCheck: true,
            port: 3000
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new NpmInstallPlugin({
                save: true // --save
            }),
        ]
    });
}

업데이트 1

이 에러는, 에러에 관련하고 있는 것 같습니다.less-loader부분.이 행을 코멘트 하면, 에러가 표시되지 않게 됩니다.하지만 프로젝트의 일부분은.less파일을 컴파일 할 수 없습니다.

 {
    test: /\.less$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "less-loader" // compiles Less to CSS
    }]
  },

모듈 내보내기 변경

if(TARGET === "dev-server") {
    module.exports = merge(common, {

로.

if(TARGET === "dev-server") {
    export default { merge(common, {

vue 파일에 'export default {}' 코드를 추가해야 합니다.이것은 vue가 필요하기 때문입니다.

언급URL : https://stackoverflow.com/questions/46934296/export-default-imported-as-vue-script-was-not-found-in-babel-loade