Brtdku

I am trying to run nuxt locally with https to test some geolocation stuff.
(https://nuxtjs.org/, https://nuxtjs.org/api/nuxt)

I was following this tutorial:
https://www.mattshull.com/blog/https-on-localhost

And then I found this:
https://github.com/nuxt/nuxt.js/issues/146

Both links seem to describe pretty nicely how to run nuxt with server.js programmatically.

The thing is that in my nuxt.config.js I seem to have some problems.
I get the following error when runnung yarn dev:

/Users/USER/Documents/github/mynuxtrepo/nuxt.config.js:2

import { module } from 'npmmodule'



> SyntaxError: Unexpected token {

In my nuxt config I import a custom helper to generate localized routes. Not really important what it does but obviously it can't handle the import syntax.
I assume that the node version does not understand.

So how can I get it to run? Do I have to require everything instead of importing?
Or is my assumption wrong and the cause lies somewhere totally different?

Thank you for your help
Cheers.

------
Edit 1:
My nuxt config looks like this:

// eslint-disable-next-line prettier/prettier

import { generateLocalizedRoutes, generateRoutesFromData } from 'vuecid-helpers'

import config from './config'



// TODO: Add your post types

const postTypes = [{ type: 'pages' }, { type: 'posts', paginated: true }]



// TODO: Add your site title

const siteTitle = 'Title'

const shortTitle = 'short title'

const siteDescription = 'Page demonstrated with a wonderful example'

const themeColor = '#ffffff'

// TODO: Replace favicon source file in /static/icon.png (512px x 512px)

// eslint-disable-next-line prettier/prettier

const iconSizes = [32, 57, 60, 72, 76, 144, 120, 144, 152, 167, 180, 192, 512]



module.exports = {

  mode: 'universal',

  /*

  ** Headers of the page

  */

  head: {

    title: 'Loading…',

    htmlAttrs: {

      lang: config.env.DEFAULTLANG,

      dir: 'ltr' // define directionality of text globally

    },

    meta: [

      { charset: 'utf-8' },

      { name: 'viewport', content: 'width=device-width, initial-scale=1' },



      // TODO: Check this info

      { name: 'author', content: 'Author' },

      { name: 'theme-color', content: themeColor },



      // TODO: Add or remove google-site-verification

      {

        name: 'google-site-verification',

        content: '...W1GdU'

      }

    ],

    link: 

  },



  /*

  ** env: lets you create environment variables that will be shared for the client and server-side.

  */

  env: config.env,



  /*

  ** Customize the progress-bar color

  ** TODO: Set your desired loading bar color

  */

  loading: { color: '#0000ff' },



  /*

  ** CSS

  */

  css: ['@/assets/css/main.scss'],



  /*

  ** Plugins

  */

  plugins: [

    { src: '~/plugins/global.js' },

    { src: '~/plugins/throwNuxtError.js' },

    { src: '~/plugins/axios' },

    { src: '~/plugins/whatinput.js', ssr: false },

    { src: '~/plugins/i18n.js', injectAs: 'i18n' },

    { src: '~/plugins/vuex-router-sync' },

    { src: '~/plugins/vue-bows' },

    { src: '~/plugins/vue-breakpoint-component', ssr: false }

  ],



  /*

  ** Modules

  */

  modules: [

    '@nuxtjs/axios',

    '@nuxtjs/sitemap',

    [

      '@nuxtjs/pwa',

      {

        icon: {

          sizes: iconSizes

        },

        // Override certain meta tags

        meta: {

          viewport: 'width=device-width, initial-scale=1',

          favicon: true // Generates only apple-touch-icon

        },

        manifest: {

          name: siteTitle,

          lang: config.env.DEFAULTLANG,

          dir: 'ltr',

          short_name: shortTitle,

          theme_color: themeColor,

          start_url: '/',

          display: 'standalone',

          background_color: '#fff',

          description: siteDescription

        }

      }

    ]

  ],



  /*

  ** Workbox config

  */

  workbox: {

    config: {

      debug: false,

      cacheId: siteTitle

    }

  },



  /*

  ** Axios config

  */

  axios: {

    baseURL: '/'

  },



  /*

  ** Generate

  */

  generate: {

    subFolders: true,

    routes: [

      ...generateRoutesFromData({

        langs: config.env.LANGS,

        postTypes: postTypes,

        dataPath: '../../../../../static/data',

        bundle: 'basic',

        homeSlug: config.env.HOMESLUG,

        errorPrefix: config.env.ERROR_PREFIX

      })

    ]

  },



  /*

  ** Build configuration

  */

  build: {

    extend(config, { isDev, isClient }) {

      /*

      ** Run ESLINT on save

      */

      if (isDev && isClient) {

        config.module.rules.push({

          enforce: 'pre',

          test: /.(js|vue)$/,

          loader: 'eslint-loader',

          exclude: /(node_modules)/

        })

      }

    }

  },



  /*

  ** Router

  */

  router: {

    linkActiveClass: 'is-active',

    linkExactActiveClass: 'is-active-exact',

    middleware: ['i18n'],

    extendRoutes(routes) {

      // extends basic routes (based on your files/folders in pages directory) with i18n locales (from our config.js)

      const newRoutes = generateLocalizedRoutes({

        baseRoutes: routes,

        defaultLang: config.env.DEFAULTLANG,

        langs: config.env.LANGS,

        routesAliases: config.routesAliases

      })



      // Clear array

      routes.splice(0, routes.length)



      // Push newly created routes

      routes.push(...newRoutes)

    }

  },



  /*

  ** Sitemap Configuration

  */

  sitemap: {

    path: '/sitemap.xml',

    hostname: config.env.FRONTENDURLPRODUCTION,

    cacheTime: 1000 * 60 * 15,

    generate: true,

    routes: [

      ...generateRoutesFromData({

        langs: config.env.LANGS,

        postTypes: postTypes,

        dataPath: '../../../../../static/data',

        bundle: 'basic',

        homeSlug: config.env.HOMESLUG,

        errorPrefix: config.env.ERROR_PREFIX

      })

    ]

  }

}

You can see that the generateLocalizedRoutes and the generateRoutesFromData methods are used to generate localized routes and is also taking post json files to generate routes from data (:slug).

--------- Edit 2:
I got it to run eventually.
I had to require all parts within the nuxt.config.js instead of importing them. I also resolved issues with the certificates. So I thought it was all cool 🚀.

BUT!!! 🚧:
Then I found out that I had my config file used within my post template.
So I thought I would also require the file within my template:
Like const config = require('~/config').
But then I would get this error:

[nuxt] Error while initializing app TypeError: ""exports" is read-only"

After some research, I found that is probably a thing when using common.js require and module.exports together with ES6 import/export within my project. (Probably linked to: https://github.com/FranckFreiburger/vue-pdf/issues/1).

So how could I still use my config.js when running nuxt programmatically (with require) and then also within my app?

I am glad to hear any ideas on this...
Cheers

Well, just to close this:
My problem resulted from running nuxt as a node app, which does not understand ES6 import statements, which appeared in my nuxt config.

So I had to rewrite things to work with commons.js (require).

This works for now.
(I also tried to run babel-node when starting the server.js, but had no success. Does not mean this did not work, I just wasn't keen on trying harder).

Thanks for the comments.
cheers