Create a new theme - failed

ranga-tolapi commented 3 years ago

Creation of a new theme is failing

Description

Expected Behavior

Actual Behavior

NestedError: Cannot copy `preview/`: the file doesn't exist
    at C:\Users\rt89280\AppData\Roaming\npm\node_modules\@arcgis\cli\node_modules\cpy\index.js:96:10
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  nested: undefined,
  name: 'CpyError'

Possible Fix

Steps to Reproduce

arcgis styles create my-custom-theme

Context

Your Environment

Version used: 4.19.0
Browser Name and version: N.A.
Operating System and version (desktop or mobile): Microsoft Windows 10 Pro (laptop)
Link to your project if available:

ranga-tolapi commented 3 years ago

Any update on this issue please.

@jcfranco

collarch commented 3 years ago

I have the same issue by the way, looking for a solution!

jcfranco commented 3 years ago

Apologies for the delay. I'll look into this next week.

mikael-mansson commented 3 years ago

Would highly appreciate this update @jcfranco

instantgis commented 2 years ago

I needed this in a hurry! So I debugged through the code and fond a work around/ugly hack that may work for others too... Copy folder preview here and its contents (index.html) to .arcgis-js-cli-styles where the base styles are copied by the tool in the target project. You will still have a problem with import @esri/calcite-components/dist/calcite/calcite in _core.scss - not found! npm install --save @esri/calcite-components Then copy @esri/calcite-components from node_modules to .arcgis-js-cli-styles/base Now you can preview and play

Here are the exact steps...

D:\Projects\Verizon\styling\verizon-theme>arcgis styles create verizon
copying base
copying examples
copying preview file
arcgis styles create [theme]

Create a custom theme

Positionals:
  theme  the name of the theme to create   [string] [default: "my-custom-theme"]

Options:
      --version        Show version number                             [boolean]
  -e, --with-examples  when specified, the created theme will include examples
                       from the API                                    [boolean]
  -b, --with-base      when specified, the created theme will include base files
                       for local overrides (advanced)                  [boolean]
  -f, --force          overwrites a theme if it already exists         [boolean]
  -h, --help           Show help                                       [boolean]

NestedError: Cannot copy `preview/`: the file doesn't exist
    at C:\Users\alain\AppData\Roaming\npm\node_modules\@arcgis\cli\node_modules\cpy\index.js:96:10
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  nested: undefined,
  name: 'CpyError'
}

Bombs out no joy right?

D:\Projects\Verizon\styling\verizon-theme>arcgis styles preview verizon no available themes to preview, use the create command to create a theme

No previews either because it bombed! Relax fear not ... copy preview folder as indicated above and run it again.

D:\Projects\Verizon\styling\verizon-theme>arcgis styles preview verizon
compiling verizon
failed to build theme Error: Can't find stylesheet to import.
   ╷
81 │ @import "@esri/calcite-components/dist/calcite/calcite";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  .arcgis-js-cli-styles\base\_core.scss 81:9  @import
  verizon\main.scss 9:9                       root stylesheet

Now its missing @esri/calcite-components/dist/calcite/calcite

So npm install it "somewhere" and plop it in as indicated above.

And now....

D:\Projects\Verizon\styling\verizon-theme>arcgis styles preview verizon
compiling verizon
compiled theme successfully
launching preview, use CTRL+C to terminate
[Browsersync] Access URLs:
 ---------------------------------------------
       Local: http://localhost:3000/preview
    External: http://172.21.144.1:3000/preview
 ---------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------------
[Browsersync] Serving files from: D:\Projects\Verizon\styling\verizon-theme\.arcgis-js-cli-styles
[Browsersync] Watching files...

Yeah, joy :)

instantgis commented 2 years ago

Its failing to copy preview here in src/commands/styles/scaffold.ts

await cpy('preview/', buildPath(`${workspacePath}/<preview>`, dirs), {
    cwd: buildPath(`<dirname>/../../`, dirs),
});

No idea why. Because of the trailing / on cpy ?

ranga-tolapi commented 2 years ago

I have found a workaround 😊

Step-1: (Need to perform only one time)

Copy preview folder from %AppData%\npm\node_modules\@arcgis\cli\dist\ to %AppData%\npm\node_modules\@arcgis\cli\

Step-2: (Need to perform on each new style)

npm install --save @esri/calcite-components
copy @esri/calcite-components folder from node_modules to .arcgis-js-cli-styles\base

jcfranco commented 2 years ago

I finally had some time and submitted a PR for this. I'm sorry it took so long to get to it.

Thank you all for sharing your workarounds and additional error info, it was most helpful.

jcfranco commented 2 years ago

Installed. This should be available in the next release. cc @odoe

claesjs commented 2 years ago

@jcfranco Do you have an ETA on the next release?

odoe commented 2 years ago

i'll do a patch update later today

ranga-tolapi commented 2 years ago

Issue persist with version 4.22.1

odoe commented 2 years ago

Thanks, we'll need to some debugging on Windows, thanks.

claesjs commented 2 years ago

I'm getting the same error on Mac, arcgis version 4.22.1.

The problem seems to be that arcgis-js-api is located on the same level as @arcgis, i.e. in node_modules. If I read the log output correctly is seems like @arcgis looks for arcgis-js-api in its own node_modules directory.

sfabijanski commented 2 years ago

I'm on Linux (Fedora 35), with version 4.23.0 of the CLI tool. Using Node v16.14.2. I just experienced the missing preview copy error mentioned above.

arcgis styles create my-theme -e

Tlepel commented 1 year ago

I tried to find why the second fault , the failed import @import "@esri/calcite-components/dist/calcite/calcite"; didn't work, and I found out that changing it to @import "@esri/calcite-components/dist/calcite/calcite.css"; actually solved that part of the problem.

andygup commented 9 months ago

Closing this issue in preparation for deprecation of the library.

Esri / arcgis-js-cli