Create Plugin: Bad baseUrl path in webpack configuration

[beppemarazzi]

I'm having some troubles trying to compile a plugin in a windows environment

After some digging i spotted out this line: IMHO it's incorrect

https://github.com/grafana/plugin-tools/blob/8516d078704c200b73d4b700d83a0e2bf2efca61/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts#L87

in fact the expression path.resolve(__dirname, 'src') translates to absolute/path/to/plugin/.config/webpack/src my issue is that this directory does not exist and compiling on windows platform gives an error:

Error: failed to handle: called `Result::unwrap()` on an `Err` value: failed to canonicalize jsc.baseUrl(`C:\path\to\plugin\.config\webpack\src`)
This is required on Windows because of UNC path.

i don't know details but IMHO the right intended configuration may be something like this:

baseUrl: path.resolve(process.cwd(), SOURCE_DIR),

[jackw]

@beppemarazzi many thanks for taking the time to open this issue and for the associated pull request.

the expression path.resolve(__dirname, 'src') translates to absolute/path/to/plugin/.config/webpack/src my issue is that this directory does not exist

This does indeed seem incorrect and should point to the src path as you're suggesting.

I'm having some troubles trying to compile a plugin in a windows environment

Please note that we don't actually support Windows directly. Only Windows with WSL is supported. Could you provide futher information about the windows environment you're developing the plugin in please?

[beppemarazzi]

Please note that we don't actually support Windows directly. Only Windows with WSL is supported. Could you provide futher information about the windows environment you're developing the plugin in please?

I know Windows is not directly supported: in fact the "scaffolding" step (i.e. npx @grafana/create-plugin@latest) doesn't work in Windows (*) "native" mode but only with wsl (i'm actually using wsl2 with Ubuntu 20.04.5 LTS)

But i discovered that once the project is created, the commands npm install, npm run build and npm run dev are working as expected also in windows native mode (except the issue reported above with webpack.config.ts)

Some info about my environment (let me know if you need other details...):

• Windows 10 21H1 (build SO 19043.2364)
• PowerShell core (aka pwsh) v 7.4.1
• node --version => 20.10.0
• npm --v => 10.2.3

(*) trying to use npx @grafana/create-plugin@latest directly on windows gives this output:

λ  npx @grafana/create-plugin@latest
Unsupported operating system 'Windows' detected. Please use WSL with create-plugin. For more info visit: https://grafana.com/developers/plugin-tools/troubleshooting#i-am-getting-unsupported-operating-system-windows-detected-please-use-wsl-with-create-plugin

... BUT ... i tried to bypass this line https://github.com/grafana/plugin-tools/blob/ad3fc132a981dc9f6372f55c942e21a9444a2e83/packages/create-plugin/src/bin/run.ts#L9 and all seems to work as expected:

λ  npx @grafana/create-plugin@latest
√ What is going to be the name of your plugin? · pippo
√ What is the organization name of your plugin? · xx
√ How would you describe your plugin? ·
√ What type of plugin would you like? · app
√ Do you want a backend part of your plugin? (y/N) · false
√ Do you want to add Github CI and Release workflows? (y/N) · false
√ Do you want to add a Github workflow for automatically checking "Grafana API compatibility" on PRs? (y/N) · false
✔︎ ++ C:\Devel\test\xx-pippo-app\README.md
✔︎ ++ C:\Devel\test\xx-pippo-app\tests\fixtures.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\tests\appNavigation.spec.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\tests\appConfig.spec.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\src\plugin.json
✔︎ ++ C:\Devel\test\xx-pippo-app\src\module.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\src\constants.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\src\utils\utils.routing.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\src\pages\PageTwo.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\pages\PageThree.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\pages\PageOne.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\pages\PageFour.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\pages\index.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\testIds.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\AppConfig\index.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\AppConfig\AppConfig.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\AppConfig\AppConfig.test.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\App\index.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\App\App.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\src\components\App\App.test.tsx
✔︎ ++ C:\Devel\test\xx-pippo-app\provisioning\plugins\README.md
✔︎ ++ C:\Devel\test\xx-pippo-app\provisioning\plugins\apps.yaml
✔︎ ++ C:\Devel\test\xx-pippo-app\package.json
✔︎ ++ C:\Devel\test\xx-pippo-app\.eslintrc
✔︎ ++ C:\Devel\test\xx-pippo-app\tsconfig.json
✔︎ ++ C:\Devel\test\xx-pippo-app\playwright.config.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\LICENSE
✔︎ ++ C:\Devel\test\xx-pippo-app\jest.config.js
✔︎ ++ C:\Devel\test\xx-pippo-app\jest-setup.js
✔︎ ++ C:\Devel\test\xx-pippo-app\.gitignore
✔︎ ++ C:\Devel\test\xx-pippo-app\docker-compose.yaml
✔︎ ++ C:\Devel\test\xx-pippo-app\CHANGELOG.md
✔︎ ++ C:\Devel\test\xx-pippo-app\.prettierrc.js
✔︎ ++ C:\Devel\test\xx-pippo-app\.nvmrc
✔︎ ++ C:\Devel\test\xx-pippo-app\.cprc.json
✔︎ ++ C:\Devel\test\xx-pippo-app\src\README.md
✔︎ ++ C:\Devel\test\xx-pippo-app\src\img\logo.svg
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\.eslintrc
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\tsconfig.json
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\README.md
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\jest.config.js
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\jest-setup.js
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\entrypoint.sh
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\Dockerfile
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\.prettierrc.js
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\.cprc.json
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\webpack\webpack.config.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\webpack\utils.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\webpack\constants.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\types\custom.d.ts
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\supervisord\supervisord.conf
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\jest\utils.js
✔︎ ++ C:\Devel\test\xx-pippo-app\.config\jest\mocks\react-inlinesvg.tsx
✔︎ Successfully ran prettier against new plugin.
# Congratulations on scaffolding a Grafana app plugin! �

