{{msg}}
", + selector: 'child-component', + template: '{{msg}}
', }) export class ChildComponent { @Input() msg!: string; diff --git a/system-tests/project-fixtures/angular/src/app/components/counter.component.ts b/system-tests/project-fixtures/angular/src/app/components/counter.component.ts index 591bbb7f838..9e387101465 100644 --- a/system-tests/project-fixtures/angular/src/app/components/counter.component.ts +++ b/system-tests/project-fixtures/angular/src/app/components/counter.component.ts @@ -1,8 +1,8 @@ -import { Component } from "@angular/core"; -import { CounterService } from "./counter.service"; +import { Component } from '@angular/core' +import { CounterService } from './counter.service' @Component({ - selector: "counter-component", + selector: 'counter-component', template: ``, @@ -10,9 +10,9 @@ import { CounterService } from "./counter.service"; export class CounterComponent { count$ = this.counterService.count$; - constructor(private counterService: CounterService) {} + constructor (private counterService: CounterService) {} - increment() { - this.counterService.increment(); + increment () { + this.counterService.increment() } } diff --git a/system-tests/project-fixtures/angular/src/app/components/counter.service.ts b/system-tests/project-fixtures/angular/src/app/components/counter.service.ts index d31ec512381..e7995dc742e 100644 --- a/system-tests/project-fixtures/angular/src/app/components/counter.service.ts +++ b/system-tests/project-fixtures/angular/src/app/components/counter.service.ts @@ -1,12 +1,12 @@ -import { Injectable } from "@angular/core"; -import { BehaviorSubject } from "rxjs"; +import { Injectable } from '@angular/core' +import { BehaviorSubject } from 'rxjs' @Injectable() export class CounterService { private count = new BehaviorSubject
@@ -10,11 +10,11 @@ import { Component, Input } from "@angular/core";
export class ErrorsComponent {
@Input() throwError!: boolean;
- syncError() {
+ syncError () {
throw new Error('sync error')
}
- asyncError() {
+ asyncError () {
setTimeout(() => {
throw new Error('async error')
})
diff --git a/system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts b/system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts
index 7335946fb3d..33473fb6964 100644
--- a/system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts
+++ b/system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
@Component({
selector: 'app-lifecycle',
- template: `
`
+ template: ``,
})
-export class LogoComponent {}
\ No newline at end of file
+export class LogoComponent {}
diff --git a/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts b/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts
index 4b5a5b83c94..961f119c32b 100644
--- a/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts
+++ b/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts
@@ -4,4 +4,4 @@ import { ChildComponent } from './child.component'
@NgModule({
declarations: [ParentComponent, ChildComponent],
-}) export class ParentChildModule {}
\ No newline at end of file
+}) export class ParentChildModule {}
diff --git a/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts b/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
index af031a21130..281c091c59b 100644
--- a/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
+++ b/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core'
@Component({
template: `
`
+ template: `
`,
})
-export class ProjectionComponent {}
\ No newline at end of file
+export class ProjectionComponent {}
diff --git a/system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts b/system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts
index 7fd84012c7b..aea95c441f4 100644
--- a/system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts
+++ b/system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts
@@ -1,7 +1,7 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- selector: "with-directives-component",
+ selector: 'with-directives-component',
template: `
Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }} and conditionalName: {{ conditionalName }}
` + template: `Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }} and conditionalName: {{ conditionalName }}
`, }) export class LifecycleComponent implements OnInit, OnChanges { @Input() name = '' @@ -10,14 +10,14 @@ export class LifecycleComponent implements OnInit, OnChanges { ngOnChangesFired = false conditionalName = false - ngOnInit(): void { + ngOnInit (): void { this.ngOnInitFired = true } - - ngOnChanges(changes: SimpleChanges): void { - this.ngOnChangesFired = true; + + ngOnChanges (changes: SimpleChanges): void { + this.ngOnChangesFired = true if (changes['name'].currentValue === 'CONDITIONAL NAME') { this.conditionalName = true } } -} \ No newline at end of file +} diff --git a/system-tests/project-fixtures/angular/src/app/components/logo.component.ts b/system-tests/project-fixtures/angular/src/app/components/logo.component.ts index b3b0fbbf476..8e8552378db 100644 --- a/system-tests/project-fixtures/angular/src/app/components/logo.component.ts +++ b/system-tests/project-fixtures/angular/src/app/components/logo.component.ts @@ -1,7 +1,7 @@ -import { Component } from "@angular/core"; +import { Component } from '@angular/core' @Component({ selector: 'app-logo', - template: ``
+ template: ``,
})
-export class LogoComponent {}
\ No newline at end of file
+export class LogoComponent {}
diff --git a/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts b/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts
index 4b5a5b83c94..961f119c32b 100644
--- a/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts
+++ b/system-tests/project-fixtures/angular/src/app/components/parent-child.module.ts
@@ -4,4 +4,4 @@ import { ChildComponent } from './child.component'
@NgModule({
declarations: [ParentComponent, ChildComponent],
-}) export class ParentChildModule {}
\ No newline at end of file
+}) export class ParentChildModule {}
diff --git a/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts b/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
index af031a21130..281c091c59b 100644
--- a/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
+++ b/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core'
@Component({
template: `
- {{ item }} @@ -10,5 +10,5 @@ import { Component } from "@angular/core"; export class WithDirectivesComponent { show = true; - items = ["breakfast", "lunch", "dinner"]; + items = ['breakfast', 'lunch', 'dinner']; } diff --git a/system-tests/project-fixtures/angular/src/app/errors.cy.ts b/system-tests/project-fixtures/angular/src/app/errors.cy.ts index d78728ae115..e54616ba0ad 100644 --- a/system-tests/project-fixtures/angular/src/app/errors.cy.ts +++ b/system-tests/project-fixtures/angular/src/app/errors.cy.ts @@ -1,7 +1,6 @@ import { ErrorsComponent } from './components/errors' describe('Errors', () => { - it('error on mount', () => { cy.mount(ErrorsComponent, { componentProperties: { throwError: true } }) }) @@ -20,4 +19,4 @@ describe('Errors', () => { cy.mount(ErrorsComponent) cy.get('element-that-does-not-exist') }) -}) \ No newline at end of file +}) diff --git a/system-tests/project-fixtures/angular/src/app/zonejs-mocha-only.cy.ts b/system-tests/project-fixtures/angular/src/app/zonejs-mocha-only.cy.ts index 76b26267d7f..92523ac4aeb 100644 --- a/system-tests/project-fixtures/angular/src/app/zonejs-mocha-only.cy.ts +++ b/system-tests/project-fixtures/angular/src/app/zonejs-mocha-only.cy.ts @@ -1,5 +1,4 @@ -import { AppComponent } from './app.component' - +/* eslint-disable mocha/no-exclusive-tests */ const ExcludedTestTitle = 'should not exist' // Validating Mocha syntax and behavior of *.only is still valid after being patched by `zone.js/testing` @@ -13,7 +12,7 @@ describe('only', () => { it(ExcludedTestTitle, () => {}) }) - + describe('describe', () => { describe.only('should exist on "describe"', () => { it('succeeds', () => {}) @@ -48,11 +47,11 @@ describe('only', () => { context.only('02 - validations', () => { const verifyNotPresent = (title: string) => { - cy.wrap(Cypress.$(window.top!.document.body)).within(() => - cy - .contains(title) - .should('not.exist') - ) + cy.wrap(Cypress.$(window.top!.document.body)).within(() => { + return cy + .contains(title) + .should('not.exist') + }) } describe('suite', () => { @@ -60,7 +59,7 @@ describe('only', () => { verifyNotPresent(ExcludedTestTitle) }) }) - + describe('describe', () => { it('should not include other test', () => { verifyNotPresent(ExcludedTestTitle) diff --git a/system-tests/project-fixtures/angular/src/app/zonejs-mocha-skip.cy.ts b/system-tests/project-fixtures/angular/src/app/zonejs-mocha-skip.cy.ts index a8a20bcae11..6ea03e53a0b 100644 --- a/system-tests/project-fixtures/angular/src/app/zonejs-mocha-skip.cy.ts +++ b/system-tests/project-fixtures/angular/src/app/zonejs-mocha-skip.cy.ts @@ -1,4 +1,4 @@ -import { AppComponent } from './app.component' +/* eslint-disable @cypress/dev/skip-comment */ // Validating Mocha syntax and behavior of *.skip is still valid after being patched by `zone.js/testing` // Github Issue: https://github.com/cypress-io/cypress/issues/23409 @@ -9,7 +9,7 @@ describe('skip', () => { it('skipped', () => {}) }) }) - + describe('describe', () => { describe.skip('should exist on "describe"', () => { it('skipped', () => {}) @@ -37,12 +37,12 @@ describe('skip', () => { context('02 - validations', () => { const verifyWasSkipped = (title: string) => { - cy.wrap(Cypress.$(window.top!.document.body)).within(() => - cy - .contains(title) - .parents('[data-model-state="pending"]') // Find parent row with class indicating test was skipped - .should('be.visible') - ) + cy.wrap(Cypress.$(window.top!.document.body)).within(() => { + return cy + .contains(title) + .parents('[data-model-state="pending"]') // Find parent row with class indicating test was skipped + .should('be.visible') + }) } describe('suite', () => { diff --git a/system-tests/project-fixtures/next/cypress/Errors.cy.jsx b/system-tests/project-fixtures/next/cypress/Errors.cy.jsx index 4815beead6a..80b824b9c20 100644 --- a/system-tests/project-fixtures/next/cypress/Errors.cy.jsx +++ b/system-tests/project-fixtures/next/cypress/Errors.cy.jsx @@ -1,28 +1,32 @@ import React from 'react' -import { mount } from "cypress/react" +import { mount } from 'cypress/react' describe('Errors', () => { - const Errors = (props) => { if (props.throwError) throw new Error('mount error') + return (
Hello World
} - diff --git a/system-tests/project-fixtures/react/src/Errors.cy.jsx b/system-tests/project-fixtures/react/src/Errors.cy.jsx index cfc17df6869..61e6e89e716 100644 --- a/system-tests/project-fixtures/react/src/Errors.cy.jsx +++ b/system-tests/project-fixtures/react/src/Errors.cy.jsx @@ -1,27 +1,31 @@ import React from 'react' describe('Errors', () => { - const Errors = (props) => { if (props.throwError) throw new Error('mount error') + return (Missing React
-} \ No newline at end of file +} diff --git a/system-tests/project-fixtures/react/src/Rerendering.cy.jsx b/system-tests/project-fixtures/react/src/Rerendering.cy.jsx index cbaaf04aba1..35095b2a52c 100644 --- a/system-tests/project-fixtures/react/src/Rerendering.cy.jsx +++ b/system-tests/project-fixtures/react/src/Rerendering.cy.jsx @@ -1,27 +1,28 @@ -import React from 'react'; +import React from 'react' function StatefulComponent ({ foo }) { - const [bar, setBar] = React.useState(0); + const [bar, setBar] = React.useState(0) + return ( - ); -}; + ) +} describe('re-render', () => { it('maintains component state across re-renders', () => { cy.mount(
diff --git a/system-tests/projects/nextjs-unconfigured/components/button.cy.jsx b/system-tests/projects/nextjs-unconfigured/components/button.cy.jsx
index 866b0253d46..7078df6ba3b 100644
--- a/system-tests/projects/nextjs-unconfigured/components/button.cy.jsx
+++ b/system-tests/projects/nextjs-unconfigured/components/button.cy.jsx
@@ -5,4 +5,4 @@ import { Button } from './button'
it('works', () => {
mount()
cy.get('button').contains('Hello World')
-})
\ No newline at end of file
+})
diff --git a/system-tests/projects/nextjs-unconfigured/components/button.jsx b/system-tests/projects/nextjs-unconfigured/components/button.jsx
index 3837ccb0c3c..06355e4d24f 100644
--- a/system-tests/projects/nextjs-unconfigured/components/button.jsx
+++ b/system-tests/projects/nextjs-unconfigured/components/button.jsx
@@ -4,4 +4,4 @@ export const Button = () => {
return (
)
-}
\ No newline at end of file
+}
diff --git a/system-tests/projects/nextjs-unconfigured/pages/_app.js b/system-tests/projects/nextjs-unconfigured/pages/_app.js
index 1e1cec92425..70177469016 100644
--- a/system-tests/projects/nextjs-unconfigured/pages/_app.js
+++ b/system-tests/projects/nextjs-unconfigured/pages/_app.js
@@ -1,6 +1,6 @@
import '../styles/globals.css'
-function MyApp({ Component, pageProps }) {
+function MyApp ({ Component, pageProps }) {
return
diff --git a/system-tests/projects/no-specs-custom-pattern/src/App.jsx b/system-tests/projects/no-specs-custom-pattern/src/App.jsx
index 73b5f1f3075..4d8241e7cdd 100644
--- a/system-tests/projects/no-specs-custom-pattern/src/App.jsx
+++ b/system-tests/projects/no-specs-custom-pattern/src/App.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
-function App() {
+function App () {
return (
,
- document.getElementById('root')
-);
+ document.getElementById('root'),
+)
diff --git a/system-tests/projects/no-specs-vue-2/babel.config.js b/system-tests/projects/no-specs-vue-2/babel.config.js
index e9558405fdc..df195386eb4 100644
--- a/system-tests/projects/no-specs-vue-2/babel.config.js
+++ b/system-tests/projects/no-specs-vue-2/babel.config.js
@@ -1,5 +1,5 @@
module.exports = {
presets: [
- '@vue/cli-plugin-babel/preset'
- ]
+ '@vue/cli-plugin-babel/preset',
+ ],
}
diff --git a/system-tests/projects/no-specs-vue-2/cypress-custom-spec-pattern.config.js b/system-tests/projects/no-specs-vue-2/cypress-custom-spec-pattern.config.js
index 5910e12bd83..68fe6801edf 100644
--- a/system-tests/projects/no-specs-vue-2/cypress-custom-spec-pattern.config.js
+++ b/system-tests/projects/no-specs-vue-2/cypress-custom-spec-pattern.config.js
@@ -3,7 +3,7 @@ module.exports = {
specPattern: 'src/specs-folder/*.cy.{js,jsx}',
devServer: {
framework: 'vue-cli',
- bundler: 'webpack'
- }
- }
+ bundler: 'webpack',
+ },
+ },
}
diff --git a/system-tests/projects/no-specs-vue-2/cypress/support/commands.js b/system-tests/projects/no-specs-vue-2/cypress/support/commands.js
index 66ea16ef0e3..119ab03f7cd 100644
--- a/system-tests/projects/no-specs-vue-2/cypress/support/commands.js
+++ b/system-tests/projects/no-specs-vue-2/cypress/support/commands.js
@@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/system-tests/projects/no-specs-vue-2/cypress/support/component.js b/system-tests/projects/no-specs-vue-2/cypress/support/component.js
index 53d9d15a20e..3d1a3d225bb 100644
--- a/system-tests/projects/no-specs-vue-2/cypress/support/component.js
+++ b/system-tests/projects/no-specs-vue-2/cypress/support/component.js
@@ -24,4 +24,4 @@ import { mount } from 'cypress/vue2'
Cypress.Commands.add('mount', mount)
// Example use:
-// cy.mount(MyComponent)
\ No newline at end of file
+// cy.mount(MyComponent)
diff --git a/system-tests/projects/no-specs-vue-2/src/main.js b/system-tests/projects/no-specs-vue-2/src/main.js
index 63eb05f711c..dd079f8d5bd 100644
--- a/system-tests/projects/no-specs-vue-2/src/main.js
+++ b/system-tests/projects/no-specs-vue-2/src/main.js
@@ -4,5 +4,5 @@ import App from './App.vue'
Vue.config.productionTip = false
new Vue({
- render: h => h(App),
+ render: (h) => h(App),
}).$mount('#app')
diff --git a/system-tests/projects/no-specs-vue-2/vue.config.js b/system-tests/projects/no-specs-vue-2/vue.config.js
index 910e297e0f5..9eec3d38120 100644
--- a/system-tests/projects/no-specs-vue-2/vue.config.js
+++ b/system-tests/projects/no-specs-vue-2/vue.config.js
@@ -1,4 +1,5 @@
const { defineConfig } = require('@vue/cli-service')
+
module.exports = defineConfig({
- transpileDependencies: true
+ transpileDependencies: true,
})
diff --git a/system-tests/projects/no-specs/src/App.jsx b/system-tests/projects/no-specs/src/App.jsx
index 73b5f1f3075..4d8241e7cdd 100644
--- a/system-tests/projects/no-specs/src/App.jsx
+++ b/system-tests/projects/no-specs/src/App.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
-function App() {
+function App () {
return (
,
- document.getElementById('root')
-);
+ document.getElementById('root'),
+)
diff --git a/system-tests/projects/nuxtjs-vue2-configured/components/Errors.cy.js b/system-tests/projects/nuxtjs-vue2-configured/components/Errors.cy.js
index bffd645a335..33cfc084730 100644
--- a/system-tests/projects/nuxtjs-vue2-configured/components/Errors.cy.js
+++ b/system-tests/projects/nuxtjs-vue2-configured/components/Errors.cy.js
@@ -2,12 +2,11 @@ import Errors from './Errors.vue'
import { mount } from 'cypress/vue2'
describe('Errors', () => {
-
it('error on mount', () => {
mount(Errors, {
propsData: {
- throwError: true
- }
+ throwError: true,
+ },
})
})
@@ -25,4 +24,4 @@ describe('Errors', () => {
mount(Errors)
cy.get('element-that-does-not-exist')
})
-})
\ No newline at end of file
+})
diff --git a/system-tests/projects/nuxtjs-vue2-configured/nuxt.config.js b/system-tests/projects/nuxtjs-vue2-configured/nuxt.config.js
index 7f5e556c55d..dc72b24d8e3 100644
--- a/system-tests/projects/nuxtjs-vue2-configured/nuxt.config.js
+++ b/system-tests/projects/nuxtjs-vue2-configured/nuxt.config.js
@@ -3,17 +3,17 @@ export default {
head: {
title: 'pristine-nuxtjs-vue2-configured',
htmlAttrs: {
- lang: 'en'
+ lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
- { name: 'format-detection', content: 'telephone=no' }
+ { name: 'format-detection', content: 'telephone=no' },
],
link: [
- { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
- ]
+ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+ ],
},
// Global CSS: https://go.nuxtjs.dev/config-css
diff --git a/system-tests/projects/nuxtjs-vue2-unconfigured/nuxt.config.js b/system-tests/projects/nuxtjs-vue2-unconfigured/nuxt.config.js
index 47fb153a413..dc72b24d8e3 100644
--- a/system-tests/projects/nuxtjs-vue2-unconfigured/nuxt.config.js
+++ b/system-tests/projects/nuxtjs-vue2-unconfigured/nuxt.config.js
@@ -3,17 +3,17 @@ export default {
head: {
title: 'pristine-nuxtjs-vue2-configured',
htmlAttrs: {
- lang: 'en'
+ lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
- { name: 'format-detection', content: 'telephone=no' }
+ { name: 'format-detection', content: 'telephone=no' },
],
link: [
- { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
- ]
+ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+ ],
},
// Global CSS: https://go.nuxtjs.dev/config-css
@@ -37,5 +37,5 @@ export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
- }
+ },
}
diff --git a/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/commands.js b/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/commands.js
index 66ea16ef0e3..119ab03f7cd 100644
--- a/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/commands.js
+++ b/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/commands.js
@@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/component.js b/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/component.js
index b091808fa5d..b234fad4473 100644
--- a/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/component.js
+++ b/system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/component.js
@@ -24,4 +24,4 @@ import { mount } from 'cypress/vue'
Cypress.Commands.add('mount', mount)
// Example use:
-// cy.mount(MyComponent)
\ No newline at end of file
+// cy.mount(MyComponent)
diff --git a/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/commands.js b/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/commands.js
index 66ea16ef0e3..119ab03f7cd 100644
--- a/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/commands.js
+++ b/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/commands.js
@@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/e2e.js b/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/e2e.js
index 0e7290a13d9..d1dd1353e81 100644
--- a/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/e2e.js
+++ b/system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/e2e.js
@@ -17,4 +17,4 @@
import './commands'
// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
+// require('./commands')
diff --git a/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/commands.js b/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/commands.js
index 66ea16ef0e3..119ab03f7cd 100644
--- a/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/commands.js
+++ b/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/commands.js
@@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/commands.js b/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/commands.js
index 66ea16ef0e3..119ab03f7cd 100644
--- a/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/commands.js
+++ b/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/commands.js
@@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/e2e.js b/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/e2e.js
index 0e7290a13d9..d1dd1353e81 100644
--- a/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/e2e.js
+++ b/system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/e2e.js
@@ -17,4 +17,4 @@
import './commands'
// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
+// require('./commands')
diff --git a/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/commands.js b/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/commands.js
index 66ea16ef0e3..119ab03f7cd 100644
--- a/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/commands.js
+++ b/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/commands.js
@@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/e2e.js b/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/e2e.js
index 0e7290a13d9..d1dd1353e81 100644
--- a/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/e2e.js
+++ b/system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/e2e.js
@@ -17,4 +17,4 @@
import './commands'
// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
+// require('./commands')
diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress.config.ts b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress.config.ts
index 1ed1cb32cc5..98ac4ce2cb2 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress.config.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress.config.ts
@@ -1,8 +1,8 @@
-import { defineConfig } from "cypress";
-import { devServer } from "@cypress/react/plugins/react-scripts";
+import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/react/plugins/react-scripts'
export default defineConfig({
component: {
devServer,
},
-});
\ No newline at end of file
+})
diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/commands.ts b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/commands.ts
index 698b01a42c3..95857aea4cd 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/commands.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/commands.ts
@@ -34,4 +34,4 @@
// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable
// }
// }
-// }
\ No newline at end of file
+// }
diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/component.ts b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/component.ts
index 3ed3a69c8d0..d7870eef01f 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/component.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/component.ts
@@ -17,4 +17,4 @@
import './commands'
// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
+// require('./commands')
diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress.config.ts b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress.config.ts
index 49022849bd6..97f16a11845 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress.config.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress.config.ts
@@ -1,10 +1,10 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
- framework: "create-react-app",
- bundler: "webpack",
+ framework: 'create-react-app',
+ bundler: 'webpack',
},
},
-});
\ No newline at end of file
+})
diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/commands.ts b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/commands.ts
index 698b01a42c3..95857aea4cd 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/commands.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/commands.ts
@@ -34,4 +34,4 @@
// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable
// }
// }
-// }
\ No newline at end of file
+// }
diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component.ts b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component.ts
index bd8ff0182df..697e105d1a3 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component.ts
@@ -36,4 +36,4 @@ declare global {
Cypress.Commands.add('mount', mount)
// Example use:
-// cy.mount(): Chainable
// }
// }
-// }
\ No newline at end of file
+// }
diff --git a/system-tests/projects/pristine/expected-cypress-ts-e2e/cypress/support/e2e.ts b/system-tests/projects/pristine/expected-cypress-ts-e2e/cypress/support/e2e.ts
index f80f74f8e1f..ed5730de114 100644
--- a/system-tests/projects/pristine/expected-cypress-ts-e2e/cypress/support/e2e.ts
+++ b/system-tests/projects/pristine/expected-cypress-ts-e2e/cypress/support/e2e.ts
@@ -17,4 +17,4 @@
import './commands'
// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
+// require('./commands')
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/env.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/env.js
index ffa7e496aac..f78bb1faef5 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/env.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/env.js
@@ -1,17 +1,18 @@
-'use strict';
+'use strict'
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
+const fs = require('fs')
+const path = require('path')
+const paths = require('./paths')
// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
+delete require.cache[require.resolve('./paths')]
+
+const NODE_ENV = process.env.NODE_ENV
-const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
- 'The NODE_ENV environment variable is required but was not specified.'
- );
+ 'The NODE_ENV environment variable is required but was not specified.',
+ )
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
@@ -23,22 +24,22 @@ const dotenvFiles = [
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
`${paths.dotenv}.${NODE_ENV}`,
paths.dotenv,
-].filter(Boolean);
+].filter(Boolean)
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
- })
- );
+ }),
+ )
}
-});
+})
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
@@ -49,56 +50,59 @@ dotenvFiles.forEach(dotenvFile => {
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
+const appDirectory = fs.realpathSync(process.cwd())
+
process.env.NODE_PATH = (process.env.NODE_PATH || '')
- .split(path.delimiter)
- .filter(folder => folder && !path.isAbsolute(folder))
- .map(folder => path.resolve(appDirectory, folder))
- .join(path.delimiter);
+.split(path.delimiter)
+.filter((folder) => folder && !path.isAbsolute(folder))
+.map((folder) => path.resolve(appDirectory, folder))
+.join(path.delimiter)
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
+const REACT_APP = /^REACT_APP_/i
-function getClientEnvironment(publicUrl) {
+function getClientEnvironment (publicUrl) {
const raw = Object.keys(process.env)
- .filter(key => REACT_APP.test(key))
- .reduce(
- (env, key) => {
- env[key] = process.env[key];
- return env;
- },
- {
- // Useful for determining whether we’re running in production mode.
- // Most importantly, it switches React into the correct mode.
- NODE_ENV: process.env.NODE_ENV || 'development',
- // Useful for resolving the correct path to static assets in `public`.
- // For example, 
.
- // This should only be used as an escape hatch. Normally you would put
- // images into the `src` and `import` them in code to get their paths.
- PUBLIC_URL: publicUrl,
- // We support configuring the sockjs pathname during development.
- // These settings let a developer run multiple simultaneous projects.
- // They are used as the connection `hostname`, `pathname` and `port`
- // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
- // and `sockPort` options in webpack-dev-server.
- WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
- WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
- WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
- // Whether or not react-refresh is enabled.
- // It is defined here so it is available in the webpackHotDevClient.
- FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
- }
- );
+ .filter((key) => REACT_APP.test(key))
+ .reduce(
+ (env, key) => {
+ env[key] = process.env[key]
+
+ return env
+ },
+ {
+ // Useful for determining whether we’re running in production mode.
+ // Most importantly, it switches React into the correct mode.
+ NODE_ENV: process.env.NODE_ENV || 'development',
+ // Useful for resolving the correct path to static assets in `public`.
+ // For example, .
+ // This should only be used as an escape hatch. Normally you would put
+ // images into the `src` and `import` them in code to get their paths.
+ PUBLIC_URL: publicUrl,
+ // We support configuring the sockjs pathname during development.
+ // These settings let a developer run multiple simultaneous projects.
+ // They are used as the connection `hostname`, `pathname` and `port`
+ // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+ // and `sockPort` options in webpack-dev-server.
+ WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+ WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+ WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+ // Whether or not react-refresh is enabled.
+ // It is defined here so it is available in the webpackHotDevClient.
+ FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+ },
+ )
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
- env[key] = JSON.stringify(raw[key]);
- return env;
+ env[key] = JSON.stringify(raw[key])
+
+ return env
}, {}),
- };
+ }
- return { raw, stringified };
+ return { raw, stringified }
}
-module.exports = getClientEnvironment;
+module.exports = getClientEnvironment
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/getHttpsConfig.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/getHttpsConfig.js
index 013d493c1bb..c83b9052a02 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/getHttpsConfig.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/getHttpsConfig.js
@@ -1,66 +1,70 @@
-'use strict';
+'use strict'
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
+const fs = require('fs')
+const path = require('path')
+const crypto = require('crypto')
+const chalk = require('react-dev-utils/chalk')
+const paths = require('./paths')
// Ensure the certificate and key provided are valid and if not
// throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
- let encrypted;
+function validateKeyAndCerts ({ cert, key, keyFile, crtFile }) {
+ let encrypted
+
try {
// publicEncrypt will throw an error with an invalid cert
- encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+ encrypted = crypto.publicEncrypt(cert, Buffer.from('test'))
} catch (err) {
throw new Error(
- `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
- );
+ `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`,
+ )
}
try {
// privateDecrypt will throw an error with an invalid key
- crypto.privateDecrypt(key, encrypted);
+ crypto.privateDecrypt(key, encrypted)
} catch (err) {
throw new Error(
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
err.message
- }`
- );
+ }`,
+ )
}
}
// Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
+function readEnvFile (file, type) {
if (!fs.existsSync(file)) {
throw new Error(
`You specified ${chalk.cyan(
- type
- )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
- );
+ type,
+ )} in your env, but the file "${chalk.yellow(file)}" can't be found.`,
+ )
}
- return fs.readFileSync(file);
+
+ return fs.readFileSync(file)
}
// Get the https config
// Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
- const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
- const isHttps = HTTPS === 'true';
+function getHttpsConfig () {
+ const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env
+ const isHttps = HTTPS === 'true'
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
- const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
- const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+ const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE)
+ const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE)
const config = {
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
- };
+ }
- validateKeyAndCerts({ ...config, keyFile, crtFile });
- return config;
+ validateKeyAndCerts({ ...config, keyFile, crtFile })
+
+ return config
}
- return isHttps;
+
+ return isHttps
}
-module.exports = getHttpsConfig;
+module.exports = getHttpsConfig
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/babelTransform.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/babelTransform.js
index 5b391e40556..00ac1b12880 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/babelTransform.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/babelTransform.js
@@ -1,19 +1,20 @@
-'use strict';
+'use strict'
-const babelJest = require('babel-jest').default;
+const babelJest = require('babel-jest').default
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
- return false;
+ return false
}
try {
- require.resolve('react/jsx-runtime');
- return true;
+ require.resolve('react/jsx-runtime')
+
+ return true
} catch (e) {
- return false;
+ return false
}
-})();
+})()
module.exports = babelJest.createTransformer({
presets: [
@@ -26,4 +27,4 @@ module.exports = babelJest.createTransformer({
],
babelrc: false,
configFile: false,
-});
+})
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/cssTransform.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/cssTransform.js
index 8f65114812a..b4e605c7c25 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/cssTransform.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/cssTransform.js
@@ -1,14 +1,14 @@
-'use strict';
+'use strict'
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
- process() {
- return 'module.exports = {};';
+ process () {
+ return 'module.exports = {};'
},
- getCacheKey() {
+ getCacheKey () {
// The output is always the same.
- return 'cssTransform';
+ return 'cssTransform'
},
-};
+}
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/fileTransform.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/fileTransform.js
index aab67618c38..3015d51f6c2 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/fileTransform.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/jest/fileTransform.js
@@ -1,22 +1,23 @@
-'use strict';
+'use strict'
-const path = require('path');
-const camelcase = require('camelcase');
+const path = require('path')
+const camelcase = require('camelcase')
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
- process(src, filename) {
- const assetFilename = JSON.stringify(path.basename(filename));
+ process (src, filename) {
+ const assetFilename = JSON.stringify(path.basename(filename))
if (filename.match(/\.svg$/)) {
// Based on how SVGR generates a component name:
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
const pascalCaseFilename = camelcase(path.parse(filename).name, {
pascalCase: true,
- });
- const componentName = `Svg${pascalCaseFilename}`;
+ })
+ const componentName = `Svg${pascalCaseFilename}`
+
return `const React = require('react');
module.exports = {
__esModule: true,
@@ -32,9 +33,9 @@ module.exports = {
})
};
}),
- };`;
+ };`
}
- return `module.exports = ${assetFilename};`;
+ return `module.exports = ${assetFilename};`
},
-};
+}
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/modules.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/modules.js
index d63e41d78dc..8d92bb2545f 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/modules.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/modules.js
@@ -1,34 +1,34 @@
-'use strict';
+'use strict'
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
+const fs = require('fs')
+const path = require('path')
+const paths = require('./paths')
+const chalk = require('react-dev-utils/chalk')
+const resolve = require('resolve')
/**
* Get additional module paths based on the baseUrl of a compilerOptions object.
*
* @param {Object} options
*/
-function getAdditionalModulePaths(options = {}) {
- const baseUrl = options.baseUrl;
+function getAdditionalModulePaths (options = {}) {
+ const baseUrl = options.baseUrl
if (!baseUrl) {
- return '';
+ return ''
}
- const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl)
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
// the default behavior.
if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
- return null;
+ return null
}
// Allow the user set the `baseUrl` to `appSrc`.
if (path.relative(paths.appSrc, baseUrlResolved) === '') {
- return [paths.appSrc];
+ return [paths.appSrc]
}
// If the path is equal to the root directory we ignore it here.
@@ -37,16 +37,16 @@ function getAdditionalModulePaths(options = {}) {
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
// an alias.
if (path.relative(paths.appPath, baseUrlResolved) === '') {
- return null;
+ return null
}
// Otherwise, throw an error.
throw new Error(
chalk.red.bold(
- "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
- ' Create React App does not support other values at this time.'
- )
- );
+ 'Your project\'s `baseUrl` can only be set to `src` or `node_modules`.' +
+ ' Create React App does not support other values at this time.',
+ ),
+ )
}
/**
@@ -54,19 +54,19 @@ function getAdditionalModulePaths(options = {}) {
*
* @param {*} options
*/
-function getWebpackAliases(options = {}) {
- const baseUrl = options.baseUrl;
+function getWebpackAliases (options = {}) {
+ const baseUrl = options.baseUrl
if (!baseUrl) {
- return {};
+ return {}
}
- const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl)
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
src: paths.appSrc,
- };
+ }
}
}
@@ -75,34 +75,34 @@ function getWebpackAliases(options = {}) {
*
* @param {*} options
*/
-function getJestAliases(options = {}) {
- const baseUrl = options.baseUrl;
+function getJestAliases (options = {}) {
+ const baseUrl = options.baseUrl
if (!baseUrl) {
- return {};
+ return {}
}
- const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl)
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
'^src/(.*)$': '/src/$1',
- };
+ }
}
}
-function getModules() {
+function getModules () {
// Check if TypeScript is setup
- const hasTsConfig = fs.existsSync(paths.appTsConfig);
- const hasJsConfig = fs.existsSync(paths.appJsConfig);
+ const hasTsConfig = fs.existsSync(paths.appTsConfig)
+ const hasJsConfig = fs.existsSync(paths.appJsConfig)
if (hasTsConfig && hasJsConfig) {
throw new Error(
- 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
- );
+ 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.',
+ )
}
- let config;
+ let config
// If there's a tsconfig.json we assume it's a
// TypeScript project and set up the config
@@ -110,25 +110,26 @@ function getModules() {
if (hasTsConfig) {
const ts = require(resolve.sync('typescript', {
basedir: paths.appNodeModules,
- }));
- config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+ }))
+
+ config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config
// Otherwise we'll check if there is jsconfig.json
// for non TS projects.
} else if (hasJsConfig) {
- config = require(paths.appJsConfig);
+ config = require(paths.appJsConfig)
}
- config = config || {};
- const options = config.compilerOptions || {};
+ config = config || {}
+ const options = config.compilerOptions || {}
- const additionalModulePaths = getAdditionalModulePaths(options);
+ const additionalModulePaths = getAdditionalModulePaths(options)
return {
- additionalModulePaths: additionalModulePaths,
+ additionalModulePaths,
webpackAliases: getWebpackAliases(options),
jestAliases: getJestAliases(options),
hasTsConfig,
- };
+ }
}
-module.exports = getModules();
+module.exports = getModules()
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/paths.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/paths.js
index f0a6cd9c986..f015ea63466 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/paths.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/paths.js
@@ -1,13 +1,13 @@
-'use strict';
+'use strict'
-const path = require('path');
-const fs = require('fs');
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+const path = require('path')
+const fs = require('fs')
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath')
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath)
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
@@ -18,10 +18,10 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
- process.env.PUBLIC_URL
-);
+ process.env.PUBLIC_URL,
+)
-const buildPath = process.env.BUILD_PATH || 'build';
+const buildPath = process.env.BUILD_PATH || 'build'
const moduleFileExtensions = [
'web.mjs',
@@ -35,20 +35,20 @@ const moduleFileExtensions = [
'json',
'web.jsx',
'jsx',
-];
+]
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
- const extension = moduleFileExtensions.find(extension =>
- fs.existsSync(resolveFn(`${filePath}.${extension}`))
- );
+ const extension = moduleFileExtensions.find((extension) => {
+ return fs.existsSync(resolveFn(`${filePath}.${extension}`))
+ })
if (extension) {
- return resolveFn(`${filePath}.${extension}`);
+ return resolveFn(`${filePath}.${extension}`)
}
- return resolveFn(`${filePath}.js`);
-};
+ return resolveFn(`${filePath}.js`)
+}
// config after eject: we're in ./config/
module.exports = {
@@ -70,8 +70,6 @@ module.exports = {
appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath,
-};
+}
-
-
-module.exports.moduleFileExtensions = moduleFileExtensions;
+module.exports.moduleFileExtensions = moduleFileExtensions
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/webpack/persistentCache/createEnvironmentHash.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/webpack/persistentCache/createEnvironmentHash.js
index 4487e853e18..901bfdfcab4 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/webpack/persistentCache/createEnvironmentHash.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/webpack/persistentCache/createEnvironmentHash.js
@@ -1,9 +1,10 @@
-'use strict';
-const { createHash } = require('crypto');
+'use strict'
+const { createHash } = require('crypto')
-module.exports = env => {
- const hash = createHash('md5');
- hash.update(JSON.stringify(env));
+module.exports = (env) => {
+ const hash = createHash('md5')
- return hash.digest('hex');
-};
+ hash.update(JSON.stringify(env))
+
+ return hash.digest('hex')
+}
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/config/webpackDevServer.config.js b/system-tests/projects/react-app-webpack-5-unconfigured/config/webpackDevServer.config.js
index 52f4edf36b9..0397e9d7f9e 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/config/webpackDevServer.config.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/config/webpackDevServer.config.js
@@ -1,21 +1,22 @@
-'use strict';
+'use strict'
-const fs = require('fs');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
-const paths = require('./paths');
-const getHttpsConfig = require('./getHttpsConfig');
+const fs = require('fs')
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware')
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware')
+const ignoredFiles = require('react-dev-utils/ignoredFiles')
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware')
+const paths = require('./paths')
+const getHttpsConfig = require('./getHttpsConfig')
-const host = process.env.HOST || '0.0.0.0';
-const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
-const sockPort = process.env.WDS_SOCKET_PORT;
+const host = process.env.HOST || '0.0.0.0'
+const sockHost = process.env.WDS_SOCKET_HOST
+const sockPath = process.env.WDS_SOCKET_PATH // default: '/ws'
+const sockPort = process.env.WDS_SOCKET_PORT
module.exports = function (proxy, allowedHost) {
const disableFirewall =
- !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+ !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true'
+
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
@@ -101,27 +102,27 @@ module.exports = function (proxy, allowedHost) {
},
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
proxy,
- onBeforeSetupMiddleware(devServer) {
+ onBeforeSetupMiddleware (devServer) {
// Keep `evalSourceMapMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
- devServer.app.use(evalSourceMapMiddleware(devServer));
+ devServer.app.use(evalSourceMapMiddleware(devServer))
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
- require(paths.proxySetup)(devServer.app);
+ require(paths.proxySetup)(devServer.app)
}
},
- onAfterSetupMiddleware(devServer) {
+ onAfterSetupMiddleware (devServer) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
- devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+ devServer.app.use(redirectServedPath(paths.publicUrlOrPath))
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
- devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+ devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath))
},
- };
-};
+ }
+}
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/scripts/build.js b/system-tests/projects/react-app-webpack-5-unconfigured/scripts/build.js
index 8a9acaaf70b..c0275bd9fd0 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/scripts/build.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/scripts/build.js
@@ -1,175 +1,188 @@
-'use strict';
+'use strict'
// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
+process.env.BABEL_ENV = 'production'
+process.env.NODE_ENV = 'production'
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
- throw err;
-});
+process.on('unhandledRejection', (err) => {
+ throw err
+})
// Ensure environment variables are read.
-require('../config/env');
-
-const path = require('path');
-const chalk = require('react-dev-utils/chalk');
-const fs = require('fs-extra');
-const bfj = require('bfj');
-const webpack = require('webpack');
-const configFactory = require('../config/webpack.config');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
+require('../config/env')
+
+const path = require('path')
+const chalk = require('react-dev-utils/chalk')
+const fs = require('fs-extra')
+const bfj = require('bfj')
+const webpack = require('webpack')
+const configFactory = require('../config/webpack.config')
+const paths = require('../config/paths')
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions')
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
+const printBuildError = require('react-dev-utils/printBuildError')
const measureFileSizesBeforeBuild =
- FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
+ FileSizeReporter.measureFileSizesBeforeBuild
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild
+const useYarn = fs.existsSync(paths.yarnLockFile)
// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024
-const isInteractive = process.stdout.isTTY;
+const isInteractive = process.stdout.isTTY
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
- process.exit(1);
+ process.exit(1)
}
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
+const argv = process.argv.slice(2)
+const writeStatsJson = argv.indexOf('--stats') !== -1
// Generate configuration
-const config = configFactory('production');
+const config = configFactory('production')
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
- .then(() => {
- // First, read the current file sizes in build directory.
- // This lets us display how much they changed later.
- return measureFileSizesBeforeBuild(paths.appBuild);
- })
- .then(previousFileSizes => {
- // Remove all content but keep the directory so that
- // if you're in it, you don't end up in Trash
- fs.emptyDirSync(paths.appBuild);
- // Merge with the public folder
- copyPublicFolder();
- // Start the webpack build
- return build(previousFileSizes);
- })
- .then(
- ({ stats, previousFileSizes, warnings }) => {
- if (warnings.length) {
- console.log(chalk.yellow('Compiled with warnings.\n'));
- console.log(warnings.join('\n\n'));
- console.log(
- '\nSearch for the ' +
- chalk.underline(chalk.yellow('keywords')) +
- ' to learn more about each warning.'
- );
- console.log(
- 'To ignore, add ' +
- chalk.cyan('// eslint-disable-next-line') +
- ' to the line before.\n'
- );
- } else {
- console.log(chalk.green('Compiled successfully.\n'));
- }
+const { checkBrowsers } = require('react-dev-utils/browsersHelper')
- console.log('File sizes after gzip:\n');
- printFileSizesAfterBuild(
- stats,
- previousFileSizes,
- paths.appBuild,
- WARN_AFTER_BUNDLE_GZIP_SIZE,
- WARN_AFTER_CHUNK_GZIP_SIZE
- );
- console.log();
-
- const appPackage = require(paths.appPackageJson);
- const publicUrl = paths.publicUrlOrPath;
- const publicPath = config.output.publicPath;
- const buildFolder = path.relative(process.cwd(), paths.appBuild);
- printHostingInstructions(
- appPackage,
- publicUrl,
- publicPath,
- buildFolder,
- useYarn
- );
- },
- err => {
- const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
- if (tscCompileOnError) {
- console.log(
- chalk.yellow(
- 'Compiled with the following type errors (you may want to check these before deploying your app):\n'
- )
- );
- printBuildError(err);
- } else {
- console.log(chalk.red('Failed to compile.\n'));
- printBuildError(err);
- process.exit(1);
- }
+checkBrowsers(paths.appPath, isInteractive)
+.then(() => {
+ // First, read the current file sizes in build directory.
+ // This lets us display how much they changed later.
+ return measureFileSizesBeforeBuild(paths.appBuild)
+})
+.then((previousFileSizes) => {
+ // Remove all content but keep the directory so that
+ // if you're in it, you don't end up in Trash
+ fs.emptyDirSync(paths.appBuild)
+ // Merge with the public folder
+ copyPublicFolder()
+
+ // Start the webpack build
+ return build(previousFileSizes)
+})
+.then(
+ ({ stats, previousFileSizes, warnings }) => {
+ if (warnings.length) {
+ console.log(chalk.yellow('Compiled with warnings.\n'))
+ console.log(warnings.join('\n\n'))
+ console.log(
+ `\nSearch for the ${
+ chalk.underline(chalk.yellow('keywords'))
+ } to learn more about each warning.`,
+ )
+
+ console.log(
+ `To ignore, add ${
+ chalk.cyan('// eslint-disable-next-line')
+ } to the line before.\n`,
+ )
+ } else {
+ console.log(chalk.green('Compiled successfully.\n'))
}
- )
- .catch(err => {
- if (err && err.message) {
- console.log(err.message);
+
+ console.log('File sizes after gzip:\n')
+ printFileSizesAfterBuild(
+ stats,
+ previousFileSizes,
+ paths.appBuild,
+ WARN_AFTER_BUNDLE_GZIP_SIZE,
+ WARN_AFTER_CHUNK_GZIP_SIZE,
+ )
+
+ console.log()
+
+ const appPackage = require(paths.appPackageJson)
+ const publicUrl = paths.publicUrlOrPath
+ const publicPath = config.output.publicPath
+ const buildFolder = path.relative(process.cwd(), paths.appBuild)
+
+ printHostingInstructions(
+ appPackage,
+ publicUrl,
+ publicPath,
+ buildFolder,
+ useYarn,
+ )
+ },
+ (err) => {
+ const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'
+
+ if (tscCompileOnError) {
+ console.log(
+ chalk.yellow(
+ 'Compiled with the following type errors (you may want to check these before deploying your app):\n',
+ ),
+ )
+
+ printBuildError(err)
+ } else {
+ console.log(chalk.red('Failed to compile.\n'))
+ printBuildError(err)
+ process.exit(1)
}
- process.exit(1);
- });
+ },
+)
+.catch((err) => {
+ if (err && err.message) {
+ console.log(err.message)
+ }
+
+ process.exit(1)
+})
// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
- console.log('Creating an optimized production build...');
+function build (previousFileSizes) {
+ console.log('Creating an optimized production build...')
+
+ const compiler = webpack(config)
- const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
- let messages;
+ let messages
+
if (err) {
if (!err.message) {
- return reject(err);
+ return reject(err)
}
- let errMessage = err.message;
+ let errMessage = err.message
// Add additional information for postcss errors
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
errMessage +=
- '\nCompileError: Begins at CSS selector ' +
- err['postcssNode'].selector;
+ `\nCompileError: Begins at CSS selector ${
+ err['postcssNode'].selector}`
}
messages = formatWebpackMessages({
errors: [errMessage],
warnings: [],
- });
+ })
} else {
messages = formatWebpackMessages(
- stats.toJson({ all: false, warnings: true, errors: true })
- );
+ stats.toJson({ all: false, warnings: true, errors: true }),
+ )
}
+
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
- messages.errors.length = 1;
+ messages.errors.length = 1
}
- return reject(new Error(messages.errors.join('\n\n')));
+
+ return reject(new Error(messages.errors.join('\n\n')))
}
+
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
@@ -178,16 +191,18 @@ function build(previousFileSizes) {
) {
// Ignore sourcemap warnings in CI builds. See #8227 for more info.
const filteredWarnings = messages.warnings.filter(
- w => !/Failed to parse source map/.test(w)
- );
+ (w) => !/Failed to parse source map/.test(w),
+ )
+
if (filteredWarnings.length) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
- 'Most CI servers set it automatically.\n'
- )
- );
- return reject(new Error(filteredWarnings.join('\n\n')));
+ 'Most CI servers set it automatically.\n',
+ ),
+ )
+
+ return reject(new Error(filteredWarnings.join('\n\n')))
}
}
@@ -195,23 +210,23 @@ function build(previousFileSizes) {
stats,
previousFileSizes,
warnings: messages.warnings,
- };
+ }
if (writeStatsJson) {
return bfj
- .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
- .then(() => resolve(resolveArgs))
- .catch(error => reject(new Error(error)));
+ .write(`${paths.appBuild }/bundle-stats.json`, stats.toJson())
+ .then(() => resolve(resolveArgs))
+ .catch((error) => reject(new Error(error)))
}
- return resolve(resolveArgs);
- });
- });
+ return resolve(resolveArgs)
+ })
+ })
}
-function copyPublicFolder() {
+function copyPublicFolder () {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
- filter: file => file !== paths.appHtml,
- });
+ filter: (file) => file !== paths.appHtml,
+ })
}
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/scripts/start.js b/system-tests/projects/react-app-webpack-5-unconfigured/scripts/start.js
index d1761e89e82..19d74fad7f7 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/scripts/start.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/scripts/start.js
@@ -1,154 +1,160 @@
-'use strict';
+'use strict'
// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'development'
+process.env.NODE_ENV = 'development'
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
- throw err;
-});
+process.on('unhandledRejection', (err) => {
+ throw err
+})
// Ensure environment variables are read.
-require('../config/env');
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+require('../config/env')
+
+const fs = require('fs')
+const chalk = require('react-dev-utils/chalk')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const clearConsole = require('react-dev-utils/clearConsole')
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
-
-const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
+} = require('react-dev-utils/WebpackDevServerUtils')
+const openBrowser = require('react-dev-utils/openBrowser')
+const semver = require('semver')
+const paths = require('../config/paths')
+const configFactory = require('../webpack.config')
+const createDevServerConfig = require('../config/webpackDevServer.config')
+const getClientEnvironment = require('../config/env')
+const react = require(require.resolve('react', { paths: [paths.appPath] }))
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1))
+const useYarn = fs.existsSync(paths.yarnLockFile)
+const isInteractive = process.stdout.isTTY
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
- process.exit(1);
+ process.exit(1)
}
// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
+const HOST = process.env.HOST || '0.0.0.0'
if (process.env.HOST) {
console.log(
chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow(
- chalk.bold(process.env.HOST)
- )}`
- )
- );
+ chalk.bold(process.env.HOST),
+ )}`,
+ ),
+ )
+
console.log(
- `If this was unintentional, check that you haven't mistakenly set it in your shell.`
- );
+ `If this was unintentional, check that you haven't mistakenly set it in your shell.`,
+ )
+
console.log(
- `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
- );
- console.log();
+ `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`,
+ )
+
+ console.log()
}
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper')
+
checkBrowsers(paths.appPath, isInteractive)
- .then(() => {
- // We attempt to use the default port but if it is busy, we offer the user to
- // run on a different port. `choosePort()` Promise resolves to the next free port.
- return choosePort(HOST, DEFAULT_PORT);
+.then(() => {
+ // We attempt to use the default port but if it is busy, we offer the user to
+ // run on a different port. `choosePort()` Promise resolves to the next free port.
+ return choosePort(HOST, DEFAULT_PORT)
+})
+.then((port) => {
+ if (port == null) {
+ // We have not found a port.
+ return
+ }
+
+ const config = configFactory('development')
+ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+ const appName = require(paths.appPackageJson).name
+
+ const useTypeScript = fs.existsSync(paths.appTsConfig)
+ const urls = prepareUrls(
+ protocol,
+ HOST,
+ port,
+ paths.publicUrlOrPath.slice(0, -1),
+ )
+ // Create a webpack compiler that is configured with custom messages.
+ const compiler = createCompiler({
+ appName,
+ config,
+ urls,
+ useYarn,
+ useTypeScript,
+ webpack,
})
- .then(port => {
- if (port == null) {
- // We have not found a port.
- return;
- }
+ // Load proxy config
+ const proxySetting = require(paths.appPackageJson).proxy
+ const proxyConfig = prepareProxy(
+ proxySetting,
+ paths.appPublic,
+ paths.publicUrlOrPath,
+ )
+ // Serve webpack assets generated by the compiler over a web server.
+ const serverConfig = {
+ ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+ host: HOST,
+ port,
+ }
+ const devServer = new WebpackDevServer(serverConfig, compiler)
- const config = configFactory('development');
- const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
- const appName = require(paths.appPackageJson).name;
-
- const useTypeScript = fs.existsSync(paths.appTsConfig);
- const urls = prepareUrls(
- protocol,
- HOST,
- port,
- paths.publicUrlOrPath.slice(0, -1)
- );
- // Create a webpack compiler that is configured with custom messages.
- const compiler = createCompiler({
- appName,
- config,
- urls,
- useYarn,
- useTypeScript,
- webpack,
- });
- // Load proxy config
- const proxySetting = require(paths.appPackageJson).proxy;
- const proxyConfig = prepareProxy(
- proxySetting,
- paths.appPublic,
- paths.publicUrlOrPath
- );
- // Serve webpack assets generated by the compiler over a web server.
- const serverConfig = {
- ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
- host: HOST,
- port,
- };
- const devServer = new WebpackDevServer(serverConfig, compiler);
- // Launch WebpackDevServer.
- devServer.startCallback(() => {
- if (isInteractive) {
- clearConsole();
- }
-
- if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
- console.log(
- chalk.yellow(
- `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
- )
- );
- }
-
- console.log(chalk.cyan('Starting the development server...\n'));
- openBrowser(urls.localUrlForBrowser);
- });
-
- ['SIGINT', 'SIGTERM'].forEach(function (sig) {
- process.on(sig, function () {
- devServer.close();
- process.exit();
- });
- });
-
- if (process.env.CI !== 'true') {
- // Gracefully exit when stdin ends
- process.stdin.on('end', function () {
- devServer.close();
- process.exit();
- });
+ // Launch WebpackDevServer.
+ devServer.startCallback(() => {
+ if (isInteractive) {
+ clearConsole()
}
- })
- .catch(err => {
- if (err && err.message) {
- console.log(err.message);
+
+ if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+ console.log(
+ chalk.yellow(
+ `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`,
+ ),
+ )
}
- process.exit(1);
+
+ console.log(chalk.cyan('Starting the development server...\n'))
+ openBrowser(urls.localUrlForBrowser)
});
+
+ ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+ process.on(sig, function () {
+ devServer.close()
+ process.exit()
+ })
+ })
+
+ if (process.env.CI !== 'true') {
+ // Gracefully exit when stdin ends
+ process.stdin.on('end', function () {
+ devServer.close()
+ process.exit()
+ })
+ }
+})
+.catch((err) => {
+ if (err && err.message) {
+ console.log(err.message)
+ }
+
+ process.exit(1)
+})
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/scripts/test.js b/system-tests/projects/react-app-webpack-5-unconfigured/scripts/test.js
index a38c855c5b0..844c409f20a 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/scripts/test.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/scripts/test.js
@@ -1,39 +1,41 @@
-'use strict';
+'use strict'
// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
+process.env.BABEL_ENV = 'test'
+process.env.NODE_ENV = 'test'
+process.env.PUBLIC_URL = ''
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
- throw err;
-});
+process.on('unhandledRejection', (err) => {
+ throw err
+})
// Ensure environment variables are read.
-require('../config/env');
+require('../config/env')
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-let argv = process.argv.slice(2);
+const jest = require('jest')
+const execSync = require('child_process').execSync
+let argv = process.argv.slice(2)
-function isInGitRepository() {
+function isInGitRepository () {
try {
- execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
- return true;
+ execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' })
+
+ return true
} catch (e) {
- return false;
+ return false
}
}
-function isInMercurialRepository() {
+function isInMercurialRepository () {
try {
- execSync('hg --cwd . root', { stdio: 'ignore' });
- return true;
+ execSync('hg --cwd . root', { stdio: 'ignore' })
+
+ return true
} catch (e) {
- return false;
+ return false
}
}
@@ -44,9 +46,9 @@ if (
argv.indexOf('--watchAll=false') === -1
) {
// https://github.com/facebook/create-react-app/issues/5210
- const hasSourceControl = isInGitRepository() || isInMercurialRepository();
- argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
+ const hasSourceControl = isInGitRepository() || isInMercurialRepository()
+ argv.push(hasSourceControl ? '--watch' : '--watchAll')
+}
-jest.run(argv);
+jest.run(argv)
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/src/App.js b/system-tests/projects/react-app-webpack-5-unconfigured/src/App.js
index 37845757234..8c308860b28 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/src/App.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/src/App.js
@@ -1,7 +1,7 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from './logo.svg'
+import './App.css'
-function App() {
+function App () {
return (
@@ -19,7 +19,7 @@ function App() {
- );
+ )
}
-export default App;
+export default App
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/src/App.test.js b/system-tests/projects/react-app-webpack-5-unconfigured/src/App.test.js
index 1f03afeece5..0959cf74337 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/src/App.test.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/src/App.test.js
@@ -1,8 +1,9 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from '@testing-library/react'
+import App from './App'
test('renders learn react link', () => {
- render(
,
- document.getElementById('root')
-);
+ document.getElementById('root'),
+)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/src/reportWebVitals.js b/system-tests/projects/react-app-webpack-5-unconfigured/src/reportWebVitals.js
index 5253d3ad9e6..dc6ff0781b6 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/src/reportWebVitals.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/src/reportWebVitals.js
@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
+ getCLS(onPerfEntry)
+ getFID(onPerfEntry)
+ getFCP(onPerfEntry)
+ getLCP(onPerfEntry)
+ getTTFB(onPerfEntry)
+ })
}
-};
+}
-export default reportWebVitals;
+export default reportWebVitals
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/src/setupTests.js b/system-tests/projects/react-app-webpack-5-unconfigured/src/setupTests.js
index 8f2609b7b3e..52aaef1d245 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/src/setupTests.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/src/setupTests.js
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
diff --git a/system-tests/projects/react-app-webpack-5-unconfigured/webpack.config.js b/system-tests/projects/react-app-webpack-5-unconfigured/webpack.config.js
index dbbc880ab5f..9d07525653c 100644
--- a/system-tests/projects/react-app-webpack-5-unconfigured/webpack.config.js
+++ b/system-tests/projects/react-app-webpack-5-unconfigured/webpack.config.js
@@ -1,108 +1,109 @@
-'use strict';
+'use strict'
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const ESLintPlugin = require('eslint-webpack-plugin');
-const paths = require('./config/paths');
-const modules = require('./config/modules');
-const getClientEnvironment = require('./config/env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const fs = require('fs')
+const path = require('path')
+const webpack = require('webpack')
+const resolve = require('resolve')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
+const ESLintPlugin = require('eslint-webpack-plugin')
+const paths = require('./config/paths')
+const modules = require('./config/modules')
+const getClientEnvironment = require('./config/env')
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
const ForkTsCheckerWebpackPlugin =
process.env.TSC_COMPILE_ON_ERROR === 'true'
? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
- : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+ : require('react-dev-utils/ForkTsCheckerWebpackPlugin')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
-const createEnvironmentHash = require('./config/webpack/persistentCache/createEnvironmentHash');
+const createEnvironmentHash = require('./config/webpack/persistentCache/createEnvironmentHash')
// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
-const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime')
const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
- '@pmmmwh/react-refresh-webpack-plugin'
-);
-const babelRuntimeEntry = require.resolve('babel-preset-react-app');
+ '@pmmmwh/react-refresh-webpack-plugin',
+)
+const babelRuntimeEntry = require.resolve('babel-preset-react-app')
const babelRuntimeEntryHelpers = require.resolve(
'@babel/runtime/helpers/esm/assertThisInitialized',
- { paths: [babelRuntimeEntry] }
-);
+ { paths: [babelRuntimeEntry] },
+)
const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
paths: [babelRuntimeEntry],
-});
+})
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'
-const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
-const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true'
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true'
const imageInlineSizeLimit = parseInt(
- process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
-);
+ process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
+)
// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
+const useTypeScript = fs.existsSync(paths.appTsConfig)
// Check if Tailwind config exists
const useTailwind = fs.existsSync(
- path.join(paths.appPath, 'tailwind.config.js')
-);
+ path.join(paths.appPath, 'tailwind.config.js'),
+)
// Get the path to the uncompiled service worker (if it exists).
-const swSrc = paths.swSrc;
+const swSrc = paths.swSrc
// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
+const cssRegex = /\.css$/
+const cssModuleRegex = /\.module\.css$/
+const sassRegex = /\.(scss|sass)$/
+const sassModuleRegex = /\.module\.(scss|sass)$/
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
- return false;
+ return false
}
try {
- require.resolve('react/jsx-runtime');
- return true;
+ require.resolve('react/jsx-runtime')
+
+ return true
} catch (e) {
- return false;
+ return false
}
-})();
+})()
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
- const isEnvDevelopment = webpackEnv === 'development';
- const isEnvProduction = webpackEnv === 'production';
+ const isEnvDevelopment = webpackEnv === 'development'
+ const isEnvProduction = webpackEnv === 'production'
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
- isEnvProduction && process.argv.includes('--profile');
+ isEnvProduction && process.argv.includes('--profile')
// We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
- const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+ const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1))
- const shouldUseReactRefresh = env.raw.FAST_REFRESH;
+ const shouldUseReactRefresh = env.raw.FAST_REFRESH
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -133,39 +134,40 @@ module.exports = function (webpackEnv) {
config: false,
plugins: !useTailwind
? [
- 'postcss-flexbugs-fixes',
- [
- 'postcss-preset-env',
- {
- autoprefixer: {
- flexbox: 'no-2009',
- },
- stage: 3,
+ 'postcss-flexbugs-fixes',
+ [
+ 'postcss-preset-env',
+ {
+ autoprefixer: {
+ flexbox: 'no-2009',
},
- ],
- // Adds PostCSS Normalize as the reset css with default options,
- // so that it honors browserslist config in package.json
- // which in turn let's users customize the target behavior as per their needs.
- 'postcss-normalize',
- ]
+ stage: 3,
+ },
+ ],
+ // Adds PostCSS Normalize as the reset css with default options,
+ // so that it honors browserslist config in package.json
+ // which in turn let's users customize the target behavior as per their needs.
+ 'postcss-normalize',
+ ]
: [
- 'tailwindcss',
- 'postcss-flexbugs-fixes',
- [
- 'postcss-preset-env',
- {
- autoprefixer: {
- flexbox: 'no-2009',
- },
- stage: 3,
+ 'tailwindcss',
+ 'postcss-flexbugs-fixes',
+ [
+ 'postcss-preset-env',
+ {
+ autoprefixer: {
+ flexbox: 'no-2009',
},
- ],
+ stage: 3,
+ },
],
+ ],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
- ].filter(Boolean);
+ ].filter(Boolean)
+
if (preProcessor) {
loaders.push(
{
@@ -180,11 +182,12 @@ module.exports = function (webpackEnv) {
options: {
sourceMap: true,
},
- }
- );
+ },
+ )
}
- return loaders;
- };
+
+ return loaders
+ }
return {
target: ['browserslist'],
@@ -220,12 +223,13 @@ module.exports = function (webpackEnv) {
publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
- ? info =>
- path
- .relative(paths.appSrc, info.absoluteResourcePath)
- .replace(/\\/g, '/')
+ ? (info) => {
+ return path
+ .relative(paths.appSrc, info.absoluteResourcePath)
+ .replace(/\\/g, '/')
+ }
: isEnvDevelopment &&
- (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+ ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
cache: {
type: 'filesystem',
@@ -235,9 +239,9 @@ module.exports = function (webpackEnv) {
buildDependencies: {
defaultWebpack: ['webpack/lib/'],
config: [__filename],
- tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
- fs.existsSync(f)
- ),
+ tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) => {
+ return fs.existsSync(f)
+ }),
},
},
infrastructureLogging: {
@@ -296,7 +300,7 @@ module.exports = function (webpackEnv) {
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
- modules.additionalModulePaths || []
+ modules.additionalModulePaths || [],
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
@@ -305,8 +309,8 @@ module.exports = function (webpackEnv) {
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
- .map(ext => `.${ext}`)
- .filter(ext => useTypeScript || !ext.includes('ts')),
+ .map((ext) => `.${ext}`)
+ .filter((ext) => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -407,7 +411,7 @@ module.exports = function (webpackEnv) {
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
- 'babel-preset-react-app/webpack-overrides'
+ 'babel-preset-react-app/webpack-overrides',
),
presets: [
[
@@ -417,7 +421,7 @@ module.exports = function (webpackEnv) {
},
],
],
-
+
plugins: [
isEnvDevelopment &&
shouldUseReactRefresh &&
@@ -451,7 +455,7 @@ module.exports = function (webpackEnv) {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
-
+
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
@@ -515,7 +519,7 @@ module.exports = function (webpackEnv) {
mode: 'icss',
},
},
- 'sass-loader'
+ 'sass-loader',
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
@@ -538,7 +542,7 @@ module.exports = function (webpackEnv) {
getLocalIdent: getCSSModuleLocalIdent,
},
},
- 'sass-loader'
+ 'sass-loader',
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
@@ -571,21 +575,21 @@ module.exports = function (webpackEnv) {
},
isEnvProduction
? {
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeRedundantAttributes: true,
- useShortDoctype: true,
- removeEmptyAttributes: true,
- removeStyleLinkTypeAttributes: true,
- keepClosingSlash: true,
- minifyJS: true,
- minifyCSS: true,
- minifyURLs: true,
- },
- }
- : undefined
- )
+ minify: {
+ removeComments: true,
+ collapseWhitespace: true,
+ removeRedundantAttributes: true,
+ useShortDoctype: true,
+ removeEmptyAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ keepClosingSlash: true,
+ minifyJS: true,
+ minifyCSS: true,
+ minifyURLs: true,
+ },
+ }
+ : undefined,
+ ),
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
@@ -637,17 +641,18 @@ module.exports = function (webpackEnv) {
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
- manifest[file.name] = file.path;
- return manifest;
- }, seed);
+ manifest[file.name] = file.path
+
+ return manifest
+ }, seed)
const entrypointFiles = entrypoints.main.filter(
- fileName => !fileName.endsWith('.map')
- );
+ (fileName) => !fileName.endsWith('.map'),
+ )
return {
files: manifestFiles,
entrypoints: entrypointFiles,
- };
+ }
},
}),
// Moment.js is an extremely popular library that bundles large locale files
@@ -731,7 +736,7 @@ module.exports = function (webpackEnv) {
cache: true,
cacheLocation: path.resolve(
paths.appNodeModules,
- '.cache/.eslintcache'
+ '.cache/.eslintcache',
),
// ESLint class options
cwd: paths.appPath,
@@ -749,5 +754,5 @@ module.exports = function (webpackEnv) {
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
- };
-};
+ }
+}
diff --git a/system-tests/projects/react17/src/UsingLegacyMount.cy.jsx b/system-tests/projects/react17/src/UsingLegacyMount.cy.jsx
index 0f9846a0a2d..34155dc68d6 100644
--- a/system-tests/projects/react17/src/UsingLegacyMount.cy.jsx
+++ b/system-tests/projects/react17/src/UsingLegacyMount.cy.jsx
@@ -13,10 +13,10 @@ describe('using legacy mount', () => {
mount(
Hello World
- );
+ )
}
-export default App;
+export default App
diff --git a/system-tests/projects/no-specs-custom-pattern/src/components/Button.cy2.jsx b/system-tests/projects/no-specs-custom-pattern/src/components/Button.cy2.jsx
index 2eb7cfb085b..fbd6b6b36c5 100644
--- a/system-tests/projects/no-specs-custom-pattern/src/components/Button.cy2.jsx
+++ b/system-tests/projects/no-specs-custom-pattern/src/components/Button.cy2.jsx
@@ -1,6 +1,3 @@
-import React from 'react';
-import Button from './Button';
-
-it("should not run because this file doesn't match the custom spec pattern", () => {
+it('should not run because this file doesn\'t match the custom spec pattern', () => {
expect(true).to.be.false
})
diff --git a/system-tests/projects/no-specs-custom-pattern/src/components/Button.jsx b/system-tests/projects/no-specs-custom-pattern/src/components/Button.jsx
index 5ea1563bfa8..12b6628300f 100644
--- a/system-tests/projects/no-specs-custom-pattern/src/components/Button.jsx
+++ b/system-tests/projects/no-specs-custom-pattern/src/components/Button.jsx
@@ -1,12 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+import React from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
/**
* Primary UI component for user interaction
*/
-export default Button = ({ primary, backgroundColor, size, label, ...props }) => {
- const mode = primary ? 'button--primary' : 'button--secondary';
+export default Button
+
+const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+ const mode = primary ? 'button--primary' : 'button--secondary'
+
return (
- );
-};
+ )
+}
Button.propTypes = {
/**
@@ -40,11 +43,11 @@ Button.propTypes = {
* Optional click handler
*/
onClick: PropTypes.func,
-};
+}
Button.defaultProps = {
backgroundColor: null,
primary: false,
size: 'medium',
onClick: undefined,
-};
+}
diff --git a/system-tests/projects/no-specs-custom-pattern/src/index.jsx b/system-tests/projects/no-specs-custom-pattern/src/index.jsx
index 6832e7832bb..3992ef9741f 100644
--- a/system-tests/projects/no-specs-custom-pattern/src/index.jsx
+++ b/system-tests/projects/no-specs-custom-pattern/src/index.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
ReactDOM.render(
Hello World
- );
+ )
}
-export default App;
+export default App
diff --git a/system-tests/projects/no-specs/src/index.jsx b/system-tests/projects/no-specs/src/index.jsx
index 6832e7832bb..3992ef9741f 100644
--- a/system-tests/projects/no-specs/src/index.jsx
+++ b/system-tests/projects/no-specs/src/index.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
ReactDOM.render(