I have a Nuxt.js project to which I added just a few components for now. It runs flawlessly if build local. I wanted to test it on Heroku, however I get some webpack related build errors, in which I bury already 3 days.
remote: ERROR in ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue
remote: Module not found: Error: Can't resolve '../components/Sidebar/_Sidebar.vue' in '/tmp/build_fe4d2e874dff634cf8c7db3886460988/layouts'
remote: @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue 30:0-57
remote: @ ./layouts/default.vue
remote: @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
remote: @ ./.nuxt/App.vue
remote: @ ./.nuxt/index.js
remote: @ ./.nuxt/server.js
I've also installed a fresh copy the nuxtjs.org starter theme but there is no error. It builds like charm.
This is my package.json
{
"name": "some-nuxt",
"version": "0.3.0",
"description": "nuxt-sandbox ",
"private": true,
"dependencies": {
"axios": "^0.15.3",
"nuxt": "^0.9.9",
"vue-touch": "^2.0.0-beta.4"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"heroku-postbuild": "npm run build"
},
"devDependencies": {
"ava": "^0.18.2",
"babel-eslint": "^7.1.1",
"eslint": "^3.16.0",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-promise": "^3.4.2",
"eslint-plugin-standard": "^2.0.1",
"jsdom": "^9.11.0",
"node-sass": "^4.5.0",
"sass-lint": "^1.10.2",
"sass-loader": "^6.0.2"
}
}
This is some customisations from my nuxt.config.js file.
css: [
// '~assets/css/main.css',
{ src: '~assets/scss/app.scss', lang: 'sass' } // scss instead of sass
],
...
alias: {
'hammerjs$': 'vue-touch/dist/hammer-ssr.js'
},
build: {
/*
** Run ESLINT on save
*/
vendor: ['axios', 'vue-touch'],
extend (config, { isClient }) {
if (isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
plugins: ['~plugins/vue-touch']
}