## What's next?

Run the following commands to get started:

    * cd ./xx-pippo-app
    * npm install to install frontend dependencies.
    * npm exec playwright install chromium to install e2e test dependencies.
    * npm run dev to build (and watch) the plugin frontend code.
    * docker-compose up to start a grafana development server.
    * Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin.

Note: We strongly recommend creating a new Git repository by running git init in ./xx-pippo-app before continuing.

    * Learn more about Grafana Plugin Development at https://grafana.com/developers/plugin-tools

[sunker]

That is useful information @beppemarazzi, thank you! We're going to discuss whether to remove this condition from the code and make Windows an officially supported platform.

I'm going to merge your PR. Thanks again for contributing!

[grafana-plugins-platform-bot[bot]]

:rocket: Issue was released in @grafana/create-plugin@4.11.3 :rocket:

[grafana-plugins-platform-bot[bot]]

:rocket: Issue was released in @grafana/create-plugin@4.11.3 :rocket:

[beppemarazzi]

@jackw @sunker

That is useful information @beppemarazzi, thank you! We're going to discuss whether to remove this condition from the code and make Windows an officially supported platform.

I'm going to merge your PR. Thanks again for contributing!

First of all: many thanks to you: my negligible contribution is the minimal I've to give back to you as a OSS user in the OSS spirit!!!

I'm replying here to your statement about supporting windows: just for joke i tried to apply the just released 4.11.3 updates using a windows power shell: npx @grafana/create-plugin@latest migrate

some files (i.e. packages.json were correctly updated, some others (i.e. .config\webpack\webpack.config.ts) no. Digging few minutes, i spotted out this point: https://github.com/grafana/plugin-tools/blob/f40350d6158ef15563f72cf491e2b9eb3eceea15/packages/create-plugin/src/utils/utils.templates.ts#L56-L58

where you are stripping out the path separator(s) at the beginning... my quick-and-dirty fix for windows i applied here is something like this:

return file.replace(TEMPLATE_PATHS.common, '').replace(TEMPLATE_PATHS[pluginType], '').replace(/^\/+/, '').replace(/^\\+/, '');

instead of

return file.replace(TEMPLATE_PATHS.common, '').replace(TEMPLATE_PATHS[pluginType], '').replace(/^\/+/, '');

after this change also npx @grafana/create-plugin@latest migrate seems to work on windows (at least it worked on my use case...)

Thanks again

[sunker]

Okay! Would you be able to raise yet another PR with the fix above?

[sunker]

Actually, let's not add any Windows specific code now. We're going to discuss adding support for Windows soon, but until it's best to not make any changes.

Thanks again though, your feedback is helpful!

[beppemarazzi]

@sunker ok. So i don't proceed with PR... But if you want to take a look, it's my fork diff: https://github.com/grafana/plugin-tools/compare/d1cbc4cabf65147cf...beppemarazzi:plugin-tools:main