CODEWITHSUNDEEP
vue.jswebpacknuxt.jscode-splitting
Garine
Garine

Reputation: 604

Nuxt.js npm run build results in some JS files being not found

I have a Nuxt.js ^2.10.2 App.

When I do npm run dev, the project builds perfectly.

When I do npm run build then npm run start. some JS files are getting 404 error.

enter image description here

ERROR

Request URL: http://localhost:3000/_nuxt/vendors.pages/account.pages/ca.pages/cart.pages/category/_id/
index.pages/checkout/_step/index.pages/.f705ad4d.1-0-128.js
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

The file exists on my project in dist/_nuxt/vendor.pages/...... with the correct filename .f705ad4d.1-0-128.js

my nuxt.config.js 

build: {,
    filenames: {
        app: '[name].' + version + '.js',
        chunk: '[name].' + version + '.js',
        vendor: '[name].' + version + '.js',
        manifest: '[name].' + version + '.js',
    },
}

What am I doing wrong? As other files are loaded as normal.

Upvotes: 6

Views: 5483

Answers (1)

Garine
Garine

Reputation: 604

Found the answer. Files starting with . dont work. not sure how to fix it though

Temoporary Fix:

in my nuxt.config.js I added

build: {
 filenames: {
    app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
    chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
    css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
    img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]',
    font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]',
    video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]'
  }
}

REFERECE: https://nuxtjs.org/api/configuration-build/#filenames

or just this would work too

build: {
  filenames: {
    chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js'
  }
}

Upvotes: 8

Related Questions