i have a nuxt application which i need to deploy on heroku. locally everything works fine. when i install dependencies (locally) there are a lot of unmet dependencies but like i said it works perfectly even when i run build scripts. however when i push to heroku it says build succeded but the app does not work. then i tried building the app on heroku manually by using bash commands on heroku. when i run build script it fails to build with this error :
│ ✖ Nuxt Fatal Error │
Error: Cannot find module '@nuxt/typescript-build' │
│ Require stack: │
│ - /app/node_modules/@nuxt/core/dist/core.js │
│ - /app/node_modules/@nuxt/cli/dist/cli-index.js │
│ - /app/node_modules/@nuxt/cli/dist/cli.js │
│ - /app/node_modules/nuxt/bin/nuxt.js
when i checked '@nuxt/typescript-build' in package.json file it is mentionned under devDependencies (i ran yarn install before building app)
the contents of package.json as well as nuxt.config.js and Procfile are in the following gist
My nuxt.config.js
import colors from "vuetify/es5/util/colors";
import i18n from "./i18n";
export default {
mode: "spa",
/*
** Headers of the page
*/
head: {
titleTemplate: "%s - " process.env.npm_package_name,
title: process.env.npm_package_name || "",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{
hid: "description",
name: "description",
content: process.env.npm_package_description || "",
},
],
script: [{ src: "https://use.fontawesome.com/releases/v5.0.6/js/all.js" }],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Monoton&display=swap",
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material Icons",
},
],
},
server: {
host: "0.0.0.0", // default: localhost
},
env: {
BASE_URL: process.env.BASE_URL,
},
/*
** Customize the progress-bar color
*/
loading: { color: "#fff" },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: "~/plugins/vuex-persist", ssr: false },
"~/plugins/filters.js",
"~/plugins/vue-youtube.js",
"~/plugins/vue-shortkey.js",
"~/plugins/services.ts",
"~/plugins/color.ts",
"~/plugins/role.ts",
],
/*
** Nuxt.js modules
*/
modules: [
["nuxt-i18n", i18n],
"@nuxtjs/vuetify",
// Doc: https://axios.nuxtjs.org/usage
"@nuxtjs/axios",
"@nuxtjs/eslint-module",
],
buildModules: [
"@nuxt/typescript-build",
"@nuxtjs/composition-api/module",
[
"@nuxtjs/google-analytics",
{
id: process.env.GOOGLE_TRACKING_ID,
},
],
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: false,
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
theme: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
themes: {
dark: {
primary: "#21CFF3",
accent: "#FF4081",
secondary: "#ffe18d",
success: "#4CAF50",
info: "#2196F3",
warning: "#FB8C00",
error: "#FF5252",
},
light: {
primary: "#1976D2",
accent: "#e91e63",
secondary: "#30b1dc",
success: "#4CAF50",
info: "#2196F3",
warning: "#FB8C00",
error: "#FF5252",
},
},
},
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
publicPath: process.env.PUBLIC_PATH || "/_nuxt/",
extend(config, ctx) {
// config.module.rules.push({
// test: /\.(txt|csv|conll|jsonl)$/i,
// loader: 'file-loader',
// options: {
// name: '[path][name].[ext]'
// }
// })
config.module.rules.push({
enforce: "pre",
test: /\.(txt|csv|json|jsonl)$/,
loader: "raw-loader",
exclude: /(node_modules)/,
});
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
});
},
},
};
My package.json
{
"name": "doccano",
"version": "1.0.0",
"description": "doccano is an open source annotation tools for machine learning practitioner.",
"author": "Hironsan",
"private": true,
"scripts": {
"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore .",
"precommit": "yarn lint",
"test": "jest",
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.12.0",
"@nuxtjs/composition-api": "^0.23.4",
"@nuxtjs/proxy": "^2.0.1",
"@nuxtjs/vuetify": "^1.11.2",
"@toast-ui/vue-editor": "^1.1.1",
"@vuejs-community/vue-filter-date-format": "^1.6.3",
"@vuejs-community/vue-filter-date-parse": "^1.1.6",
"chart.js": "^2.9.3",
"codemirror": "^5.55.0",
"filepond": "^4.26.1",
"filepond-plugin-file-validate-type": "^1.2.6",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"nuxt": "^2.11.0",
"nuxt-i18n": "^6.13.12",
"papaparse": "^5.2.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.7",
"tui-editor": "^1.4.10",
"vue-chartjs": "^3.5.0",
"vue-filepond": "^6.0.0",
"vue-shortkey": "^3.1.7",
"vue-youtube": "^1.4.0",
"vuetify": "^2.3.4",
"vuex-persist": "^3.1.3",
"wavesurfer.js": "^5.0.1",
"yarn": "^1.22.4"
},
"devDependencies": {
"@nuxt/types": "^2.14.12",
"@nuxt/typescript-build": "^2.0.4",
"@nuxtjs/eslint-config": "^3.0.0",
"@nuxtjs/eslint-config-typescript": "^5.0.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/google-analytics": "^2.3.0",
"@nuxtjs/google-fonts": "^1.3.0",
"@types/lodash": "^4.14.168",
"@types/wavesurfer.js": "^5.0.1",
"@vue/test-utils": "^1.0.3",
"axios-mock-adapter": "^1.18.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"eslint": "^7.19.0",
"eslint-config-prettier": "^7.2.0",
"eslint-config-standard": ">=14.1.1",
"eslint-plugin-import": ">=2.22.0",
"eslint-plugin-jest": ">=23.18.0",
"eslint-plugin-node": ">=11.1.0",
"eslint-plugin-nuxt": "^1.0.0",
"eslint-plugin-promise": ">=4.0.1",
"eslint-plugin-standard": ">=4.0.1",
"eslint-plugin-vue": "^6.2.2",
"jest": "^26.1.0",
"nodemon": "^2.0.4",
"prettier": "^2.2.1",
"raw-loader": "^4.0.2",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.6"
}
}
CodePudding user response：
mode is obsolete as you can see here: https://nuxtjs.org/docs/configuration-glossary/configuration-mode#the-mode-property
I don't even know why I asked if you wanted a target: 'server' here since it's not even logic.
Since you want to have an SPA only (not the most beneficial with Nuxt tho), you should set the following in your nuxt.config.js file
ssr: false,
target: 'static',
Then, you can yarn generate and yarn start to double check that everything works locally. If it does, you can upload your generated dist directory on https://app.netlify.com/drop for debugging purposes.
If it works there (it should), you can then just plug some CI with a few clicks and it will enable you to simply push to your github repo for a new project generation!
CodePudding user response：
It was because of missing Vue module declaration, create vue-shim.d.ts file in the root directory and add the below content inside it
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
Reference documentation: https://typescript.nuxtjs.org/guide/setup.html
And as mentioned here: https://github.com/nuxt/typescript/issues/153#issuecomment-543010838