Issue #5089Opened May 2, 2023by davidrhoderick0 reactions

BUG: Error importing codemirror library in SCSS

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 112.0.1

Reproducible demo link

https://github.com/davidrhoderick/grapesjs-test

Describe the bug

How to reproduce the bug?

  1. Follow getting started (you can see the structure I am following with a basic Parcel project with Typescript & SCSS)
  2. When you get to the "Theming" step, you'll get an error trying to import Grapes SCSS.

What is the expected behavior? That if I follow the "Getting started" tutorial, everything works.

What is the current behavior? When I get to the step that should allow me to customize the appearance of the application with SCSS, I get the following error:

@parcel/transformer-sass: expected "{".
   ╷
11 │   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   │                                                ^
   ╵
  node_modules/codemirror/lib/codemirror.js 11:48      @import
  node_modules/grapesjs/src/styles/scss/main.scss 2:9  @import
  src/styles.scss 10:9                                 @import
  src/index.html 2:15                                  root stylesheet

If is necessary to execute some code in order to reproduce the bug, paste it here below:

npm run dev

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (2)

davidrhoderickMay 2, 20230 reactions

Funnily enough, the CSS-based styling works.

artfMay 8, 20230 reactions

Looks like the Parcel transformer is trying to import codemirror/lib/codemirror.js instead of codemirror/lib/codemirror.css on this line:

@import "codemirror/lib/codemirror";

So I'd suggest to open the issue on the related package

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.