Missing development dependencies in frontend_addon

[wesleybl]

My IDE Editor runs eslint on the opened file. When I open the file. When I open the file:

my-package/packages/my-package/src/index.js

the Editor shows the error:

Parsing error: Cannot find module 'babel-preset-razzle'
Require stack:
- /home/user/git/my-package/node_modules/.pnpm/@babel+core@7.26.9/node_modules/@babel/core/lib/config/files/plugins.js
- /home/user/git/my-package/node_modules/.pnpm/@babel+core@7.26.9/node_modules/@babel/core/lib/config/files/index.js
- /home/user/git/my-package/node_modules/.pnpm/@babel+core@7.26.9/node_modules/@babel/core/lib/index.js
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/client.cjs
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/index.cjs
- /home/user/git/my-package/node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc/dist/eslintrc.cjs

Make sure that all the Babel plugins and presets you are using
are defined as dependencies or devDependencies in your package.json
file. It's possible that the missing plugin is loaded by a preset
you are using that forgot to add the plugin to its dependencies: you
can workaround this problem by explicitly adding the missing package
to your top-level package.json.

After adding babel-preset-razzle as a development dependency, I get the error:

Parsing error: Cannot find module 'babel-plugin-react-intl'
Require stack:
- /home/user/git/my-package/node_modules/.pnpm/@babel+core@7.26.9/node_modules/@babel/core/lib/config/files/plugins.js
- /home/user/git/my-package/node_modules/.pnpm/@babel+core@7.26.9/node_modules/@babel/core/lib/config/files/index.js
- /home/user/git/my-package/node_modules/.pnpm/@babel+core@7.26.9/node_modules/@babel/core/lib/index.js
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/client.cjs
- /home/user/git/my-package/node_modules/.pnpm/@babel+eslint-parser@7.22.15_@babel+core@7.26.9_eslint@8.57.1/node_modules/@babel/eslint-parser/lib/index.cjs
- /home/user/git/my-package/node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc/dist/eslintrc.cjs

Make sure that all the Babel plugins and presets you are using
are defined as dependencies or devDependencies in your package.json
file. It's possible that the missing plugin is loaded by a preset
you are using that forgot to add the plugin to its dependencies: you
can workaround this problem by explicitly adding the missing package
to your top-level package.json.

After adding babel-plugin-react-intl as a development dependency, I no longer get errors:

[davisagli]

I can't reproduce this in my editor (VSCode).

What did you do in between running cookieplone and opening the file in your editor? I ran make install to install dependencies, and I can see that I have babel-preset-razzle in node_modules/.pnpm even though I didn't do anything extra to add it.

What version of Volto did you use?

[wesleybl]

I can't reproduce this in my editor (VSCode).

This occurs in Eclipse.

What did you do in between running cookieplone and opening the file in your editor?

I ran make install and opened the package folder in the editor.

I ran make install to install dependencies, and I can see that I have babel-preset-razzle in node_modules/.pnpm even though I didn't do anything extra to add it.

It is in the root node_modules folder, but not in the inner folder under packages (my-package/packages/my-package). It seems that since we have a package.json in the internal folder, it uses the node_modules from there. To make it work, I added the packages in the internal package.json.

What version of Volto did you use?

18.8.2

[davisagli]

It would be helpful if we could find out exactly how Eclipse is running eslint. I wonder if it's running it with the wrong current working directory or something. The eslint configuration is outside the package so adding dependencies to package.json within the add-on package doesn't feel like the right solution.

[wesleybl]

I think it's a babel issue. We have a babel configuration in the internal package:

https://github.com/plone/cookieplone-templates/blob/main/frontend_addon/%7B%7B%20cookiecutter.__folder_name%20%7D%7D/packages/%7B%7B%20cookiecutter.frontend_addon_name%20%7D%7D/babel.config.js

I removed the babel.config.js file and the error no longer occurs, even without the packages it was complaining about before. There is probably some relationship between which node_modules to use and the location of the configuration file.

[davisagli]

@wesleybl const presets = ['razzle']; in babel.config.js is what makes it use babel-preset-razzle, so that makes sense.

@sneridagh Do we need babel.config.js in the add-on or is it left over and supposed to come from volto core somehow instead?

[sneridagh]

@davisagli the file config is ok, not a leftover. That makes i18n extractions work properly.

Eclipse should not be taking into account how pnpm works (not flat node_modules dir) and presume that the dependency should be installed inside the local packages node_modules which is not. In fact is in the root node_modules, since we force that all eslint, prettier and other essential tooling hoist to the upper root level.

Eclipse should not be honoring how the ecosystem works (it should keep looking in parent node_modules).

[wesleybl]

@davisagli @sneridagh I'll open a issue on Eclipse.

But in the meantime, we can have the dependencies in the package. Eclipse doesn't seem to be so wrong. See:

https://babeljs.io/docs/config-files#monorepos
https://babeljs.io/docs/config-files#file-relative-configuration

This isn't the case with Volto, but in other monorepos, each package can have a different configuration file, with different requirements. So it makes sense for each package to declare its dependencies.

And also, having these dependencies won't mess up the package at all.

[wesleybl]

It seems that this error also occurs in vscode, but it is not shown in the editor. If your vscode has the eslint plugin installed, and the packages that are causing the problem are not in the package.json of the package, it does not show the eslint errors. But if you add the packages and install them, it starts to show the eslint errors.

[wesleybl]

Another way I managed to solve this problem was to add the following lines to .npmrc:

public-hoist-pattern[]=babel-plugin-react-intl
public-hoist-pattern[]=babel-preset-razzle

This makes these packages appear in the node_modules of all packages. A symbolic link is created for them. They are not duplicated.

It seems that this is already done with eslint:

https://github.com/plone/cookieplone-templates/blob/main/frontend_addon/%7B%7B%20cookiecutter.__folder_name%20%7D%7D/.npmrc#L1

Can we fix this this way?