Nuxtjs: Module parse failed: Unexpected character '@'

Question

I went from Windows to MacOS, downloaded one of the projects, and I have an error that I cannot fix. My other co-workers have macOS too, but I'm the only one with an M1.

2021-09-08 23:20:07 [log] [friendly-errors] 2021-09-08 23:20:07 [error] [friendly-errors] in ./pages/program/webhooks/add/index.vue?vue&type=script&lang=ts& 2021-09-08 23:20:07 [log] [friendly-errors] Module parse failed: Unexpected character '@' (13:0) File was processed with these loaders:

./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import NewBreadcrumb from '~/components/shared/NewBreadcrumb/index.vue'; | @Component({ | name: 'add-webhook', | components: { NewHeader, NewTabs, NewFormLabel, NewSelect, NewInput, NewBreadcrumb }, 2021-09-08 23:20:07 [log] [friendly-errors] @ ./pages/program/webhooks/add/index.vue?vue&type=script&lang=ts& 1:0-126 1:142-145 1:147-270 1:147-270 @ ./pages/program/webhooks/add/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

/* eslint-disable prefer-template */
import _ from 'lodash';
import { logHandler, setupLogging } from './tools/logger';
import config from './config';
import healthCheck from './tools/health-check';
import s3Images from './tools/s3-images';

require('dotenv').config();
require('events').EventEmitter.defaultMaxListeners = 50;

process.env.DEBUG = process.env.DEBUG || 'axios:err,nuxt_config,feature,client';
setupLogging();

export default () => {
let env = process.env.NUXT_ENV;
const build = process.env.npm_lifecycle_event === 'build';

if (!_.includes(['development', 'integration', 'test', 'staging', 'production'], env)) {
    if (build) {
        // env has no effect on build, but needed for valid config
        env = 'production';
    } else {
        throw new Error('NUXT_ENV not set properly');
    }
}

console.log(`NUXT_ENV ${env}`); // eslint-disable-line

return {
    /*
     ** Headers of the page
     */
    head: {
        title: 'p4management',
        meta: [
            { charset: 'utf-8' },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1',
            },
            {
                hid: 'description',
                name: 'description',
                content: 'frontend for managing and configuring p4m services',
            },
        ],
        link: [
            {
                rel: 'icon',
                type: 'image/x-icon',
                href: config.baseUrl + 'favicon.ico',
            },
        ],
        bodyAttrs: {
            class: '--nav-fixed',
        }
    },

    env: {
        release: process.env.RELEASE,
        environment: process.env.NUXT_ENV
    },

    /*
     ** Build configuration
     */
    buildModules: ['@nuxt/typescript-build'],
    build: {
        /*
         ** Run ESLint on save
         */
        extend(cfg, { isDev, isClient }) {
            if (isDev && isClient) {
                cfg.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue|ts)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/,
                });
            }
            // eslint-disable-next-line
            cfg.node = {
                fs: 'empty',
            };
        },
    },
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/auth',
        '@nuxtjs/toast',
        '@nuxtjs/style-resources',
        '@nuxtjs/sentry',
        '@nuxt/typescript-build',
        '@nuxtjs/device',
    ],
    axios: {
        proxy: true,
        prefix: config.baseUrl,
        https: true,
    },
    proxy: {
        // css files for Legacy Selfservice
        [config.baseUrl + 'pfm/selfservice/css/style.css']: {
            target: `http://localhost:3000${config.baseUrl}/legacy/pfm/style.css`,
            pathRewrite: { '.*': '' },
        },
        [config.baseUrl + 'ocm/selfservice/css/style.css']: {
            target: `http://localhost:3000${config.baseUrl}/legacy/ocm/style.css`,
            pathRewrite: { '.*': '' },
        },
        [config.baseUrl + 'nyo/selfservice/css/style.css']: {
            target: `http://localhost:3000${config.baseUrl}/legacy/pfm/style.css`,
            pathRewrite: { '.*': '' },
        },
        // S3 images
        // [config.baseUrl + 's3-images']: {
        //     target: `http://localhost:3000${config.baseUrl}/s3-images`,
        //     pathRewrite: { '^.*/': '/' },
        //     hostRewrite: true,
        // },
        // Legacy Selfservice
        [config.baseUrl + 'pfm/selfservice/']: {
            target: config.environment[env].legacySelfserviceUrl,
            pathRewrite: { '^.*/selfservice/': '/' },
            hostRewrite: true,
        },
        [config.baseUrl + 'ocm/selfservice/']: {
            target: config.environment[env].legacySelfserviceUrl.replace('//', '//ocm.'),
            pathRewrite: { '^.*/selfservice/': '/' },
            hostRewrite: true,
        },
        [config.baseUrl + 'nyo/selfservice/']: {
            target: config.environment[env].legacySelfserviceUrl.replace('//', '//nyo.'),
            pathRewrite: { '^.*/selfservice/': '/' },
            hostRewrite: true,
        },
        // Api's
        [config.baseUrl + 'api2/']: {
            target: config.environment[env].api2Url,
            pathRewrite: { '^.*/api2/': '/' },
        },
        [config.baseUrl + 'api/']: {
            target: config.environment[env].apiUrl,
            pathRewrite: { '^.*/api/': '/' },
        },
        [config.baseUrl + 'device-management/']: {
            target: config.environment[env].deviceApiUrl,
            pathRewrite: { '^.*/device-management/': '/' },
        },
        [config.baseUrl + 'device-managements/']: {
            target: config.environment[env].deviceApiUrl2,
            pathRewrite: { '^.*/device-managements/': '/' },
        },
        [config.baseUrl + 'bonscan-clarification/']: {
            target: config.environment[env].clarificationApiUrl,
            pathRewrite: { '^.*/bonscan-clarification/': '/' },
        },
        [config.baseUrl + 'webhooks/']: {
            target: config.environment[env].webhookApiUrl,
            pathRewrite: { '^.*/webhooks/': '/' },
        },
    },
    styleResources: {
        scss: ['~/assets/styles/globals.scss'],
    },
    auth: {
        plugins: ['./plugins/axios.js'],
        redirect: {
            login: '/login',
            logout: '/login',
            home: false,
        },
        strategies: {
            local: {
                _scheme: 'local',
                endpoints: {
                    login: {
                        url: '/api/auth-admin/login',
                        method: 'post',
                        propertyName: null,
                    },
                    logout: false,
                    user: false,
                },
                tokenRequired: true,
                tokenType: '',
            },
            local2: {
                _scheme: 'local',
                endpoints: {
                    login: {
                        url: '/api2/auth/login',
                        method: 'post',
                        propertyName: null,
                    },
                    logout: false,
                    user: false,
                },
                tokenRequired: true,
                tokenType: '',
            },
        },
    },
    toast: {
        position: 'top-right',
        duration: 2200,
        theme: 'toasted-primary',
    },
    sentry: {
        dsn: 'https://[email protected]/5240221',
        disabled: process.env.NUXT_ENV === 'development',
        publishRelease: ['staging', 'production'].includes(process.env.NUXT_ENV),
        config: {
            environment: process.env.NUXT_ENV,
        },
    },
    plugins: [
        './plugins/errorNotification.js',
        './plugins/directives.js',
        './plugins/feature.js',
        './plugins/filter.js',
        './plugins/font.js',
        './plugins/i18n.js',
        './plugins/lodash.js',
        './plugins/mixins.js',
        './plugins/nuxtClientInit.js',
        './plugins/validate.js',
        './plugins/vuikit.js',
        { src: './plugins/vue-tags-input.js', ssr: false },
        { src: './plugins/shortkey.js', ssr: false },
        { src: './plugins/photo-zoom-pro.js', ssr: false },
        { src: './plugins/quill.js', ssr: false },
    ],
    css: [
        '@fortawesome/fontawesome-svg-core/styles.css',
        '@vuikit/theme/dist/vuikit.css',
        '@voerro/vue-tagsinput/dist/style.css',
        'flatpickr/dist/flatpickr.min.css',
        'vue-multiselect/dist/vue-multiselect.min.css',
    ],
    /*
     ** Router config
     */
    router: {
        base: config.baseUrl,
        middleware: ['auth', 'checkRoles'],
    },
    serverMiddleware: [
        { path: '/health', handler: healthCheck },
        { path: '/log', handler: logHandler },
        { path: '/s3-images', handler: s3Images },
    ],
};
};

