

自作した'nuxt_autolink'という.vueコンポーネントモジュールを、npm
publishして公開したのですが、nuxt.jsのプロジェクトで、node_moduleからインストールして以下のように、使用したところ、

[code]

    import NuxtAutolink from 'nuxt_autolink';
    export default {  
        components: {
          NuxtAutolink,
        },
      };
    
[/code]

nuxt.jsを、'npm run dev'で動かそうとすると、

**以下のエラーが出ました。**

[code]

    39:18-30 "export 'default' (imported as 'NuxtAutolink') was not found in 'nuxt_autolink'
    
[/code]

誰かわかるかたいらっしゃいますか？？以下にそれぞれのファイルを載せておきます。全てのファイルを見たい方は、[github](https://github.com/Yoshipe/nuxt-
autolink)の方を見ていただければ、ご覧になれます。

package.json

[code]

    {
      "name": "nuxt_autolink",
      "version": "0.0.1",
      "description": "change urls in a text to 'a tags' by render function.",
      "main": "./dist/nuxtAutolink.min.js",
      "private": false,
      "scripts": {
        "test": "./node_modules/karma/bin/karma start",
        "build": "rimraf ./dist && webpack --config ./webpack.config.js",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore . --fix"
      },
      "author": "ShogoYoshikawa",
      "license": "MIT",
      "dependencies": {
        "autoprefixer": "^7.1.4",
        "babel-core": "^6.26.0",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-loader": "^7.1.2",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-vue-jsx": "^3.5.1",
        "babel-preset-env": "^1.6.0",
        "clean-webpack-plugin": "^0.1.17",
        "cross-env": "^5.1.1",
        "css-loader": "^0.28.9",
        "path": "^0.12.7",
        "style-loader": "^0.18.2",
        "vue": "^2.5.13",
        "vue-loader": "^14.1.1",
        "vue-template-compiler": "^2.5.13",
        "webpack": "^3.10.0",
        "webpack-merge": "^4.1.0",
        "webpack-node-externals": "^1.6.0"
      },
      "homepage": "https://github.com/Yoshipe/nuxt-autolink",
      "devDependencies": {
        "babel-preset-stage-2": "^6.24.1",
        "jasmine-core": "^2.99.1",
        "karma": "^2.0.0",
        "karma-chrome-launcher": "^2.2.0",
        "karma-jasmine": "^1.1.1",
        "karma-webpack": "^2.0.9"
      }
    }
    
[/code]

./webpack.config.js

[code]

    module.exports = {
      entry: `${__dirname}/src/index.js`,
      output: {
        path: `${__dirname}/dist/`,
        filename: 'nuxtAutolink.min.js',
        libraryTarget: 'umd',
        library: 'nuxt_autolink',
        umdNamedDefine: true,
      },
    
      module: {
        rules: [
          {
            test: /\.vue$/,
            use: [{
              loader: 'vue-loader',
              options: {
                loaders: {
                  'js': 'babel-loader'
                },
              },
            }],
            exclude: /node_modules/,
          },
          {
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/,
          },
        ],
      },
    };
    
[/code]

./dist/nuxtAutolink.min.js

[code]

    /***/ (function(module, __webpack_exports__, __webpack_require__) {
    
    "use strict";
    
    var regex = /http(s?)(:\/\/[-_.!~*¥'()a-zA-Z0-9;\/?:¥@&=+¥$,%#]+)/g;
    /* harmony default export */ __webpack_exports__["a"] = ({
      props: {
        message: String
      },
      render: function render(h) {
        return h(
          "p",
          { style: "white-space:pre-wrap;" },
          [this.parseText().map(function (element) {
            if (element.match(regex)) {
              return h(
                "a",
                {
                  attrs: { href: element }
                },
                [element]
              );
            }
    
            return element;
          })]
        );
      },
    
    
      methods: {
        parseText: function parseText() {
          // 'http~' => ',http~,' put ',' at both ends of url
    
          var tmpText = this.message.replace(regex, function (text) {
            return "," + text + ",";
          });
    
          // split each sentence by ','
          return tmpText.split(',');
        }
      }
    });
    
[/code]

./src/index.js

[code]

    import NuxtAutolink from './NuxtAutolink.vue';
    
    export default NuxtAutolink;
    
[/code]

./src/NuxtAutolink.vue

[code]

    <script>
      const regex = /http(s?)(:\/\/[-_.!~*¥'()a-zA-Z0-9;\/?:¥@&=+¥$,%#]+)/g;
      export default {
        props: {
          message: String,
        },
        render(h) {
          return (
            <p style="white-space:pre-wrap;">
              {
                this.parseText().map((element) => {
                  if (element.match(regex)) {
                   return <a href={element}>{element}</a>;
                  }
    
                return element;
                })
              }
            </p>
          );
        },
    
        methods: {
          parseText() {
            // 'http~' => ',http~,' put ',' at both ends of url
    
            const tmpText = this.message.replace(regex, text => `,${text},`);
    
            // split each sentence by ','
            return tmpText.split(',');
          },
        },
      };
    </script>
    
[/code]


CC BY-SA 3.0
2018-02-10T17:18:17.047
41636
2018-09-28T22:33:23.660
2018-09-28T22:33:23.660
19110
27363
question
vue.js webpack nuxt.js babeljs
自作vueコンポーネントをimportする際のエラー "export 'default' (imported as 'NuxtAutolink') was not found in 'nuxt_autolink'