Nuxt.js: [2.14.3] | "Module not found: Error: Can't resolve '..\assets ... in \node_modules\.cache\nuxt" - Error in generate for universal-static mode

[Ryoova]

Nuxt config :

export default {
  mode: 'universal',
  target: 'static',
  buildDir: 'app',
  globalName: 'application',
  server: {
    port: 3000, // default: 3000
    host: '0.0.0.0', // default: localhost,
    timing: false
  },
  build: {
    // analyze: true,
    publicPath: `/application/`,
    filenames: {
      app: 
        ({ isDev }) => isDev ? `[name].js` : `[name]-[hash:5].js`,
      chunk: 
        ({ isDev }) => isDev ? `[name].js` : `[name]-[hash:5].js`,
      css: 
        ({ isDev }) => isDev ? `[name].css` : `[name]-[contenthash:5].css`,
      img: 
        ({ isDev }) => isDev ? `img/[name].[ext]` : `img/[name].[ext]`,
      font: 
        ({ isDev }) => isDev ? `fonts/[name].[ext]` : `fonts/[name].[ext]`,
      video: 
        ({ isDev }) => isDev ? `videos/[name].[ext]` : `videos/[name].[ext]`
    }
  },
  head: {
    meta: [

      // Charset
      { charset: 'utf-8' },

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

    ],
    link: [
      { rel: 'preload', href: '/application/fonts/fa-brands-400.woff2', as: 'font', crossorigin: true },
      { rel: 'preload', href: '/application/fonts/fa-solid-900.woff2', as: 'font', crossorigin: true }
    ]
  },
  loading: false,
  css: [

    // Bootstrap custom variables
    '~/assets/sass/variables.sass',

    // Sass bootstrap modules
    '~/assets/sass/modules.sass',

    // Fontawesome
    "@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "@fortawesome/fontawesome-free/scss/brands.scss",
    "@fortawesome/fontawesome-free/scss/solid.scss",

    // Main Style Sheets file
    '~/assets/sass/main.sass',

  ],
  layoutTransition: 'OpacityTransition',
  plugins: [
    // Common plugins
    { src: '~/plugins/Firebase.js' },
    // Client plugins
    { src: '~/plugins/VuePortal.js', mode: 'client' },
    { src: '~/plugins/VueBootstrap.js', mode: 'client' },
    { src: '~/plugins/AwesomeSwiper.js', mode: 'client' },
    { src: '~/plugins/Anime.js', mode: 'client' },
    { src: '~/plugins/Howler.js', mode: 'client' },
    { src: '~/plugins/Vuelidate.js', mode: 'client' },
    { src: '~/plugins/VueDragScroll.js', mode: 'client' },
    { src: '~/plugins/ObserverVisibility.js', mode: 'client' },
  ],
  modules: [
    '@nuxtjs/style-resources',
    '@mole-inc/nuxt-optimized-images',
  ],
  optimizedImages: {
    inlineImageLimit: -1,
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    optimizeImages: true,
    optimizeImagesInDev: false,
    defaultImageLoader: 'img-loader',
    webp: { quality: 85, method: 6, }
  },
  styleResources: {
    sass: [  '~assets/sass/variables.sass' ]
  },
}

Console error

For each import what i have...

ERROR in ./node_modules/.cache/nuxt/App.js
Module not found: Error: Can't resolve '..\assets\sass\main.sass' in 'C:\Users\Ryova\Documents\Projects\AnodaraWorks\node_modules\.cache\nuxt'
 @ ./node_modules/.cache/nuxt/App.js 29:0-37
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/.cache/nuxt/client.js

Same problem for even either the default layout

ERROR in ./node_modules/.cache/nuxt/App.js
Module not found: Error: Can't resolve '..\layouts\default.vue' in 'C:\Users\Ryova\Documents\Projects\AnodaraWorks\node_modules\.cache\nuxt'
 @ ./node_modules/.cache/nuxt/App.js 30:0-49 32:32-41
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/.cache/nuxt/client.js

In "... .cache/nuxt/App.js"

Not completely sure, but this "imports" look slightly strange...

import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, urlJoin, sanitizeComponent } from './utils'

import '..\\assets\\sass\\variables.sass'

import '..\\assets\\sass\\modules.sass'

import '..\\node_modules\\@fortawesome\\fontawesome-free\\scss\\fontawesome.scss'

import '..\\node_modules\\@fortawesome\\fontawesome-free\\scss\\brands.scss'

import '..\\node_modules\\@fortawesome\\fontawesome-free\\scss\\solid.scss'

import '..\\assets\\sass\\main.sass'

import _6f6c098b from '..\\layouts\\default.vue'

const layouts = { "_default": sanitizeComponent(_6f6c098b) }

[farnabaz]

Could you provide content of ~/plugins/Firebase.js file?

[yvess]

I also have this problem, in my case I symlinked the node_modules folder to another place (in docker), that worked for nuxt dev and nuxt build but not for nuxt generate -t static. When I remove the symlink and add the node_modules folder as real files it works.

What also works and I'm using now, is when I put --modules-folder ../node_modules into .yarnrc and modulesDir: ['../node_modules'], to nuxt.config.js in the top level. The node_modules are at /opt/node_modues the nuxt app is at /opt/nuxt

[farnabaz]

Hey @yvess, Thank you for the answer :)
I wonder why you need to change node_modules location and move it outside of rootDir?

[yvess]

@farnabaz I like to bake my docker images with included node_modules. I then bind mount the app source code to /opt/nuxt so the node_modules can't be in the same folder. See https://github.com/taywa/docker-nuxt

[farnabaz]

I see, thank you for the explanation

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.