index.vue:

<template src="./index.html"></template>
<style scoped lang="scss" src="./styles.scss"></style>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { ActionConfigDTO, EventData } from '../interfaces.vue';
import NewHeader from '~/components/shared/NewHeader/index.vue';
import NewTabs from '~/components/shared/NewTabs/index.vue';
import NewFormLabel from '~/components/shared/NewFormLabel/index.vue';
import NewSelect, { SelectOption } from '~/components/shared/NewSelect/index.vue';
import NewInput from '~/components/shared/NewInput/index.vue';
import NewBreadcrumb from '~/components/shared/NewBreadcrumb/index.vue';

@Component({
    name: 'add-webhook',
    components: { NewHeader, NewTabs, NewFormLabel, NewSelect, NewInput, NewBreadcrumb },
    fetch: async ({ store }) => {
        try {
            await store.dispatch('webhook/fetchEventList', {});
        } catch (err) {
            store.dispatch('error', err);
        }
    },
})
export default class AddWebhook extends Vue {
    public actionConfig: ActionConfigDTO = { domainType: '', event: '', url: '' };
    public domainTypeList: SelectOption[] = this.getDomainTypeList();
    public eventList: SelectOption[] = [];
    public newHeaders: any = { key: null, value: null };

    public onCancel(): void {
        this.$router.push(`/program/webhooks`);
    }

