please help me I'd like to know why it doesn't work or if I'm doing it wrong.
I npm i mathlive to get input. And following the implementation of the nuxt plugins in the documentation doesn't work.
nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Nuxtnumer',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['./plugins/mathlive-vue.js'],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: '/',
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ['mathlive-vue']
},
}
file mathlive-vue.js in directory plugins
import Vue from 'vue';
import * as Mathlive from 'mathlive';
import Mathfield from 'mathlive/dist/vue-mathlive.mjs'
Vue.use(Mathlive,Mathfield)
Error:
ERROR Failed to compile with 1 errors friendly-errors 19:26:11
ERROR in ./node_modules/mathlive/dist/vue-mathlive.mjs friendly-errors 19:26:11
Module parse failed: Unexpected token (2:342) friendly-errors 19:26:11
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
| /** MathLive 0.69.11 */
I haven't used mathlive specifically, but I read your question and suspected that:
transpile: ['mathlive-vue']
Should be:
transpile: ['vue-mathlive']
becase the output complains about ./node_modules/mathlive/dist/vue-mathlive.mjs specifically.
I spun up a quick app and was able to recreate your error by copying your transpile config. Switching to vue-mathline resolved the error for me.
In case you (or anyone else who finds this question) are wondering what's going on- mathlive code uses ES modules, which cannot be executed in Node (the server side of your Nuxt app). Therefore you need to let Nuxt know that those files should be transpiled (made compatible with node) in order for them to work.