Nuxt.js: nuxt-edge latest crashes during build when used as express middleware

[pbastowski]

cmty.app is not available (crashes) and times out, so, I'm leaving the issue here

Problem:
Nuxt fails to compile code when run as express middleware.

What is expected:
That it compiles and runs the code as it used to with version 2.0.0-25564786.b4d81dc.

What does it do:
It fails to compile, please see error message below

I have been using nuxt-edge for several months, updating to the latest version as it becomes available, but the last few versions have brought in a bug. The last version that everything compiles with is 2.0.0-25564786.b4d81dc. If I install this version then without making any changes everything works again.

Environment:
macOS 10.13.6 High Sierra
Node 9.11.1
[email protected] (this version causes the problem)

Below is the error message I get when I run my express project with nuxt-edge as middleware:

ERROR in ../frontend/.nuxt/client.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Plugin 0 specified in "/Users/paul/dev/kpmg/SOFY2/frontend/node_modules/@nuxtjs/babel-preset-app/index.js" provided an invalid property of "default" (While processing preset: "/Users/paul/dev/kpmg/SOFY2/frontend/node_modules/@nuxtjs/babel-preset-app/index.js")
    at Plugin.init (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/plugin.js:131:13)
    at Function.normalisePlugin (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
    at /Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-loader/lib/index.js:50:20)
    at /Users/paul/dev/kpmg/SOFY2/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/paul/dev/kpmg/SOFY2/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:434:13)
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ../frontend/.nuxt/client.js main[1]

My setup:

server.js (my express app)

    require('../frontend/nuxt-start.js')(app).then(() => {
        app.listen(port);
    })

nuxt-start.js

const { Nuxt, Builder } = require('nuxt-edge')

// Import and Set Nuxt.js options
let config = require('./nuxt.config.js')
// config.dev = !(process.env.NODE_ENV === 'production')
config.dev =
    (process.env.NODE_ENV || process.env.ENV_CONTEXT || '').toLowerCase() !==
    'production'

module.exports = async function start(app) {
    // Init Nuxt.js
    const nuxt = new Nuxt(config)

    // Build only in dev mode
    if (config.dev) {
        const builder = new Builder(nuxt)
        await builder.build()
    }

    // Give nuxt middleware to express
    app.use(nuxt.render)
}

nuxt.config.js

var path = require('path')
const fs = require('fs')

// Find the "frontend" folder. It should be in the SOFY root folder
// during development or in the deployment folder in a production build.
var rootDir = './frontend'
rootDir = fs.existsSync(rootDir) ? rootDir : '../frontend'

module.exports = {
    rootDir: path.join(process.cwd(), rootDir),
    mode: 'spa',

    head: {
        titleTemplate: '%s | KPMG SOFY'
    },

    loading: {
        color: 'blue',
        failedColor: 'red',
        height: '2px'
    },

    modules: ['@nuxtjs/axios'],

    router: {
        middleware: []
    },

    plugins: [
        './plugins/polyfills.js',
        './plugins/helpers.js',
        './plugins/vuetify.js',
        './plugins/mini-toastr',
        './plugins/axios.js',
        './plugins/nuxt-client-init.js',
        './plugins/filters.js',
        './plugins/vuex-helpers.js'
    ],

    css: [
        'font-awesome/css/font-awesome.css',
        './assets/fonts/material-icons/material-icons.css',
        './assets/fonts/roboto/roboto.css',
        'vuetify/dist/vuetify.css',
        './src/app/main.scss',
        './src/app/vuetify-overrides.scss'
    ],

    build: {
        extend(config, { isClient }) {
            if (isClient) {
                config.devtool = '#eval-source-map'
            }

            config.resolve.alias['/components'] = path.resolve(
                __dirname,
                'src/common/components'
            )
            config.resolve.alias['/src'] = path.resolve(__dirname, 'src')
            config.resolve.alias['/assets'] = path.resolve(__dirname, 'assets')
            config.resolve.alias['/plugins'] = path.resolve(
                __dirname,
                'plugins'
            )
        }
    },

    axios: {
        port: 8080
    }
}

package.json

{
    "name": "nuxt",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "dev": "NODE_ENV=development nuxt",
        "prod": "NODE_ENV=production nuxt",
        "build": "NODE_ENV=production nuxt build"
    },
    "dependencies": {
        "babel-polyfill": "6.26.0",
        "bluebird": "3.5.1",
        "bootstrap": "4.1.2",
        "bootstrap-vue": "2.0.0-rc.11",
        "dayjs": "1.7.4",
        "detect-browser": "3.0.0",
        "es6-promise": "4.2.4",
        "font-awesome": "4.7.0",
        "mini-toastr": "0.8.1",
        "vue-codemirror": "4.0.5",
        "vue-draggable-resizable": "1.7.1",
        "vue-jstree": "2.1.6",
        "vuetify": "1.1.10"
    },
    "devDependencies": {
        "@nuxtjs/axios": "5.3.1",
        "@nuxtjs/proxy": "1.2.4",
        "node-sass": "4.9.2",
        "nuxt-edge": "2.0.0-25564786.b4d81dc",
        "sass-loader": "7.0.3",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2"
    }
}

