nuxt: nuxt-edge latest crashes during build when used as express middleware
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 nuxt-edge@2.0.0-25568071.0dff1b8 (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"
}
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 21 (10 by maintainers)
Commits related to this issue
- feat: upgrade to Babel 7 (#3667) — committed to nuxt/nuxt by clarkdo 6 years ago
@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)
Or at least it was supposed to look like this. However, I found an extra
node_modulesin the app root.At some stage in the past 3 days I must have accidentally done
npm i -DE nuxt-edge@latestin the app root, thinking I was in/frontend.So, it appears that if you have such a situation, the
nuxt-edgepackage from the app rootnode_modulesfolder will be used instead of the version in the/frontendfolder. I would have expected the other way to be the case.In addition to the above node module resolution problem, the root
.gitignoreexplicitly mentionsnode_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.