0

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

import NuxtAutolink from 'nuxt_autolink';
export default {  
    components: {
      NuxtAutolink,
    },
  };

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

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

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

誰かわかるかたいらっしゃいますか??以下にそれぞれのファイルを載せておきます。全てのファイルを見たい方は、githubの方を見ていただければ、ご覧になれます。

package.json

{
  "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"
  }
}

./webpack.config.js

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/,
      },
    ],
  },
};

./dist/nuxtAutolink.min.js

/***/ (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(',');
    }
  }
});

./src/index.js

import NuxtAutolink from './NuxtAutolink.vue';

export default NuxtAutolink;

./src/NuxtAutolink.vue

<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>
1
  • 使ってみましたが、エラーは再現しませんでした。READMEがimport NuxtAutolink from 'nuxt-autolink'; になっていたので-_が間違っていないか確認してみてください。 2018年11月11日 11:07

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。