dddlr
commented
1 year ago Hi @noobskies! Did you need help with anything by any chance?
Closed noobskies closed 1 year ago
dddlr
commented
1 year ago Hi @noobskies! Did you need help with anything by any chance?
noobskies
commented
1 year ago hey sorry i accidentally clicked submit hah sorry about that, one of my frontend devs started getting this error when trying to compile from yarn, havent seen it before
Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: /home/noobskie/workspace/frontend/src/components/whatshot/NavItems/index.tsx: ██████╗ ██████╗ ███╗ ███╗██████╗ ██╗██╗ ███████╗██████╗ ██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║ ██╔════╝██╔══██╗ ██║ ██║ ██║██╔████╔██║██████╔╝██║██║ █████╗ ██║ ██║ ██║ ██║ ██║██║╚██╔╝██║██╔═══╝ ██║██║ ██╔══╝ ██║ ██║ ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ██║███████╗███████╗██████╔╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚══════╝╚═════╝
@compiled/css - Unhandled exception
An unhandled exception was raised when parsing your CSS, this is probably a bug! Raise an issue here: https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=&template=bug_report.md&title=CSS%20Parsing%20Exception:%20
Input CSS: { padding-bottom: 150px;; }
Exception: Cannot read properties of undefined (reading 'optimizeCss')
at /home/noobskie/workspace/frontend/node_modules/@compiled/utils/dist/error.js:7:16
at transformCss (/home/noobskie/workspace/frontend/node_modules/@compiled/css/dist/transform.js:63:69)
at transformCssItem (/home/noobskie/workspace/frontend/node_modules/@compiled/babel-plugin/dist/utils/transform-css-items.js:62:46)
at /home/noobskie/workspace/frontend/node_modules/@compiled/babel-plugin/dist/utils/transform-css-items.js:80:22
at Array.forEach (<anonymous>)it's like it's failing trying to compile css now and adding all these extra semi colons, still currently trying to debug
noobskies
commented
1 year ago I can open another proper issue if i cant figure it out, if you've seen something like this though let me know
dddlr
commented
1 year ago No problem, let's continue using this issue for now :)
What are the contents of /home/noobskie/workspace/frontend/src/components/whatshot/NavItems/index.tsx, and what version of Compiled are you using? (e.g. you can paste your package.json here)
noobskies
commented
1 year ago {
"name": "xxxxxx",
"version": "2.0.0",
"description": "Starter kit for creating apps with React and Redux",
"main": "index.js",
"engines": {
"npm": ">=8"
},
"scripts": {
"postinstall": "patch-package",
"lint": "esw webpack.config.* src tools --color",
"tslint-check": "tslint-config-prettier-check ./tslint.json",
"typecheck": "tsc --noEmit",
"pretty": "prettier --write \"src/**/*.{ts,tsx}\"",
"lint:fix": "pnpm run typecheck && tslint -p tsconfig.json -c tslint.json --fix \"src/**/*.{ts,tsx}\"",
"preinstall": "node tools/nodeVersionCheck.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel preinstall",
"start": "webpack-dev-server --config ./webpack.config.dev.js",
"dev": "NODE_STAGE=dev NODE_STAGE=dev webpack serve --config ./webpack.config.dev.js",
"dev:test": "NODE_STAGE=dev node server",
"lint:watch": "pnpm run lint -- --watch",
"build": "NODE_STAGE=prod webpack --config webpack.config.prod.js",
"build:test": "NODE_STAGE=test webpack --config webpack.config.prod.js",
"serve-prod": "NODE_STAGE=dev node tools/prod-server",
"test": "jest --collect-coverage",
"test:watch": "jest --watch",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js",
"scp-upload": "node tools/deployToRemote",
"deploy:test": "pnpm run build:test && aws s3 sync --cache-control 'max-age=604800' --exclude index.html dist/ s3://test-www.baopals.com/ && aws s3 sync --cache-control 'no-cache' dist/ s3://test-www.baopals.com/ && aws s3 sync --region 'ap-southeast-2' --cache-control 'max-age=604800' --exclude index.html dist/ s3://test-www.baopals.com/ --profile global && aws s3 sync --cache-control 'no-cache' dist/ s3://test-www.baopals.com/ --profile global && aws cloudfront create-invalidation --distribution-id E2VXUE4QOCMGYD --paths '/*' --profile global",
"deploy:prod": "pnpm run build && aws s3 sync --cache-control 'max-age=604800' --exclude index.html dist/ s3://www.baopals.com/ && aws s3 sync --cache-control 'no-cache' dist/ s3://www.baopals.com/"
},
"author": "Baopals",
"license": "MIT",
"dependencies": {
"@amcharts/amcharts4": "4.7.15",
"@compiled/react": "0.13.1",
"@fortawesome/fontawesome-free": "6.1.1",
"@headlessui/react": "1.5.0",
"@hookform/resolvers": "2.6.0",
"@react-bootstrap/pagination": "1.0.0",
"@react-hook/window-scroll": "1.3.0",
"@sentry/react": "7.28.1",
"@sentry/tracing": "7.28.1",
"@tanstack/react-query": "4.20.4",
"airwallex-payment-elements": "0.2.65",
"axios": "1.2.1",
"bootstrap-sass": "3.3.7",
"cloudinary-core": "2.7.3",
"color-thief-react": "2.1.0",
"connected-react-router": "6.4.0",
"date-fns": "2.6.0",
"downshift": "7.6.0",
"fetch-jsonp": "1.1.3",
"history": "4.7.2",
"html-to-react": "1.3.4",
"immutability-helper": "2.7.1",
"intl": "1.2.5",
"intl-locales-supported": "1.5.0",
"joi": "17.4.0",
"jotai": "2.0.0",
"linkify-it": "2.1.0",
"lodash": "4.17.15",
"markdown-it": "8.4.2",
"mobile-detect": "1.4.3",
"path-browserify": "1.0.1",
"pingpp-js": "2.2.6",
"prop-types": "15.6.2",
"pure-react-carousel": "1.30.1",
"pusher-js": "4.3.1",
"qrcode.react": "0.8.0",
"qs": "6.5.2",
"react": "18.2.0",
"react-bootstrap": "0.33.1",
"react-burger-menu": "2.5.2",
"react-circular-progressbar": "1.0.0",
"react-contenteditable": "3.3.7",
"react-copy-to-clipboard": "5.0.1",
"react-country-region-selector": "1.3.0",
"react-custom-scrollbars": "4.2.1",
"react-datepicker": "2.9.6",
"react-dnd": "2.6.0",
"react-dnd-html5-backend": "2.6.0",
"react-dom": "18.2.0",
"react-dropzone": "10.1.5",
"react-gtm-module": "2.0.11",
"react-helmet-async": "1.3.0",
"react-hook-form": "7.6.2",
"react-hotjar": "1.0.11",
"react-image-lightbox": "4.6.0",
"react-image-palette": "^0.2.4",
"react-infinite-scroll-component": "6.1.0",
"react-infinite-scroller": "1.2.4",
"react-intersection-observer": "9.4.1",
"react-intl": "5.24.7",
"react-intl-redux": "2.2.0",
"react-is": "16.7.0",
"react-joyride": "2.3.0",
"react-lazyload": "2.6.2",
"react-loadable": "5.5.0",
"react-markdown": "8.0.1",
"react-masonry-component": "6.2.1",
"react-masonry-css": "1.0.12",
"react-pager": "1.3.3",
"react-pdf": "4.1.0",
"react-popper-tooltip": "2.8.3",
"react-progress-button": "5.1.0",
"react-redux": "7.1.0",
"react-refresh-webpack-plugin": "0.1.0",
"react-responsive": "7.0.0",
"react-router": "5.0.1",
"react-router-dom": "5.0.1",
"react-scroll": "1.7.10",
"react-share": "4.4.0",
"react-singleton-hook": "3.1.1",
"react-slick": "0.23.2",
"react-snow-effect": "1.2.0",
"react-social-kr": "1.1.9",
"react-sticky": "6.0.3",
"react-svg": "10.0.9",
"react-textarea-autosize": "7.1.0",
"react-transition-group": "2.4.0",
"react-use-form-state": "0.13.1",
"react-waypoint": "8.0.3",
"redux": "4.0.1",
"redux-observable": "1.1.0",
"redux-thunk": "2.3.0",
"redux-ui": "0.1.1",
"rehype-raw": "6.1.1",
"remark-gfm": "1.0.0",
"rxjs": "6.5.2",
"rxjs-hooks": "0.5.1",
"scp2": "0.5.0",
"slick-carousel": "1.8.1",
"speed-measure-webpack-plugin": "1.5.0",
"swr": "1.3.0",
"typesafe-actions": "4.4.2",
"use-debounce": "7.0.0",
"use-media": "1.3.0",
"weixin-js-sdk": "1.4.0-test"
},
"devDependencies": {
"@babel/cli": "7.4.4",
"@babel/core": "7.22.5",
"@babel/node": "^7.16.8",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-decorators": "^7.17.8",
"@babel/plugin-proposal-do-expressions": "^7.16.7",
"@babel/plugin-proposal-export-default-from": "^7.16.7",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-runtime": "7.6.2",
"@babel/polyfill": "7.6.0",
"@babel/preset-env": "7.4.5",
"@babel/preset-react": "7.16.7",
"@babel/preset-typescript": "7.8.0",
"@babel/register": "7.4.4",
"@babel/runtime": "7.17.8",
"@compiled/babel-plugin": "0.14.1",
"@compiled/webpack-loader": "0.8.5",
"@dr.pogodin/babel-plugin-react-css-modules": "6.8.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
"@testing-library/jest-dom": "4.2.3",
"@testing-library/react": "9.3.2",
"@types/es6-promise": "3.3.0",
"@types/jest": "24.0.21",
"@types/linkify-it": "2.1.0",
"@types/lodash": "4.14.135",
"@types/mobile-detect": "1.3.4",
"@types/qs": "6.5.3",
"@types/react": "16.8.22",
"@types/react-bootstrap": "0.32.18",
"@types/react-dom": "16.8.4",
"@types/react-infinite-scroller": "1.2.1",
"@types/react-is": "16.5.0",
"@types/react-redux": "7.1.1",
"@types/react-responsive": "3.0.3",
"@types/react-router-dom": "4.3.4",
"@types/react-scroll": "1.5.4",
"@types/react-slick": "0.23.4",
"@types/rx": "4.1.1",
"assets-webpack-plugin": "7.1.1",
"autoprefixer": "10.4.4",
"aws-sdk": "2.639.0",
"babel-loader": "^9.1.2",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"chalk": "2.4.1",
"clean-webpack-plugin": "0.1.19",
"compression-webpack-plugin": "9.2.0",
"connect-history-api-fallback": "1.5.0",
"copy-webpack-plugin": "10.2.4",
"css-loader": "6.7.1",
"css-minimizer-webpack-plugin": "3.4.1",
"eslint": "5.4.0",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-react": "7.11.1",
"eslint-watch": "4.0.2",
"html-webpack-plugin": "5.5.0",
"lint-staged": "9.0.2",
"mini-css-extract-plugin": "2.6.0",
"npm-run-all": "4.1.5",
"optimize-css-assets-webpack-plugin": "5.0.1",
"patch-package": "6.2.0",
"postcss": "8.4.12",
"postcss-loader": "6.2.1",
"postcss-nested": "5.0.6",
"postcss-preset-env": "7.4.3",
"postcss-scss": "4.0.3",
"prettier": "1.14.2",
"prettier-tslint": "0.4.2",
"react-refresh": "0.11.0",
"react-test-renderer": "16.12.0",
"redux-devtools": "3.5.0",
"redux-devtools-extension": "2.13.5",
"s3-deploy": "1.3.0",
"sass": "1.49.9",
"sass-loader": "^10.2.1",
"sharp": "0.30.3",
"style-loader": "3.3.1",
"tailwindcss": "3.2.4",
"terser-webpack-plugin": "2.1.0",
"typescript": "4.6.3",
"webpack": "5.86.0",
"webpack-bundle-analyzer": "3.3.2",
"webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.0",
"webpack-favicons": "1.3.8",
"webpack-merge": "5.8.0",
"webpackbar": "5.0.2"
},
"resolutions": {
"intl-messageformat": "9.11.4"
}
}
home.tsx
import CnyNotificationModal from '@components/common/CnyNotificationModal'
import DottedLine from '@components/common/DottedLine'
import { tooltips } from '@components/common/NewUserTooltips/json'
import { Default, Desktop, Mobile, MobileAndTablet, Tablet } from '@components/common/Responsive'
import ScrollToTopOnMount from '@components/common/ScrollToTopOnMount'
import Nav from '@components/discover/Nav'
import ReviewList from '@components/discover/ReviewList'
import Filters from '@components/discover/Reviews/Filters'
import Banner from '@components/layout/Nav/Intl/Banner'
import { DesktopLogo } from '@components/layout/ResponsiveNavBar'
import WithoutFooter from '@components/layout/WithoutFooter'
import SEO from '@components/SEO'
import { useMyCountry } from '@hooks/useAuth'
import qs from 'qs'
import { useEffect } from 'react'
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import Layout from './Layout'
import NavItems from './NavItems'
import Products from './Products'
import { ShowModalPositions } from '@interfaces/auth'
import './styles.css'
const Hook = ({ country }) => {
useEffect(
() => {
window.scrollTo(0, 0)
},
[country]
)
return null
}
export const Reviews = ({ className }) => {
return (
<div className={`${className} hot-reviews`}>
<div className="hidden-xs">
<Filters />
</div>
<ReviewList
loadingText={<div>No review found.</div>}
showByUser={true}
showAnonymous={true}
/>
</div>
)
}
Reviews.defaultProps = {
className: '',
}
// const Blog = () => 'blog..'
const Home = () => {
const { locationCountryCode: country } = useMyCountry()
const nav = (
<>
<MobileAndTablet>
<Banner />
</MobileAndTablet>
<div className="container" styleName="nav">
<Nav />
</div>
<Default>
<DottedLine className="tw-my-6" />
</Default>
<Mobile>
<DottedLine />
<NavItems country={country} />
</Mobile>
<CnyNotificationModal target="homepage" tooltip={tooltips.GLOBAL_CNY_NOTICE} />
</>
)
return (
<WithoutFooter>
{/*<SEO
title="The Best Way to Shop from China"
description="Baopals is the simplest and most trusted way to shop from Taobao, Tmall and JD in English. Powered by expats in China, shipping worldwide."
/>*/}
<Mobile>
<Switch>
<Route path="/" exact={true} render={() => nav} />
<Route
path="/discover/whatshot"
exact={true}
render={() => <NavItems country={country} />}
/>
</Switch>
</Mobile>
<Default>
<Route path="/" exact={true} render={() => nav} />
<Layout
renderMain={
<Switch>
<Route
path={'*'}
exact={true}
render={prop => {
const query = qs.parse(prop.location.search, { ignoreQueryPrefix: true })
const rest = {
prettyUpImage: false,
containerClassName: '',
category: query.category,
page: +(query.page || 1),
country,
key: `${query.category}:${country}`,
}
return (
<>
<Hook country={country} />
<Desktop>
<Products
{...rest}
scrollTo={ShowModalPositions.DESKTOP}
device="desktop"
/>
</Desktop>
<Tablet>
<Products
{...rest}
scrollTo={ShowModalPositions.TABLET}
device="tablet"
hideDiscount
/>
</Tablet>
</>
)
}}
/>
</Switch>
}
/>
</Default>
<ScrollToTopOnMount />
</WithoutFooter>
)
}
export default Homestyles.css
.wrapper {
@media (min-width: 768px) {
margin-bottom: 50px;
}
@media (max-width: 767px) {
margin: 0 0 50px;
}
}
.main {
padding-top: 20px;
:global {
.hot-reviews {
.list-inline.tw-my-6 {
margin-top: 0 !important;
}
}
.inner {
@media (max-width: 991px) {
padding-top: 0;
}
}
.aside {
border: none;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1px;
left: 190px;
background: #979797;
}
}
.main {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1px;
left: 190px;
background: #979797;
}
}
}
}
.nav {
@media (max-width: 791px) {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}Thank you for including your code 🙇 Could you please include the file that contains the padding-bottom: 150px (or something like paddingBottom: '150px') as well? This is so that I can try to reproduce the issue on my end
noobskies
commented
1 year ago thats the strange part about this, I've gone through the entire codebase and can't find that line along with the other 37 errors
dddlr
commented
1 year ago Hmm there's nothing in the code you've shared that indicates anything wrong to me (at first glance, anyway)
Oh yeah I'd also check for anywhere where you've got 150px inside the padding property (e.g. padding: 20px 30px 150px). If you can find a part of the codebase that uses that, the issue will likely be somewhere in there and you can paste the surrounding code here :) This is because Compiled will take something like padding: 20px 30px 150px and split it into padding-top: 30px, padding-bottom: 150px, etc
Or if your repository happens to be open source, I suggest linking it here too
I'm going to get off work soon for a long weekend, so I'll be checking back here on Tuesday (Australian time)
dddlr
commented
1 year ago Hi @noobskies just checking whether you still needed help?
dddlr
commented
1 year ago I'll assume that the problem has been resolved and will close this for the time being - if you still need help, let me know by reopening this issue and posting a comment here. Thank you! :)
Describe the bug A clear and concise description of what the bug is.
To Reproduce Steps to reproduce the behavior:
Expected behavior A clear and concise description of what you expected to happen.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context Add any other context about the problem here.