diff --git a/errors/no-cache.md b/errors/no-cache.md index e6d96bfd32c6..2056b7c88b56 100644 --- a/errors/no-cache.md +++ b/errors/no-cache.md @@ -75,6 +75,17 @@ cache: - '.next/cache/**/*' # Cache Next.js for faster application rebuilds ``` +**GitHub Actions** + +Using GitHub's [actions/cache](https://github.com/actions/cache), add the following step in your workflow file: + +```yaml +uses: actions/cache@v1 +with: + path: ${{ github.workspace }}/.next/cache + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }} +``` + **Bitbucket Pipelines** Add or merge the following into your `bitbucket-pipelines.yml` at the top level (same level as `pipelines`): diff --git a/errors/postcss-function.md b/errors/postcss-function.md new file mode 100644 index 000000000000..83b301eb9d08 --- /dev/null +++ b/errors/postcss-function.md @@ -0,0 +1,30 @@ +# PostCSS Configuration Is a Function + +#### Why This Error Occurred + +The project's custom PostCSS configuration exports a function instead of an object. + +#### Possible Ways to Fix It + +Adjust the custom PostCSS configuration to not export a function. +Instead, return a plain object—if you need environment information, read it from `process.env`. + +**Before** + +```js +module.exports = ({ env }) => ({ + plugins: { + 'postcss-plugin': env === 'production' ? {} : false, + }, +}) +``` + +**After** + +```js +module.exports = { + plugins: { + 'postcss-plugin': process.env.NODE_ENV === 'production' ? {} : false, + }, +} +``` diff --git a/errors/postcss-ignored-plugin.md b/errors/postcss-ignored-plugin.md new file mode 100644 index 000000000000..658ad57f2857 --- /dev/null +++ b/errors/postcss-ignored-plugin.md @@ -0,0 +1,20 @@ +# Ignored PostCSS Plugin + +#### Why This Error Occurred + +The project's custom PostCSS configuration attempts to configure unnecessary plugins: + +- postcss-modules-values +- postcss-modules-scope +- postcss-modules-extract-imports +- postcss-modules-local-by-default +- postcss-modules + +#### Possible Ways to Fix It + +Remove the plugin specified in the error message from your custom PostCSS configuration. + +#### How do I configure CSS Modules? + +CSS Modules are supported in [Next.js' built-in CSS support](https://nextjs.org/docs/advanced-features/customizing-postcss-config). +You can [read more](https://nextjs.org/docs/advanced-features/customizing-postcss-config) about how to use them [here](https://nextjs.org/docs/advanced-features/customizing-postcss-config). diff --git a/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts index cbf5166a3cf2..30a8e39be039 100644 --- a/packages/next/build/webpack/config/blocks/css/plugins.ts +++ b/packages/next/build/webpack/config/blocks/css/plugins.ts @@ -37,7 +37,8 @@ function isIgnoredPlugin(pluginPath: string): boolean { `${chalk.yellow.bold('Warning')}: Please remove the ${chalk.underline( plugin )} plugin from your PostCSS configuration. ` + - `This plugin is automatically configured by Next.js.` + `This plugin is automatically configured by Next.js.\n` + + 'Read more: https://err.sh/next.js/postcss-ignored-plugin' ) return true } @@ -118,7 +119,8 @@ export async function getPostCssPlugins( if (typeof config === 'function') { throw new Error( - `Your custom PostCSS configuration may not export a function. Please export a plain object instead.` + `Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n` + + 'Read more: https://err.sh/next.js/postcss-function' ) } diff --git a/test/integration/export-serverless/pages/index.js b/test/integration/export-serverless/pages/index.js index ba411295915e..bcdb287506d4 100644 --- a/test/integration/export-serverless/pages/index.js +++ b/test/integration/export-serverless/pages/index.js @@ -40,7 +40,7 @@ export default () => ( Level1 about page - Dynamic imports page + Dynamic imports page

This is the home page

diff --git a/test/integration/export-serverless/test/browser.js b/test/integration/export-serverless/test/browser.js index 8a73de458198..f288fd086139 100644 --- a/test/integration/export-serverless/test/browser.js +++ b/test/integration/export-serverless/test/browser.js @@ -133,12 +133,12 @@ export default function(context) { it('should render dynamic import components in the client', async () => { const browser = await webdriver(context.port, '/') await browser - .elementByCss('#dynamic-imports-page') + .elementByCss('#dynamic-imports-link') .click() .waitForElementByCss('#dynamic-imports-page') await check( - () => browser.elementByCss('#dynamic-imports-page p').text(), + () => getBrowserBodyText(browser), /Welcome to dynamic imports/ ) diff --git a/test/integration/export/pages/index.js b/test/integration/export/pages/index.js index ba411295915e..bcdb287506d4 100644 --- a/test/integration/export/pages/index.js +++ b/test/integration/export/pages/index.js @@ -40,7 +40,7 @@ export default () => ( Level1 about page - Dynamic imports page + Dynamic imports page

This is the home page

diff --git a/test/integration/export/test/browser.js b/test/integration/export/test/browser.js index 92ea5604a50c..5845be17a8ad 100644 --- a/test/integration/export/test/browser.js +++ b/test/integration/export/test/browser.js @@ -140,12 +140,12 @@ export default function(context) { it('should render dynamic import components in the client', async () => { const browser = await webdriver(context.port, '/') await browser - .elementByCss('#dynamic-imports-page') + .elementByCss('#dynamic-imports-link') .click() .waitForElementByCss('#dynamic-imports-page') await check( - () => browser.elementByCss('#dynamic-imports-page p').text(), + () => getBrowserBodyText(browser), /Welcome to dynamic imports/ )