From c713741f517e219f197b192d94674628b33de0b3 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 23 Jan 2020 15:28:37 -0500 Subject: [PATCH 1/4] Explain Ignored PostCSS Plugin (#10240) --- errors/postcss-ignored-plugin.md | 20 +++++++++++++++++++ .../webpack/config/blocks/css/plugins.ts | 3 ++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 errors/postcss-ignored-plugin.md 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..caa338d60a78 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 } From 32ded0539eccb8d3469be52cd86df926fe2ec7dd Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 23 Jan 2020 15:39:50 -0500 Subject: [PATCH 2/4] PostCSS Error When Exporting Function (#10242) * PostCSS Error When Exporting Function * Update postcss-function.md --- errors/postcss-function.md | 30 +++++++++++++++++++ .../webpack/config/blocks/css/plugins.ts | 3 +- 2 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 errors/postcss-function.md 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/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts index caa338d60a78..30a8e39be039 100644 --- a/packages/next/build/webpack/config/blocks/css/plugins.ts +++ b/packages/next/build/webpack/config/blocks/css/plugins.ts @@ -119,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' ) } From 9d7ee34d2cc026512ec05241d44d7b835f65c7d8 Mon Sep 17 00:00:00 2001 From: Arek Mytych Date: Thu, 23 Jan 2020 21:40:02 +0100 Subject: [PATCH 3/4] Add info on storing cache in GitHub Actions (#10231) * Add info on storing cache in GitHub Actions * Specify yaml for code formatting Co-Authored-By: Joe Haddad * Fix wording Co-Authored-By: Joe Haddad Co-authored-by: Joe Haddad --- errors/no-cache.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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`): From 127f707c18a79fcdd20fecd2e0ccff08eca36dd3 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 23 Jan 2020 14:40:12 -0600 Subject: [PATCH 4/4] Tweak export test to be more stable (#10241) Co-authored-by: Joe Haddad --- test/integration/export-serverless/pages/index.js | 2 +- test/integration/export-serverless/test/browser.js | 4 ++-- test/integration/export/pages/index.js | 2 +- test/integration/export/test/browser.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) 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/ )