_{This question is available on Nuxt community (#c7557)}

[clarkdo]

@patmood Could you provide a repo for this issue ?

[clarkdo]

Did you install babel locally ? Because I saw node_modules/babel-core is used in you stacktrace, but it should be @babel/core

[pbastowski]

You probably meant to ask me for the repo, right?
I could, but it's a bit complex to reproduce and much easier to show through screen share.
Is it possible to show you through a screen share?

[pbastowski]

I just updated my babel-polyfill to @babel/polyfill, but that did not make any difference

[clarkdo]

Could paste you package.json here ?

[pbastowski]

{
    "name": "nuxt",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "dev": "NODE_ENV=development nuxt",
        "prod": "NODE_ENV=production nuxt",
        "build": "NODE_ENV=production nuxt build"
    },
    "dependencies": {
        "@babel/polyfill": "^7.0.0-rc.1",
        "bluebird": "3.5.1",
        "bootstrap": "4.1.2",
        "bootstrap-vue": "2.0.0-rc.11",
        "dayjs": "1.7.4",
        "detect-browser": "3.0.0",
        "es6-promise": "4.2.4",
        "font-awesome": "4.7.0",
        "mini-toastr": "0.8.1",
        "vue-codemirror": "4.0.5",
        "vue-draggable-resizable": "1.7.1",
        "vue-jstree": "2.1.6",
        "vuetify": "1.1.10"
    },
    "devDependencies": {
        "@nuxtjs/axios": "5.3.1",
        "@nuxtjs/proxy": "1.2.4",
        "node-sass": "4.9.2",
        "nuxt-edge": "2.0.0-25564786.b4d81dc",
        "sass-loader": "7.0.3",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2"
    }
}

[pbastowski]

Also, the problem only manifests when I use nuxt as a middleware. That is, when I start my express app, which then adds nuxt as the last middleware.

If I do npx nuxt to run my nuxt app in it's folder then it runs, however, without the express server.

[clarkdo]

@pbastowski Can you try "nuxt-edge": "latest" ?

The version you're using 2.0.0-25564786.b4d81dc doesn't include babel7 change.

[pbastowski]

Still the same error.

[clarkdo]

So I may need the repository, just need a simple one which can reproduce your issue.

[pbastowski]

Ok, thanks for trying. I will prepare a repo.

[clarkdo]

I created a repo which is using your codes above and works fine. but I didn't have your plugins, so I supposed that issue may be due to your plugins.

[pbastowski]

Do you mean nuxt plugins?
Oops. Clicked the wrong button.

[clarkdo]

No, your local plugins, are them using import/export syntax?

plugins: [
        './plugins/polyfills.js',
        './plugins/helpers.js',
        './plugins/vuetify.js',
        './plugins/mini-toastr',
        './plugins/axios.js',
        './plugins/nuxt-client-init.js',
        './plugins/filters.js',
        './plugins/vuex-helpers.js'
    ],

[pbastowski]

yes
They are

[clarkdo]

Hmm, I'll wait your repo then

[pbastowski]

But, it works when I run "nuxt dev", but not with nuxt as middleware. Strange :)

[clarkdo]

@pbastowski Have you figured it out? If you finish the reproducible repos, just post here, I'll look into it tomorrow.

[pbastowski]

@clarkdo

I have found the problem. It's an ugly one and it's my fault. Let me explain what happened, because it may help others who encounter the same situation.

My folder structure looks like this (irrelevant folders and files omitted on purpose)

app
    frontend
        nuxt.config.js
        nuxt-start.js
        node_modules
            nuxt-edge (latest version)
    server
        server.js  (requires ../frontend/nuxt-start.js)
        node_modules

Or at least it was supposed to look like this. However, I found an extra node_modules in the app root.

app
    node_modules  (this should not be here)
        nuxt-edge (old version)
    frontend
        nuxt.config.js
        nuxt-start.js
        node_modules
            nuxt-edge (latest version)
    server
        server.js  (requires ../frontend/nuxt-start.js)
        node_modules

At some stage in the past 3 days I must have accidentally done npm i -DE nuxt-edge@latest in the app root, thinking I was in /frontend.

So, it appears that if you have such a situation, the nuxt-edge package from the app root node_modules folder will be used instead of the version in the /frontend folder. I would have expected the other way to be the case.

In addition to the above node module resolution problem, the root .gitignore explicitly mentions node_modules, to ensure that it is not committed by one of the team members by mistake. Thus, git never notified us that there was a new folder in the app root and I never noticed it.

So, a new lesson learned :)

Thanks for your help again and sorry for wasting your time.

[clarkdo]

Awesome, have a good night!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.