Next.js: Upgrading next from 9.0.6 to 9.1.1 brakes a validator in "cssnano-preset-simple" and avoid build and start
Bug report
Describe the bug
Hi everyone, I tried to upgrade next from 9.0.6 to 9.1.1 and it brakes a validator in cssnano-preset-simple:
TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type object
at validateString (internal/validators.js:125:11)
at Module.require (internal/modules/cjs/loader.js:632:3)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.loadQueries (~/node_modules/cssnano-preset-simple/dist/index.js:1:192617)
at Function.select (~/node_modules/cssnano-preset-simple/dist/index.js:1:737843)
at ~/node_modules/cssnano-preset-simple/dist/index.js:1:727871
at Array.reduce (<anonymous>)
at resolve (~/node_modules/cssnano-preset-simple/dist/index.js:1:727573)
at browserslist (~/node_modules/cssnano-preset-simple/dist/index.js:1:728929)
at cleanBrowsersList (~/node_modules/cssnano-preset-simple/dist/index.js:1:688998)
at setBrowserScope (~/node_modules/cssnano-preset-simple/dist/index.js:1:376814)
at Object.<anonymous> (~/node_modules/cssnano-preset-simple/dist/index.js:1:377795)
at __webpack_require__ (~/node_modules/cssnano-preset-simple/dist/index.js:1:216)
at Object.<anonymous> (~/node_modules/cssnano-preset-simple/dist/index.js:1:78427)
at __webpack_require__ (~/node_modules/cssnano-preset-simple/dist/index.js:1:216)
at Object.<anonymous> (~/node_modules/cssnano-preset-simple/dist/index.js:1:695438)
I can't build neither run the project anymore.
I'm using both SASS (@zeit/next-sass) and CSS (@zeit/next-css) plugins.
My package.json:
"dependencies": {
"@babel/polyfill": "^7.4.3",
"@babel/register": "^7.4.0",
"@frichti/logger": "^1.1.6",
"@sentry/browser": "^5.6.3",
"@sentry/cli": "^1.47.2",
"@sentry/node": "^5.6.2",
"@typeform/embed": "^0.12.1",
"@zeit/next-bundle-analyzer": "^0.1.2",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"@zeit/next-source-maps": "0.0.4-canary.1",
"acorn": "^6.1.1",
"autocannon": "^4.1.1",
"autoprefixer": "^9.6.1",
"aws-sdk": "^2.379.0",
"babel-loader": "^8.0.5",
"babel-plugin-require-context-hook": "^1.0.0",
"bluebird": "^3.5.5",
"breakpoint-sass": "^2.7.0",
"browser-update": "^3.2.5",
"browserslist-config-google": "^1.5.0",
"classnames": "^2.2.6",
"config": "^3.0.1",
"cookie-parser": "^1.4.4",
"copy-to-clipboard": "^3.0.8",
"copy-webpack-plugin": "^4.6.0",
"core-js": "^2.5.7",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"express": "^4.16.4",
"file-loader": "^2.0.0",
"fs": "0.0.2",
"git-revision-webpack-plugin": "^3.0.3",
"history": "^4.7.2",
"immutability-helper": "^2.6.4",
"isomorphic-unfetch": "^3.0.0",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"lint-staged": "^8.1.0",
"lodash": "^4.17.15",
"lottie-web": "^5.5.9",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"mobile-detect": "^1.4.3",
"moment": "^2.22.2",
"next": "9.0.6",
"next-compose-plugins": "^2.2.0",
"next-fonts": "^0.19.0",
"next-redux-wrapper": "^4.0.1",
"next-rum": "^1.1.0",
"node-sass": "^4.12.0",
"nookies": "^2.0.8",
"nouislider": "^8.5.1",
"postcss-loader": "^3.0.0",
"postcss-zindex": "^4.0.1",
"prom-client": "^11.2.1",
"prop-types": "^15.7.2",
"query-string": "^5.1.1",
"react": "^16.10.2",
"react-addons-shallow-compare": "^15.6.2",
"react-dom": "^16.10.2",
"react-fastclick": "^3.0.2",
"react-load-script": "0.0.6",
"react-markdown": "^4.1.0",
"react-redux": "^7.1.1",
"react-stripe-elements": "^5.0.1",
"react-transition-group": "^2.9.0",
"react-visibility-sensor": "^3.14.0",
"redis": "^2.8.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-mock-store": "^1.5.3",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.1",
"reselect": "^3.0.1",
"s3": "^4.4.0",
"sass-loader": "^7.1.0",
"shortid": "^2.2.14",
"socket.io-client": "^2.0.4",
"style-loader": "^0.23.1",
"susy": "^2.2.12",
"svg4everybody": "^2.1.9",
"uniqid": "^5.0.3",
"url-search-params-polyfill": "^5.0.0"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@storybook/addon-actions": "^5.2.3",
"@storybook/addon-backgrounds": "^5.2.3",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-knobs": "^5.2.3",
"@storybook/addon-links": "^5.2.3",
"@storybook/addon-options": "^5.2.3",
"@storybook/addon-storyshots": "^5.2.3",
"@storybook/addon-viewport": "^5.2.3",
"@storybook/addons": "^5.2.3",
"@storybook/channel-postmessage": "^5.2.3",
"@storybook/react": "^5.2.3",
"@storybook/theming": "^5.2.3",
"@testing-library/react": "^9.3.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.9.0",
"babel-plugin-inline-react-svg": "^1.1.0",
"babel-plugin-react-remove-properties": "^0.3.0",
"chai": "^4.2.0",
"dyson": "^2.0.5",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"es6-promise": "^3.2.1",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^1.7.0",
"fetch": "^1.1.0",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.2.0",
"identity-obj-proxy": "^3.0.0",
"ignore-styles": "^5.0.1",
"istanbul-api": "^2.0.6",
"istanbul-reports": "^2.0.1",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"jest-prop-type-error": "^1.1.0",
"md5": "^2.2.1",
"mocha": "^5.2.0",
"mockdate": "^2.0.2",
"nodemon": "^1.19.1",
"npm-run-all": "^4.1.5",
"react-test-renderer": "^16.10.2",
"rimraf": "^2.6.2",
"stylelint": "^10.1.0",
"stylelint-config-sass-guidelines": "^6.0.0",
"stylelint-scss": "^3.11.1",
"stylelint-selector-bem-pattern": "^2.1.0",
"whatwg-fetch": "^1.0.0"
},
Expected behavior
Make my build/start re-working...
System information
- OS: MacOS
- Version of Next.js: 9.0.6 => 9.1.1
needs investigation
ntltd
All 19 comments
Please provide your next.config.js.
Timer
on 8 Oct 2019
👍1
// Next webpack
const webpack = require('webpack') // eslint-disable-line import/no-extraneous-dependencies
const fs = require('fs')
// Next plugins
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css')
const withFonts = require('next-fonts')
const withPlugins = require('next-compose-plugins')
const withSourceMaps = require('@zeit/next-source-maps')()
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer')
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { join } = require('path')
const { promisify } = require('util')
const copyFile = promisify(fs.copyFile)
const srcPath = join(__dirname, 'src')
const scriptsPath = join(__dirname, 'scripts')
const rootPath = join(__dirname, '.')
if (!('API_ENV' in process.env)) {
throw new Error('API_ENV is required')
}
const gitRevisionPlugin = new GitRevisionPlugin()
const ENV_URLS = {
...
}
const nextConfig = withSourceMaps({
useFileSystemPublicRoutes: false,
// Bundle analyzer
analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
bundleAnalyzerConfig: {
server: {
analyzerMode: 'static',
reportFilename: '../.bundle-analyze/server.html'
},
browser: {
analyzerMode: 'static',
reportFilename: '../.bundle-analyze/client.html'
}
},
webpack(config, { isServer, dev, config: params, }) {
const { plugins, module } = config
const { rules } = module
/**
* Add ENV variables
*/
plugins.push(new webpack.DefinePlugin({
'process.env': {
API_ENV: JSON.stringify(process.env.API_ENV),
ENV_URL: JSON.stringify(ENV_URLS[process.env.API_ENV]),
VERSION: JSON.stringify(gitRevisionPlugin.version()),
COMMIT_HASH: JSON.stringify(gitRevisionPlugin.commithash()),
IS_SERVER: JSON.stringify(isServer),
DEV: JSON.stringify(dev),
REDIS_CACHE_ACTIVE: JSON.stringify(dev)
}
}))
/**
* Improve momentJS and remove all useless translations from bundle
*/
plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /fr/))
/**
* FIXME: Find a way to do this without copying
* CopyWebpackPlugin is not easy to configure, assets are not generated
* into the expected folder, move it at the end of the build
*/
plugins.push(new CopyWebpackPlugin([
{
from: `${scriptsPath}/gorgias/custom.css`,
to: `${rootPath}/.next/static/css/gorgias.css`
},
{
from: `${srcPath}/static/.well-known`,
to: `${rootPath}/.next/static/app/`
},
]))
/**
* Images rules
* NOTE: we except icons (sprite) because they will be considered as React Components
*/
rules.push({
test: /\.(jpe?g|png|svg|gif|ico|webp)$/,
exclude: [
`${srcPath}/assets/images/sprite`
],
use: [
{
loader: 'url-loader',
options: {
limit: 512,
fallback: 'file-loader',
publicPath: `${params.assetPrefix}/_next/static/images/`,
outputPath: `${isServer ? '../' : ''}static/images/`,
name: '[name]-[hash].[ext]'
}
}
]
})
// When we are on client side we should replace sentry/node by sentry/browser
if (!isServer) {
config.resolve.alias['@sentry/node'] = '@sentry/browser'
}
return config
},
/**
* Publish robots.txt
*/
async exportPathMap(defaultPathMap, { dev, dir, outDir }) {
// Prevent exporting when local development
if (dev) {
return defaultPathMap
}
// No index if dev mode
const isProduction = process.env.API_ENV === 'production'
const robotsTxt = isProduction ? 'doindex' : 'noindex'
// This will copy robots.txt from project root into the out directory
await copyFile(
join(dir, `${srcPath}/constants/robots/${robotsTxt}.txt`),
join(outDir, 'robots.txt')
)
return defaultPathMap
},
})
const nextPlugins = [
withCss,
withSass,
withFonts,
withBundleAnalyzer
]
module.exports = withPlugins(nextPlugins, nextConfig)
Can you please see if you have an invalid browserslist setting somewhere up your file tree? (All the way to your disk root)
Timer
on 10 Oct 2019
We extend browserslist-config-google in our package.json:
"browserslist": [
"extends browserslist-config-google"
]
@ntltd is there any way you can provide me a full [minimal] reproduction? Maybe your package.json + all pages/components deleted but one and see if it still reproduces?
Timer
on 10 Oct 2019
If I remove the configuration, it works again.
So, I tried:
"browserslist": {
"production": [
"extends browserslist-config-google"
],
"ssr": [
"maintained node versions"
]
}
But it breaks the build again.
I copied-pasted the code from the doc.
ntltd
on 10 Oct 2019
Ok, so I found the issue #8255. If I change the syntax for the modern approach, it works! 🔥
Thanks for your help @Timer
ntltd
on 10 Oct 2019
The issue is not solved. We are experiencing the same problem in our project.
What does this mean?
If I change the syntax for the modern approach, it works!
As a workaround, pinning next to version 9.0.6 allows us to deploy again.
mrm007
on 16 Oct 2019
@Timer here is a repo created with create-next-app that shows the failure. Please have a look at the commit history:
- initial commit – works
- adding
browserslistconfig – fails - resolution for
cssnano-preset-simple– works, but not ideal
mrm007
on 17 Oct 2019
I managed my browserlist in my babel config, not on the package
ntltd
on 17 Oct 2019
If you run yarn upgrade this should be fixed. 🙌
Timer
on 22 Oct 2019
❤1
Got this problem again.
$ next dev
[ wait ] starting the development server ...
[ info ] waiting on http://localhost:3000 ...
{ BrowserslistError: Unknown version 72 of firefox
at Function.select (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:749011)
at /PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:739164
at Array.reduce (<anonymous>)
at resolve (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:738866)
at Function.select (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:749126)
at /PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:739164
at Array.reduce (<anonymous>)
at resolve (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:738866)
at browserslist (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:740222)
at cleanBrowsersList (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:699769)
After yarn upgrade:
$ next dev
[ wait ] starting the development server ...
[ info ] waiting on http://localhost:3000 ...
{ BrowserslistError: Unknown version 79 of edge
at Function.select (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:761462)
at /PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:750974
at Array.reduce (<anonymous>)
at resolve (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:750676)
at Function.select (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:761577)
at /PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:750974
at Array.reduce (<anonymous>)
at resolve (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:750676)
at browserslist (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:752096)
at cleanBrowsersList (/PROJECT/node_modules/cssnano-preset-simple/dist/index.js:1:710590)
@mrm007 this error seems valid.
https://browserl.ist/?q=edge+79
Note, the error you posted is different than OP.
Can you please provide a better reproduction and how you'd expect it to work?
Timer
on 4 Feb 2020
@Timer yes, it is different but is also caused by cssnano-preset-simple which doesn't work as expected with Browserslist configs. I have provided a reproduction in https://github.com/zeit/next.js/issues/8997#issuecomment-542956268. I can file a separate issue if you like.
mrm007
on 4 Feb 2020
@mrm007 this error seems valid.
browserl.ist/?q=edge+79
The website uses stale data:
Data provided by caniuse-db 1.0.30001019
mrm007
on 4 Feb 2020
Like before, can you please run yarn upgrade and see if it's fixed now?
Timer
on 4 Feb 2020
👍1
https://github.com/zeit/next.js/issues/8997#issuecomment-581710357
yarn upgrade produces the Edge 79 error. Before yarn upgrade it was Firefox 72.
As described in https://github.com/zeit/next.js/issues/8997#issuecomment-542956268 the resolution (for cssnano-preset-simple) workaround allows our app to start.
UPDATE: I _just_ ran yarn upgrade again and it seems to be fixed now. Thanks a lot!
I don't believe this is a scalable fix. I don't expect you to bump the dependencies every time a new browser version is published. Have you looked at using ignoreUnknownVersions: false?
mrm007
on 4 Feb 2020
We'll explore not bundling the dependency (caniuse-lite) so it's upgraded via a normal yarn upgrade.
Timer
on 4 Feb 2020
👍1
@Timer Here we go again... As of this morning:
Unknown version 80 of edge
at Function.select (/Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:765183)
at /Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:754695
at Array.reduce (<anonymous>)
at resolve (/Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:754397)
at Function.select (/Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:765298)
at /Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:754695
at Array.reduce (<anonymous>)
at resolve (/Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:754397)
at browserslist (/Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:755817)
at cleanBrowsersList (/Users/mate/work/atomi/previ/node_modules/cssnano-preset-simple/dist/index.js:1:713766)
At this point I'm stuck as the project setup won't let me use Yarn's resolutions solution described in this comment https://github.com/zeit/next.js/issues/8997#issuecomment-542956268.
Sorry I have to keep resurrecting this issue, but if you have any solution/workaround for me I'm all ears.
mrm007
on 11 Feb 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
timneutkens
·
3Comments
formula349
·
3Comments
kenji4569
·
3Comments
YarivGilad
·
3Comments
lixiaoyan
·
3Comments