自作vueコンポーネントをimportする際のエラー "export 'default' (imported as 'NuxtAutolink') was not found in 'nuxt_autolink'
自作した'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>