vuera
vuera copied to clipboard
Issue running with Nextjs
I got this error
[ error ] ./components/vue/MindMap.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div id="app">
| <mindmap
My babel.config.js
/*eslint-disable */
module.exports = {
presets: [
"next/babel",
[
"@emotion/babel-preset-css-prop",
{
autoLabel: true,
labelFormat: "[local]",
},
],
],
plugins: [
[
"import",
{
libraryName: "antd",
style: true,
},
],
"add-react-displayname",
"babel-plugin-import-graphql",
"vuera/babel",
],
};
I got the same error. Then I tried to add vue-loader
to my webpack config as follows (in next.config.js
):
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.vue$/,
loader: 'vue-loader',
});
config.plugins.push(new VueLoaderPlugin());
return config;
},
};
Unfortunately, this created a new issue:
Looking at the console error message, it seems that there is an issue with parsing vue-loader/lib/runtime/componentNormalizer.js
on line 7: export default function normalizeComponent (
. I'm guessing that it's not expecting ES6 syntax there.
Here's the console error message for reference:
nodeStackFrames.js:39 Uncaught at <unknown> (file://C:\Users\rasna\Projects\fc-next\node_modules\vue-loader\lib\runtime\componentNormalizer.js:7)
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:103:18)
at __webpack_require__ (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:23:31)
at Module../vendor/scutum/components/Input.vue (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:679:157)
at __webpack_require__ (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:23:31)
at Module../pages/index.tsx (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:382:93)
at __webpack_require__ (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:23:31)
at <unknown> (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:91:18)
at Object.<anonymous> (file://C:\Users\rasna\Projects\fc-next\.next\server\pages\index.js:94:10)
at Module._compile (internal/modules/cjs/loader.js:1015:30)