Cannot install Analog with v15 template.

VentGrey commented 1 year ago

Please provide the environment you discovered this bug in.

I used the cli tool. Ran the command npm create analog@latest and got an error in the install section.

Which area/package is the issue in?

create-analog

Description

The latest Analog installer fails at starting a new project if the v15 template is used. I don't know if this is a duplicate of #188 or a new bug.

Please provide the exception or error you saw

Ok to proceed? (y) y
✔ Project name: … myapp
✔ Select a template: › Analog
✔ Select a variant: › angular-v15
...
Done. Now run:
  cd myapp
  npm install
  npm run dev
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: myapp@0.0.0
npm ERR! Found: vite@4.0.4
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.2.3" from @nrwl/vite@15.3.3
npm ERR! node_modules/@nrwl/vite
npm ERR!   dev @nrwl/vite@"~15.3.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/ventgrey/.npm/_logs/2023-01-08T03_50_26_978Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ventgrey/.npm/_logs/2023-01-08T03_50_26_978Z-debug-0.log


### Other information

The complete log of `/home/ventgrey/.npm/_logs/2023-01-08T03_50_26_978Z-debug-0.log` is:



### I would be willing to submit a PR to fix this issue

- [X] Yes
- [X] No

Yberion commented 1 year ago

Hello, you need to use npm install --legacy-peer-deps instead of npm install. There's a version mismatch between vite and @nrwl/vite.

VentGrey commented 1 year ago

Thanks for your response! :heart:

The workaround works on dependencies install but fails at build/dev with the following error. :disappointed:

At build

[vite]: Rollup failed to resolve import "marked" from "/home/ventgrey/myapp/node_modules/@analogjs/content/fesm2015/analogjs-content.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
An unhandled exception occurred: [vite]: Rollup failed to resolve import "marked" from "/home/ventgrey/myapp/node_modules/@analogjs/content/fesm2015/analogjs-content.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
See "/tmp/ng-84LjZm/angular-errors.log" for further details.

At Dev

The '@analogjs/platform' successfully started.
The server endpoints are accessible under the "/api"
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
✘ [ERROR] Could not resolve "marked"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:9:23:
      9 │ import { marked } from 'marked';
        ╵                        ~~~~~~~~

  You can mark the path "marked" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "prismjs"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:10:7:
      10 │ import 'prismjs';
         ╵        ~~~~~~~~~

  You can mark the path "prismjs" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "prismjs/plugins/toolbar/prism-toolbar"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:11:7:
      11 │ import 'prismjs/plugins/toolbar/prism-toolbar';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/plugins/toolbar/prism-toolbar" as external to
  exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:12:7:
      12 │ import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path
  "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard" as external to
  exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/components/prism-bash"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:13:7:
      13 │ import 'prismjs/components/prism-bash';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/components/prism-bash" as external to exclude
  it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/components/prism-css"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:14:7:
      14 │ import 'prismjs/components/prism-css';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/components/prism-css" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/components/prism-javascript"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:15:7:
      15 │ import 'prismjs/components/prism-javascript';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/components/prism-javascript" as external to
  exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/components/prism-json"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:16:7:
      16 │ import 'prismjs/components/prism-json';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/components/prism-json" as external to exclude
  it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/components/prism-markup"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:17:7:
      17 │ import 'prismjs/components/prism-markup';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/components/prism-markup" as external to exclude
  it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "prismjs/components/prism-typescript"

    node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:18:7:
      18 │ import 'prismjs/components/prism-typescript';
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "prismjs/components/prism-typescript" as external to
  exclude it from the bundle, which will remove this error.

/home/ventgrey/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:1604
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 10 errors:
node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:9:23: ERROR: Could not resolve "marked"
node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:10:7: ERROR: Could not resolve "prismjs"
node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:11:7: ERROR: Could not resolve "prismjs/plugins/toolbar/prism-toolbar"
node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:12:7: ERROR: Could not resolve "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard"
node_modules/@analogjs/content/fesm2015/analogjs-content.mjs:13:7: ERROR: Could not resolve "prismjs/components/prism-bash"
...
    at failureErrorWithLog (/home/ventgrey/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:1604:15)
    at /home/ventgrey/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:1056:28
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 23,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 8,
        line: 9,
        lineText: "import { marked } from 'marked';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "marked" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "marked"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 9,
        line: 10,
        lineText: "import 'prismjs';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 39,
        line: 11,
        lineText: "import 'prismjs/plugins/toolbar/prism-toolbar';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/plugins/toolbar/prism-toolbar" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/plugins/toolbar/prism-toolbar"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 59,
        line: 12,
        lineText: "import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 31,
        line: 13,
        lineText: "import 'prismjs/components/prism-bash';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/components/prism-bash" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/components/prism-bash"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 30,
        line: 14,
        lineText: "import 'prismjs/components/prism-css';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/components/prism-css" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/components/prism-css"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 37,
        line: 15,
        lineText: "import 'prismjs/components/prism-javascript';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/components/prism-javascript" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/components/prism-javascript"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 31,
        line: 16,
        lineText: "import 'prismjs/components/prism-json';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/components/prism-json" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/components/prism-json"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 33,
        line: 17,
        lineText: "import 'prismjs/components/prism-markup';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/components/prism-markup" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/components/prism-markup"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@analogjs/content/fesm2015/analogjs-content.mjs',
        length: 37,
        line: 18,
        lineText: "import 'prismjs/components/prism-typescript';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "prismjs/components/prism-typescript" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "prismjs/components/prism-typescript"'
    }
  ],
  warnings: []
}

Node.js v18.12.1

brandonroberts commented 1 year ago

@VentGrey that issue is fixed, just not in the latest release. As a temp workaround, in the vite.config.ts add

optimizeDependencies : {
  exclude: ['@analogjs/router']
}

VentGrey commented 1 year ago

Didn't know that :sweat_smile: should I close this then? :thinking:

brandonroberts commented 1 year ago

You can leave it open. I'll close it with the next release

brandonroberts commented 1 year ago

Fix released in @analogjs/platform 0.1.0-beta.8

analogjs / analog