I am trying to update my large project built in Next10 to Next12. The issue is that I get an error with styled components. As far as I understand the latest version of Next should work with styled components.
I have followed the instructions here: https://nextjs.org/docs/advanced-features/compiler.
Does anyone have an idea of what I could be doing wrong?
Error: An error occurred. See https://git.io/JUIaE#1 for more information. Args: [object Object]
at _ (/app/node_modules/styled-components/dist/styled-components.cjs.js:1:5326)
at e (/app/node_modules/styled-components/dist/styled-components.cjs.js:1:20749)
at ke (/app/node_modules/styled-components/dist/styled-components.cjs.js:1:20986)
at Object.3817 (/app/.next/server/chunks/997.js:2566:55)
at __webpack_require__ (/app/.next/server/webpack-runtime.js:25:42)
at Object.9099 (/app/.next/server/chunks/997.js:8019:18)
at __webpack_require__ (/app/.next/server/webpack-runtime.js:25:42)
at Object.7684 (/app/.next/server/chunks/997.js:3684:17)
at __webpack_require__ (/app/.next/server/webpack-runtime.js:25:42)
at /app/.next/server/pages/article/[hash].js:267:75 { type: 'Error' }
"dependencies": {
"@apollo/client": "^3.3.15",
"@apollo/react-common": "^3.0.1",
"@apollo/react-components": "^4.0.0",
"@apollo/react-hoc": "^4.0.0",
"@apollo/react-hooks": "^4.0.0",
"@codemirror/basic-setup": "^0.18.2",
"@codemirror/commands": "^0.18.3",
"@codemirror/gutter": "^0.18.4",
"@codemirror/lang-javascript": "^0.18.0",
"@codemirror/lang-markdown": "^0.18.4",
"@codemirror/state": "^0.18.7",
"@codemirror/theme-one-dark": "^0.18.1",
"@codemirror/view": "^0.18.17",
"@graphql-codegen/cli": "^2.2.0",
"@graphql-codegen/typescript": "^2.2.2",
"@graphql-codegen/typescript-operations": "^2.1.4",
"@graphql-codegen/typescript-react-apollo": "^3.1.4",
"@pdftron/pdfjs-express-viewer": "^8.2.1",
"@svgr/webpack": "^5.5.0",
"@swc/cli": "^0.1.55",
"@swc/core": "^1.2.147",
"@syncfusion/ej2-react-pdfviewer": "^19.4.43",
"@types/pdfjs-dist": "^2.7.4",
"@types/react": "^17.0.20",
"add": "^2.0.6",
"apollo-client": "^2.6.10",
"babel-plugin-transform-define": "^2.0.1",
"copy-webpack-plugin": "^6.3.2",
"core-js": "^3.2.1",
"eslint-config-prettier": "^8.3.0",
"express": "^4.17.1",
"graphql": "^15.0.0",
"graphql-tag": "^2.10.1",
"lang-papershive": "^0.1.16",
"next": "^12.1.0",
"next-fonts": "^0.19.0",
"next-plugin-custom-babel-config": "^1.0.5",
"next-routes": "^1.4.2",
"node-fetch": "^2.6.1",
"node-sass": "^6.0.1",
"pdfjs": "^2.4.7",
"pdfjs-dist": "2.8.335",
"react": "^17.0.2",
"react-apollo": "^3.1.5",
"react-dom": "^17.0.2",
"react-fast-compare": "^3.2.0",
"react-mathjax": "^1.0.1",
"react-pdf": "^5.4.1",
"react-player": "^2.9.0",
"react-sortable-hoc": "^2.0.0",
"styled-components": "^5.3.3",
"vue": "3.0.5",
"yarn": "^1.22.17"
},
"devDependencies": {
"@types/express": "^4.17.1",
"@types/graphql": "^14.2.3",
"@types/node": "^17.0.21",
"@types/styled-components": "^5.1.14",
"babel-plugin-styled-components": "^2.0.2",
"eslint": "7.32.0",
"eslint-config-next": "10.2.3",
"nodemon": "^2.0.12",
"prettier": "^2.4.0",
"regenerator-runtime": "^0.13.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.2.1",
"typescript": "^4.4.2"
},