Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Survey Creator: CSS parsing Issue when using within Next.js 15 and Turbopack [Low Priority] #5

Open
PeterMarinov opened this issue Oct 23, 2024 · 0 comments

Comments

@PeterMarinov
Copy link

Describe the bug
Survey Creator: CSS parsing Issue when using within Next.js 15 and Turbopack bundler.

Steps to reproduce

  1. Checkout https://github.com/surveyjs/surveyjs-nextjs/
  2. Upgrade to Next.js 15 by running npx @next/codemod@canary upgrade latest (command is from the official guide here). In the process select the option to enable turbopack
  3. Install all node modules npm install -f
  4. run npm run dev
  5. Go to http://localhost:3001/creator

Expected behavior
Survey Creator loads without issues

Expected behavior
Build error from the ./node_modules/survey-creator-core/survey-creator-core.css:466:5 blocks rendering the page. It's caused by not supported pseudo selector ::i-block-chrome on line 466 from the survey-creator-core.css file

Screenshots
image

Please complete the following information:

  • Browser: chrome (but happens on all browsers)
  • Browser version: [e.g. 22]
  • JS framework/library: React
  • SurveyJS version: The packages.json is set to "survey-creator-core": "latest". At the time, it resolves to 1.9.131 (also happens on 1.12.7)
  • Device: MacBook

Additional context
This is low priority issue and ;it is not blocking us. Idea is to make you aware of it as you update the sample to Next.js 15. There are 3 workarounds as of now

  1. Disable the turbopack bundler by modifying "dev" script in packages.json from "next dev --turbopack" --> to "next dev"
  2. Go to node "/node_modules/survey-creator-core/survey-creator-core.css:466:5" and delete the ::i-block-chrome pseudo selector - not good for CI
  3. Load the survey-creator-core css from CDN following this workaround ([Turbopack] Parsing css source code failed PaulLeCam/react-leaflet#1122). Url is from https://unpkg.com/survey-creator-core/survey-creator-core.min.css

Tip

Unless, I am missing something, this appears to be a custom css selector, which can be safely removed from the source (https://github.com/surveyjs/survey-creator/blob/8e503b8883c0cfda927d4351e41e1c13af522dac/packages/survey-creator-core/src/components/simulator.scss#L70)

Let me know if I can help with anything

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant