Could not resolve !!raw-loader!prismjs

Question

Could not resolve !!raw-loader!prismjs

moosubb4 opened this issue 8 months ago · 4 comments

Describe the bug

before I migrate project builder tools from craco to Vite react-prism-editor it work well but when change to Vite I got problem

node_modules/react-prism-editor/lib/getPrismSource.js
cannot found path from !!raw-loader!

error when building and I try to config optimizeDeps.esbuildOptions.exclude

it build find but I got error again

Reproduction

https://stackblitz.com/edit/vitejs-vite-yrbe4u

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.4
    CPU: (8) x64 Apple M2
    Memory: 32.22 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.11.0 - ~/Library/pnpm/node
    Yarn: 1.22.22 - ~/Work/connect-x-front/node_modules/.bin/yarn
    npm: 8.19.2 - ~/Library/pnpm/npm
    pnpm: 7.13.5 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Safari: 17.4
  npmPackages:
    @vitejs/plugin-legacy: ^5.3.2 => 5.3.2 
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.0.8 => 5.2.10

Used Package Manager

yarn

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Answer 1 · 2024-04-23T08:12:34.000Z

I don't know what is this syntax but it's not standard at all and probably something webpack only. Did you look for people having the same issue on the lib issues?

Answer 2 · 2024-04-23T15:27:10.000Z

I don't know what is this syntax but it's not standard at all and probably something webpack only. Did you look for people having the same issue on the lib issues?

yep but not found anything, I think the problem is caused by when pre-bundling !!raw-loader!prism not building

Answer 3 · 2024-04-23T16:23:51.000Z

Pre-bundling or not, the lib source code contains import that contains webpack only import style. You need to ask the library to update their code to use esm or cjs import and ask user to load the CSS on their own (using esm/cjs import for CSS would work in Vite but I would not recommend it and let users have more control on how they bundle the JS and the CSS part)

Answer 4 · 2024-04-24T07:40:37.000Z

Pre-bundling or not, the lib source code contains import that contains webpack only import style. You need to ask the library to update their code to use esm or cjs import and ask user to load the CSS on their own (using esm/cjs import for CSS would work in Vite but I would not recommend it and let users have more control on how they bundle the JS and the CSS part)

now I change lib to react-ace it work well
and react-prism-editor is no longer supported thanks guys