Skip to content

Commit 4cfe4b1

Browse files
lmiller1990Barthélémy Ledoux
lmiller1990
and
Barthélémy Ledoux
authored
fix(webpack-dev-server): remove hard dependency on html-webpack-plugin v4 (#16108)
* update webpack-dev-server to support html-webpack-plugin 4 and 5 * add nextjs example * update env * chore: comment out nextjs webpack 5 example * use ts-ignore instead of 'ts-expect-error' * lock file * chore: update dependencies Co-authored-by: Barthélémy Ledoux <bart@cypress.io>
1 parent 7b55863 commit 4cfe4b1

File tree

24 files changed

+2947
-97
lines changed

24 files changed

+2947
-97
lines changed

‎npm/mount-utils/src/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/// <reference types="cypress" />
2-
31
/**
42
* Additional styles to inject into the document.
53
* A component might need 3rd party libraries from CDN,

‎npm/react/examples.env

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
/examples/nextjs
3+
# /examples/nextjs-webpack-5
34
/examples/react-scripts
45
/examples/webpack-file
56
/examples/react-scripts-folder

‎npm/react/examples/nextjs-webpack-5/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is a test project using Next.js 10 and webpack 5.

‎npm/react/examples/nextjs-webpack-5/components/Search.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react'
2+
3+
export function Search () {
4+
const [value, setValue] = React.useState('')
5+
6+
return (
7+
<div>
8+
<input
9+
aria-label="search"
10+
value={value}
11+
onChange={(e) => setValue(e.currentTarget.value)}
12+
/>
13+
14+
<p className="search-text">You are searching for: {value}</p>
15+
16+
<style jsx>{`
17+
input {
18+
border-radius: 20px;
19+
}
20+
div {
21+
padding: 16px;
22+
background: tomato;
23+
}
24+
`}</style>
25+
</div>
26+
)
27+
}

‎npm/react/examples/nextjs-webpack-5/cypress.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"video": false,
3+
"testFiles": "**/*.spec.{js,jsx}",
4+
"viewportWidth": 500,
5+
"viewportHeight": 800,
6+
"componentFolder": "cypress/components",
7+
"pluginsFile": "cypress/plugins.js"
8+
}

‎npm/react/examples/nextjs-webpack-5/cypress/components/Search.spec.jsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/// <reference types="cypress" />
2+
import * as React from 'react'
3+
import * as ReactDom from 'react-dom'
4+
import { mount } from '@cypress/react'
5+
import { Search } from '../../components/Search'
6+
7+
describe('<Search /> NextJS component', () => {
8+
it('Renders component', () => {
9+
mount(<Search />, {
10+
ReactDom,
11+
})
12+
13+
cy.get('input').type('124152')
14+
cy.contains('.search-text', '124152').should('be.visible')
15+
})
16+
})

‎npm/react/examples/nextjs-webpack-5/cypress/fixtures/.keep

Whitespace-only changes.

‎npm/react/examples/nextjs-webpack-5/cypress/plugins.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const injectNextDevServer = require('@cypress/react/plugins/next')
2+
3+
/**
4+
* @type {Cypress.PluginConfig}
5+
*/
6+
module.exports = (on, config) => {
7+
injectNextDevServer(on, config)
8+
9+
return config
10+
}

‎npm/react/examples/nextjs-webpack-5/cypress/support/.keep

Whitespace-only changes.

‎npm/react/examples/nextjs-webpack-5/next.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
future: {
3+
webpack5: true,
4+
},
5+
}

‎npm/react/examples/nextjs-webpack-5/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "nextjs-webpack-5",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"cy:open": "node ../../../../scripts/cypress open-ct",
7+
"dev": "next",
8+
"start": "next start",
9+
"test": "node ../../../../scripts/cypress run-ct"
10+
},
11+
"dependencies": {
12+
"next": "10.1.3",
13+
"react": "17.0.2",
14+
"react-dom": "17.0.2"
15+
},
16+
"devDependencies": {
17+
"html-webpack-plugin": "5.3.1",
18+
"webpack": "5.34.0"
19+
}
20+
}

‎npm/react/examples/nextjs-webpack-5/pages/_app.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react'
2+
import '../styles/globals.css'
3+
4+
function MyApp ({ Component, pageProps }) {
5+
return <Component {...pageProps} />
6+
}
7+
8+
export default MyApp

‎npm/react/examples/nextjs-webpack-5/pages/api/hello.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
3+
export default (req, res) => {
4+
res.status(200).json({ name: 'John Doe' })
5+
}

‎npm/react/examples/nextjs-webpack-5/pages/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Head from 'next/head'
2+
import React from 'react'
3+
import styles from '../styles/Home.module.css'
4+
5+
export default function Home () {
6+
return (
7+
<div className={styles.container}>
8+
<Head>
9+
<title>Create Next App</title>
10+
<link rel="icon" href="/favicon.ico" />
11+
</Head>
12+
<main className={styles.main}>
13+
<h1 className={styles.title}>
14+
Welcome to <a href="https://nextjs.org">Next.js!</a>
15+
</h1>
16+
</main>
17+
</div>
18+
)
19+
}

‎npm/react/examples/nextjs-webpack-5/public/favicon.ico

14.7 KB
Binary file not shown.

‎npm/react/examples/nextjs-webpack-5/styles/Home.module.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.container {
2+
min-height: 100vh;
3+
padding: 0 0.5rem;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
.main {
11+
padding: 5rem 0;
12+
flex: 1;
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
align-items: center;
17+
}

‎npm/react/examples/nextjs-webpack-5/styles/globals.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7+
}
8+
9+
a {
10+
color: inherit;
11+
text-decoration: none;
12+
}
13+
14+
* {
15+
box-sizing: border-box;
16+
}

0 commit comments

Comments
 (0)