refactor(config): move build.crossorigin to render.crossorigin (#7187)

packages/config/src/config/build.js

@@ -5,7 +5,6 @@ export default () => ({
   analyze: false,
   profile: process.argv.includes('--profile'),
   extractCSS: false,
-  crossorigin: undefined,
   cssSourceMap: undefined,
   ssr: undefined,
   parallel: false,

packages/config/src/config/render.js

@@ -6,6 +6,7 @@ export default () => ({
     shouldPreload: (fileWithoutQuery, asType) => ['script', 'style'].includes(asType),
     runInNewContext: undefined
   },
+  crossorigin: undefined,
   resourceHints: true,
   ssr: undefined,
   ssrLog: undefined,

packages/config/src/options.js

@@ -419,6 +419,13 @@ export function getNuxtConfig (_options) {
     options.build.indicator = false
   }
 
+  // TODO: Remove this if statement in Nuxt 3
+  if (options.build.crossorigin) {
+    consola.warn('Using `build.crossorigin` is deprecated and will be removed in Nuxt 3. Please use `render.crossorigin` instead.')
+    options.render.crossorigin = options.build.crossorigin
+    delete options.build.crossorigin
+  }
+
   const { timing } = options.server
   if (timing) {
     options.server.timing = { total: true, ...timing }

packages/config/test/__snapshots__/options.test.js.snap

@@ -28,7 +28,6 @@ Object {
       "configFile": false,
     },
     "cache": false,
-    "crossorigin": undefined,
     "cssSourceMap": false,
     "devMiddleware": Object {},
     "extractCSS": false,
@@ -297,6 +296,7 @@ Object {
     "compressor": Object {
       "threshold": 0,
     },
+    "crossorigin": undefined,
     "csp": false,
     "dist": Object {
       "index": false,

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -15,7 +15,6 @@ Object {
       "configFile": false,
     },
     "cache": false,
-    "crossorigin": undefined,
     "cssSourceMap": undefined,
     "devMiddleware": Object {},
     "extractCSS": false,
@@ -269,6 +268,7 @@ Object {
     "compressor": Object {
       "threshold": 0,
     },
+    "crossorigin": undefined,
     "csp": false,
     "dist": Object {
       "index": false,
@@ -371,7 +371,6 @@ Object {
       "configFile": false,
     },
     "cache": false,
-    "crossorigin": undefined,
     "cssSourceMap": undefined,
     "devMiddleware": Object {},
     "extractCSS": false,
@@ -625,6 +624,7 @@ Object {
     "compressor": Object {
       "threshold": 0,
     },
+    "crossorigin": undefined,
     "csp": false,
     "dist": Object {
       "index": false,

packages/config/test/options.test.js

@@ -277,6 +277,11 @@ describe('config: options', () => {
       getNuxtConfig({ build: { extractCSS: { allChunks: true } } })
       expect(consola.warn).toHaveBeenCalledWith('build.extractCSS.allChunks has no effect from v2.0.0. Please use build.optimization.splitChunks settings instead.')
     })
+
+    test('should deprecate build.crossorigin', () => {
+      getNuxtConfig({ build: { crossorigin: 'use-credentials' } })
+      expect(consola.warn).toHaveBeenCalledWith('Using `build.crossorigin` is deprecated and will be removed in Nuxt 3. Please use `render.crossorigin` instead.')
+    })
   })
 })
 

packages/server/src/middleware/nuxt.js

@@ -112,7 +112,7 @@ const defaultPushAssets = (preloadFiles, shouldPush, publicPath, options) => {
       return
     }
 
-    const { crossorigin } = options.build
+    const { crossorigin } = options.render
     const cors = `${crossorigin ? ` crossorigin=${crossorigin};` : ''}`
     // `modulepreload` rel attribute only supports script-like `as` value
     // https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload

packages/server/test/middleware/nuxt.test.js

@@ -207,7 +207,7 @@ describe('server: nuxtMiddleware', () => {
     }
     context.renderRoute.mockReturnValue(result)
     context.options.dev = true
-    context.options.build.crossorigin = 'use-credentials'
+    context.options.render.crossorigin = 'use-credentials'
     context.options.render.http2 = {
       push: true,
       shouldPush: jest.fn((fileWithoutQuery, asType) => asType === 'script')

packages/vue-renderer/src/renderers/spa.js

@@ -112,7 +112,7 @@ export default class SPARenderer extends BaseRenderer {
 
       // Preload initial resources
       if (Array.isArray(manifest.initial)) {
-        const { crossorigin } = this.options.build
+        const { crossorigin } = this.options.render
         const cors = `${crossorigin ? ` crossorigin="${crossorigin}"` : ''}`
 
         meta.preloadFiles = manifest.initial

packages/vue-renderer/src/renderers/ssr.js

@@ -21,7 +21,7 @@ export default class SSRRenderer extends BaseRenderer {
 
   renderScripts (renderContext) {
     const scripts = renderContext.renderScripts()
-    const { build: { crossorigin } } = this.options
+    const { render: { crossorigin } } = this.options
     if (!crossorigin) {
       return scripts
     }
@@ -37,7 +37,7 @@ export default class SSRRenderer extends BaseRenderer {
 
   renderResourceHints (renderContext) {
     const resourceHints = renderContext.renderResourceHints()
-    const { build: { crossorigin } } = this.options
+    const { render: { crossorigin } } = this.options
     if (!crossorigin) {
       return resourceHints
     }

packages/webpack/src/config/client.js

@@ -95,7 +95,7 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
 
   plugins () {
     const plugins = super.plugins()
-    const { buildOptions, options: { appTemplatePath, buildDir, modern } } = this.buildContext
+    const { buildOptions, options: { appTemplatePath, buildDir, modern, render } } = this.buildContext
 
     // Generate output HTML for SSR
     if (buildOptions.ssr) {
@@ -150,9 +150,9 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
       }))
     }
 
-    if (buildOptions.crossorigin) {
+    if (render.crossorigin) {
       plugins.push(new CorsPlugin({
-        crossorigin: buildOptions.crossorigin
+        crossorigin: render.crossorigin
       }))
     }
 

test/fixtures/modern/nuxt.config.js

@@ -1,7 +1,6 @@
 export default {
   modern: true,
   build: {
-    crossorigin: 'use-credentials',
     filenames: {
       app: ({ isModern }) => {
         return `${isModern ? 'modern-' : ''}[name].js`
@@ -12,6 +11,7 @@ export default {
     }
   },
   render: {
+    crossorigin: 'use-credentials',
     http2: {
       push: true
     }