wp-scripts start used on block plugin conflicting with theme

[fabio-blanco]

Description

Hello,

I was following the tutorial on Block Editor handbook and I had successfully created a plugin named "blocks-test" in a plugins folder from a test WordPress installation in my Ubuntu LAMP.
So I have made the attribute changes in the source code as instructed in the link above and when I was trying to run npm run start command, it seems that the wp-scripts conflicted with one of my previously installed themes (kadence). This theme was inactive, the active theme was another one (Astra).
See the error message:

npm run start

> blocks-test@0.1.0 start /home/me/projetos_idea/php/wordpresstest/wp-content/plugins/blocks-test
> wp-scripts start

<i> [LiveReloadPlugin] Live Reload listening on port 35729
assets by path *.css 1.93 KiB
  asset style-index.css 1020 bytes [emitted] (name: style-index) (id hint: style) 1 related asset
  asset index.css 955 bytes [emitted] (name: index) 1 related asset
asset index.js 19.3 KiB [emitted] (name: index) 1 related asset
asset index.asset.php 150 bytes [emitted] [compared for emit] (name: index)
Entrypoint index 21.4 KiB (15.7 KiB) = style-index.css 1020 bytes index.css 955 bytes index.js 19.3 KiB index.asset.php 150 bytes 3 auxiliary assets
runtime modules 5.47 KiB 14 modules
orphan modules 5.03 KiB [orphan] 4 modules
built modules 4.99 KiB (javascript) 470 bytes (css/mini-extract) [built]
  cacheable modules 4.82 KiB (javascript) 470 bytes (css/mini-extract)
    javascript modules 4.82 KiB
      modules by path ./src/ 3.46 KiB 5 modules
      modules by path ../../themes/kadence/inc/customizer/react/src/text/*.js 1.36 KiB 2 modules
    css modules 470 bytes
      css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/style.scss 266 bytes [built] [code generated]
      css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/editor.scss 204 bytes [built] [code generated]
  external ["wp","blocks"] 42 bytes [built] [code generated]
  external ["wp","element"] 42 bytes [built] [code generated]
  external ["wp","i18n"] 42 bytes [built] [code generated]
  external ["wp","blockEditor"] 42 bytes [built] [code generated]

ERROR in ../../themes/kadence/inc/customizer/react/src/text/text-component.js 2:0-35
Module not found: Error: Can't resolve 'prop-types' in '/home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/customizer/react/src/text'
resolve 'prop-types' in '/home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/customizer/react/src/text'
  Parsed request is a module
  using description file: /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/package.json (relative path: ./inc/customizer/react/src/text)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/customizer/react/src/text/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/customizer/react/src/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/customizer/react/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/customizer/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/inc/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/kadence/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/themes/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/wp-content/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/wordpresstest/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/php/node_modules doesn't exist or is not a directory
      /home/me/projetos_idea/node_modules doesn't exist or is not a directory
      /home/me/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ../../themes/kadence/inc/customizer/react/src/text/control.js 2:0-48 6:34-47
 @ ./src/edit.js 25:0-92 40:61-72
 @ ./src/index.js 20:0-26 32:8-12

webpack 5.64.1 compiled with 1 error in 864 ms

Step-by-step reproduction instructions

1. Install The last available WordPress (5.8.2) in a working LAMP stack (in my case, it is a public_html directory from a home dir and I've made a symbolic link to the directory where my project actually is)
2. See if it is running, ok.
3. Install Kadence theme but don't activate it. (As it seems, this theme has a webpack.config.js file that is been distributed with it)
4. Create the blocks plugin by running the command mentioned on the Block Editor Handbook tutorial:

cd /home/me/projetos_idea/php/wordpresstest/wp-content/plugins
npx @wordpress/create-block blocks-test

5. Activate the new generate blocks-test plugin on the WordPress admin.
6. Try to run the wp-scripts start script:

cd blocks-test
npm run start

7. The error should be printed in the console.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.8.2, Default Gutemberg version, The active theme was Astra.
• Ubuntu 20.04 with lamp installed by apt using the task package lamp-server^

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[fabio-blanco]

I think that the problem was caused by my IDE importing the TextControl from the Kadence Theme. The tutorial didn't mention that this control is not on the package dependencies and should be installed.

[fabio-blanco]

I have solved the problem removing the wrong TextControl import from the file edit.js file and running this on the console to install the missing dependency:

npm install @wordpress/components --save

Note: This information is present on the Block Editor Handbook but just on the "References Guide" Chapter. In the "Create a Block Tutorial" on the "Getting Started" chapter this information is missing.