    public async onSave(): Promise<void> {
        try {
            await this.$store.dispatch('webhook/addActionConfig', this.actionConfig);
            this.$toast.success(this.$t('program.webhooks.added') as string);
            this.$router.push(`/program/webhooks`);
        } catch (err) {
            this.$store.dispatch('error', err);
        }
    }

    public selectDomainType(domainType: string): void {
        this.actionConfig.domainType = domainType;
        this.eventList = this.getEventList(domainType);
    }

    public selectEvent(event: string): void {
        this.actionConfig.event = event;
    }

    public selectUrl(url: string): void {
        this.actionConfig.url = url;
    }

    public changeHeader(key: string, value: string): void {
        this.actionConfig.headers = { ...this.actionConfig.headers, [key]: value };
    }

    public changeNewHeadersValue(value: string){
        this.newHeaders.value = value;
    }

    public changeNewHeadersKey(key: string){
        this.newHeaders.key = key;
    }

    public addHeader(): void {
        this.actionConfig.headers = { ...this.actionConfig.headers, [this.newHeaders.key]: this.newHeaders.value };
        this.newHeaders = { key: null, value: null };
    }

    public removeHeader(key: string): void {
        Vue.delete(this.actionConfig.headers, key)
        this.$forceUpdate()
    }

    public isSaveDisabled(): boolean {
        return !this.actionConfig.domainType || !this.actionConfig.event || !this.actionConfig.url;
    }

    private getDomainTypeList(): SelectOption[] {
        return this.$store.state.webhook.eventList
            .map((event: EventData) => event.domainType)
            .filter((event: EventData, index: number, self: EventData[]) => self.indexOf(event) === index)
            .map((domainType: string) => ({ name: domainType, value: domainType }));
    }

    private getEventList(domainType: string): SelectOption[] {
        return this.$store.state.webhook.eventList
            .filter((event: EventData) => event.domainType === domainType)
            .map((event: EventData) => ({ name: event.name, value: event.name }));
    }
}
</script>

thidzz · Accepted Answer · 2021-09-09 13:25:22Z

0

It seems like an import error in ./pages/program/webhooks/add/index.vue Nuxt.config is not really useful to understand this case I guess

answered Sep 9, 2021 at 13:25

thidzz

3031 gold badge4 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastián Molinari Over a year ago

I have updated the post with my index.vue

Community Over a year ago

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution.

Collectives™ on Stack Overflow

Nuxtjs: Module parse failed: Unexpected character '@'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related