Issue running with Nextjs

[deathemperor]

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

[loqusion]

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)