netlify-cms-app import failed to resolve with astro's react integration

[JasperDeLanghe]

Running into the following error:

Seems to be related to #34 , but with react() instead of vue() added as integration.
Makes no difference if putting it before or after NetlifyCMS() in the config.
The admin dashboard is working perfectly fine without the react integration and dependencies.

Will provide a cleaned repo to reproduce the issue later.

[JasperDeLanghe]

Here's a link to the repo: astro-netlifycms-react

And a trace of the failed netlify deploy:

8:55:44 PM: $ yarn build
8:55:44 PM: yarn run v1.22.19
8:55:44 PM: $ astro build
8:55:45 PM: 07:55:45 PM [build] output target: static
8:55:45 PM: 07:55:45 PM [build] Collecting build info...
8:55:45 PM: 07:55:45 PM [build] Completed in 9ms.
8:55:45 PM: 07:55:45 PM [build] Building static entrypoints...
8:55:47 PM: 07:55:47 PM [build] Completed in 1.32s.
8:55:47 PM: 
8:55:47 PM:  building client 
8:55:47 PM: [vite]: Rollup failed to resolve import "netlify-cms-app" from "virtual:astro-netlify-cms/user-config".
8:55:47 PM: This is most likely unintended because it can break your application at runtime.
8:55:47 PM: If you do want to externalize this module explicitly add it to
8:55:47 PM: `build.rollupOptions.external`
8:55:47 PM:  error   [vite]: Rollup failed to resolve import "netlify-cms-app" from "virtual:astro-netlify-cms/user-config".
8:55:47 PM:   This is most likely unintended because it can break your application at runtime.
8:55:47 PM:   If you do want to externalize this module explicitly add it to
8:55:47 PM:   `build.rollupOptions.external`
8:55:47 PM:   File:
8:55:47 PM:     /opt/build/repo/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:45832:19
8:55:47 PM:   Code:
8:55:47 PM:       45831 |         if (!importer || !/\?commonjs-external$/.test(importer)) {
8:55:47 PM:     > 45832 |             throw new Error(`[vite]: Rollup failed to resolve import "${id}" from "${importer}".\n` +
8:55:47 PM:             |                   ^
8:55:47 PM:       45833 |                 `This is most likely unintended because it can break your application at runtime.\n` +
8:55:47 PM:       45834 |                 `If you do want to externalize this module explicitly add it to\n` +
8:55:47 PM:       45835 |                 `\`build.rollupOptions.external\``);
8:55:47 PM:     
8:55:47 PM:   Stacktrace:
8:55:47 PM: Error: [vite]: Rollup failed to resolve import "netlify-cms-app" from "virtual:astro-netlify-cms/user-config".
8:55:47 PM: This is most likely unintended because it can break your application at runtime.
8:55:47 PM: If you do want to externalize this module explicitly add it to
8:55:47 PM: `build.rollupOptions.external`
8:55:47 PM:     at onRollupWarning (file:///opt/build/repo/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:45832:19)
8:55:47 PM:     at onwarn (file:///opt/build/repo/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:45603:13)
8:55:47 PM:     at Object.onwarn (file:///opt/build/repo/node_modules/rollup/dist/es/shared/rollup.js:23263:13)
8:55:47 PM:     at ModuleLoader.handleResolveId (file:///opt/build/repo/node_modules/rollup/dist/es/shared/rollup.js:22158:26)
8:55:47 PM:     at file:///opt/build/repo/node_modules/rollup/dist/es/shared/rollup.js:22119:26
8:55:47 PM:     at processTicksAndRejections (node:internal/process/task_queues:96:5)
8:55:47 PM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
8:55:47 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[JasperDeLanghe]

After looking through some source code I found this return [react(), NetlifyCMSIntegration]; at the bottom of the integration index.ts. Seems I don't have to separately add the react integration myself and can just leave it out 🤷‍♂️

My tsx components seem to be working perfectly after leaving it out, rebuilding and serving.

Would be helpful to have this piece of information in the README imo

[danxschz]

I'm getting the exact same error message using astro-netlify-cms version 0.5.0 with the react integration. This is the trace:

[vite] Internal server error: Failed to resolve import "netlify-cms-app" from "virtual:astro-netlify-cms/user-config". Does the file exist?
  Plugin: vite:import-analysis
  File: virtual:astro-netlify-cms/user-config:2:24
  1  |  
  2  |  import * as NCMS from 'netlify-cms-app';
     |                         ^
  3  |  
  4  |  export default {
      at formatError (/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40281:46)
      at TransformContext.error (/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40277:19)
      at normalizeUrl (/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37145:33)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async TransformContext.transform (/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37278:47)
      at async Object.transform (/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40534:30)
      at async loadAndTransform (/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:36921:29)

[delucis]

Thanks @danxschz! Any chance you can share your project or a minimal reproduction, e.g. on StackBlitz?

[danxschz]

Thanks @danxschz! Any chance you can share your project or a minimal reproduction, e.g. on StackBlitz?

https://github.com/danxschz/studio-mndz

[delucis]

Thanks! But it looks like this repo doesn’t have the integration added? Maybe you need to push some local changes?

[danxschz]

Thanks! But it looks like this repo doesn’t have the integration added? Maybe you need to push some local changes?

Yes sorry about that, just pushed the changes

[delucis]

Perfect, thank you. I’m very curious what’s going on. Made my own minimal set-up that didn’t do this — https://stackblitz.com/edit/github-u7myzp?file=astro.config.mjs — so it’s helpful to have your example to test with.

[delucis]

OK, so one quick fix: downgrading to React 17 and installing netlify-cms-app as a direct dependency does seem to fix this:

npm i {,@types/}{react,react-dom}@^17 netlify-cms-app

Don’t understand why this would be necessary in one project and not another but will keep investigating.

[AntGervais]

OK, so one quick fix: downgrading to React 17 and installing netlify-cms-app as a direct dependency does seem to fix this:

npm i {,@types/}{react,react-dom}@^17 netlify-cms-app

Don’t understand why this would be necessary in one project and not another but will keep investigating.

Thank you @delucis, I had the same problem and now it's ok 👌

[zanhk]

For anyone using pnpm and having the same problem, remember to shamefully-hoist packages

// place on .npmrc
shamefully-hoist=true