Error: Failed to find '~@diplodoc/transform/dist/css/yfm.css'

[spiner2000]

Hello!
This code

 'use client'
import { PageContent } from "@gravity-ui/page-constructor";
import {ContentTransformer, Editor} from "@gravity-ui/page-constructor/editor";
import { useState } from "react";
const EditorPage = () => {
    const [content, setContent] = useState<PageContent>({blocks: [], });
    const transformContent:ContentTransformer = (content: PageContent) => {
        return content  
    }
    return (
        <div>
            
            <Editor content={content} onChange={setContent}/>
        </div>
    )
}

export default EditorPage ;

with deps:

"@gravity-ui/page-constructor": "^5.0.1",
"@gravity-ui/uikit": "^6.2.0",
 "next": "14.1.2",

Give Exception

 ○ Compiling /editor ...
 ⨯ ./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.css
Error: Failed to find '~@diplodoc/transform/dist/css/yfm.css'
  in [
    ./front/node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor
  ]
Import trace for requested module:
./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.css
./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.css
./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.js
./node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/index.js
./node_modules/@gravity-ui/page-constructor/build/esm/editor/containers/Editor/Editor.js
./node_modules/@gravity-ui/page-constructor/build/esm/editor/index.js
./app/editor/page.tsx

Manual install of "@diplodoc/transform": "^4.10.8" does not change anything

[NikitaCG]

Hello! Have you included @import '~@gravity-ui/page-constructor/styles/styles.scss'; in your project?

[spiner2000]

@import '~@gravity-ui/page-constructor/styles/styles.scss
I put this statement into globals.css, but nothing changes.

i also played with

import '@gravity-ui/page-constructor/styles/styles.css

in page.tsx and
@import '@gravity-ui/page-constructor/styles/styles.css'
in css

this error were present in previous major also .

[spiner2000]

I guess something in the way the style is imported.
Because if i do import @gravity-ui/page-constructor/styles/styles.css in layout.tsx
i got Error: Failed to find '~@gravity-ui/uikit/styles/styles.css'
Maybe default netxt.config.js needs something?

[NikitaCG]

I think you need to try our next-app-template with page-constructor - https://github.com/gravity-ui/page-constructor-website-template

[gorgeousvlad]

You need your webpack configured to resolve notations like ~@diplodoc/transform/dist/css/yfm.css inside constructor. If you're using Next.js check @NikitaCG link, there is a working example, otherwise send your project webpack config pls.

[BaltsevichDanil]

Hello! I've got this error too.

I'm using vite.

devDependencies:
...
   "vite": "^5.4.1",
   "vite-plugin-svgr": "^4.2.0"
...
 
 dependencies:
 ...
   "@gravity-ui/components": "^3.10.1",
   "@gravity-ui/i18n": "^1.6.0",
   "@gravity-ui/icons": "^2.11.0",
   "@gravity-ui/navigation": "^2.24.1",
   "@gravity-ui/page-constructor": "^5.27.0",
   "@gravity-ui/uikit": "^6.29.0",
...

I found this workaround in yours templates. And it helps in dev mode.

optimizeDeps: {
  //workaround for the problem https://github.com/vitejs/vite/issues/7719
  extensions: ['.css'],
  esbuildOptions: {
      plugins: [
          (await import('esbuild-sass-plugin')).sassPlugin({
              type: 'style',
          }),
      ],
  },
},

But when I want to build my app, I'am getting the same error:

transforming (289) node_modules/@gravity-ui/uikit/build/esm/hooks/useViewportSize/index.jsUnable to resolve `@import "~@diplodoc/transform/dist/css/yfm.css"` from /Users/.../frontend/node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor
✓ 326 modules transformed.
x Build failed in 419ms
error during build:
[vite:css] [postcss] ENOENT: no such file or directory, open '~@diplodoc/transform/dist/css/yfm.css'
file: /Users/.../frontend/node_modules/@gravity-ui/page-constructor/build/esm/containers/PageConstructor/PageConstructor.css:undefined:NaN

[lpkobamn]

same error

[NikitaCG]

https://github.com/gravity-ui/page-constructor/releases/tag/v5.28.3 does this release not help with this problem? @BaltsevichDanil @lpkobamn

maybe we need to del ~, which version of sass are you using?

[BaltsevichDanil]

@NikitaCG Unfortunately, the new version did not solve the problem. Sass version: "sass": "^1.79.4".

But the problem only occurs when using vite. I migrated to webpack and everything works well there. But I would still like to use vite.

[RealmiRoblox]

@NikitaCG Unfortunately, the new version did not solve the problem. Sass version: "sass": "^1.79.4".

But the problem only occurs when using vite. I migrated to webpack and everything works well there. But I would still like to use vite.

it also occurs on next.js