Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting An Error When Compiling Scripts using wp-scripts #64446

Closed
LaTableRouge opened this issue Aug 12, 2024 · 9 comments
Closed

Getting An Error When Compiling Scripts using wp-scripts #64446

LaTableRouge opened this issue Aug 12, 2024 · 9 comments
Labels
Needs Testing Needs further testing to be confirmed. [Tool] WP Scripts /packages/scripts

Comments

@LaTableRouge
Copy link

LaTableRouge commented Aug 12, 2024

Hello,

I'm currently writing a plugin with multiple react blocks inside.

Environment info

  • Wordpress Version 6.6.1
  • @wordpress/scripts 28.5.0
  • package.json

Description

Here's how it's organized :
image

For all thoses blocks I use the command: wp-scripts build --webpack-src-dir=blocks/src --output-path=blocks/build

The blocks are registered like so: https://github.com/LaTableRouge/Mappps/blob/experimental/blockcohabitation/includes/blocks/blocks-register.php

Some blocks are using the same leaflet package (this one)

When there was only one block using this package, everything went fine. But as soon as there was two of them using it, I went through an error. If I compile only one block that use this package it works (doesn't matter which one).
Here's the error:

TypeError: L.MarkerClusterGroup is not a constructor
    markerClusterGroup leaflet.markercluster-src.js:1409
    node_modules index.js:11
    useImmutableLeafletElement element.js:13
    usePath path.js:22
    ContainerComponent component.js:6
    hu react-dom.min.js:2
    wo react-dom.min.js:2
    xi react-dom.min.js:2
    bs react-dom.min.js:2
    vs react-dom.min.js:2
    gs react-dom.min.js:2
    as react-dom.min.js:2
    is react-dom.min.js:2
    Hl react-dom.min.js:2
    ws react-dom.min.js:2
    ws react-dom.min.js:2
    ls react-dom.min.js:2
    S react-dom.min.js:2
    T react-dom.min.js:2
    463 react-dom.min.js:2
    t react-dom.min.js:2
    982 react-dom.min.js:2
    t react-dom.min.js:2
    551 react-dom.min.js:2
    t react-dom.min.js:2
    961 react-dom.min.js:2
    t react-dom.min.js:2
    <anonymous> react-dom.min.js:2
    <anonymous> react-dom.min.js:2
react-dom.min.js:2:71400

I don't know if it's a problem from the package in itself, but it seems unlikely. My hypothesis is that is from a lack of scoping from the wp-scripts

I found theses issues that seems to have the same problem, but without success for my problem:

I'm a bit stuck and I didn't found where to put this issue haha.

@janmckell janmckell added the [Tool] WP Scripts /packages/scripts label Aug 13, 2024
@gziolo gziolo added the Needs Testing Needs further testing to be confirmed. label Aug 30, 2024
@miminari
Copy link
Member

@LaTableRouge Thank you for report, but your package.json link is 404 now. Your repo seems to update now. If you clear your issue, please tell us. Or not, please tell your package.json file.

@miminari miminari added the [Status] Needs More Info Follow-up required in order to be actionable. label Sep 10, 2024
@LaTableRouge
Copy link
Author

LaTableRouge commented Sep 11, 2024

@miminari I'm sorry I forgot that Github doesn’t handle links redirection....
I've updated the links on the first comments.
I still have an issue when compiling.

@LaTableRouge
Copy link
Author

I made a separated branch with the error. It's more clean that way. I've edited the first message in this thread to redirect the links to the branch. :)

Copy link

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 28, 2024
@LaTableRouge
Copy link
Author

I did reply and gave more informations.

@github-actions github-actions bot removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 29, 2024
Copy link

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Oct 15, 2024
@LaTableRouge
Copy link
Author

I did reply and gave more informations.

@github-actions github-actions bot removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Oct 16, 2024
@miminari miminari removed the [Status] Needs More Info Follow-up required in order to be actionable. label Oct 17, 2024
@miminari
Copy link
Member

Hi, thank you for sharing.
OK, your package.json is so complex that I would test the simple one for multiple block building.

Steps

npx @wordpress/create-block test-block-bug
cd test-block-bug
  1. Make files for 2 blocks in src dir like below:
├── src
│   ├── block01
│   │   ├── block.json
│   │   ├── edit.js
│   │   ├── editor.scss
│   │   ├── index.js
│   │   ├── save.js
│   │   ├── style.scss
│   │   └── view.js
│   └── block02
│       ├── block.json
│       ├── edit.js
│       ├── editor.scss
│       ├── index.js
│       ├── save.js
│       ├── style.scss
│       └── view.js
  1. Update the title and name of the block.json files like below:

block01/block.json

"name": "create-block/test-block-bug",
"title": "Test Block Bug 01",

block02/block.json

"name": "create-block/test-block-bug2",
"title": "Test Block Bug 02",
  1. Add and change the path to these blocks in the php file like below:
	register_block_type(__DIR__ . '/build/block01/');
	register_block_type(__DIR__ . '/build/block02/');
  1. npm run build

  2. You will get the message like webpack x.x.x compiled successfully in 000 ms

  3. And you will see the blocks in the blocks list
    Image

  4. Add some 3rd party package like recharts

npm install recharts
  1. Update the two edit.js to use the package function like below:
import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
const data = [{ name: "Page A", uv: 400, pv: 2400, amt: 2400 }];

export default function Edit() {
	return (
		<LineChart width={600} height={300} data={data}>
			<Line type="monotone" dataKey="uv" stroke="#8884d8" />
			<CartesianGrid stroke="#ccc" />
			<XAxis dataKey="name" />
			<YAxis />
		</LineChart>
	);
}
  1. Again npm run build and you can get new blocks like below:
    Image

As the docs explained like blew, you might not need to change the build command for building multiple block not customizing the dir.
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#automatic-block-json-detection-and-the-source-code-directory

I did the test by "@wordpress/scripts": "^30.2.0", so you might need to update the version.

I'm sorry that I don't know about the leaflet package very well, you might be better to ask about it in the package repo.
And I feel this is not Gutenberg issue, so would like to close this. But if there is anything I have missed, please feel free to comment.

@LaTableRouge
Copy link
Author

Thanks a lot for your time.
I've done what you said and it works... So after all it's the library that I use that is poorly made and not some scope issue.
I'll try to recontact the author of the library.

Thanks again for your time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Testing Needs further testing to be confirmed. [Tool] WP Scripts /packages/scripts
Projects
None yet
Development

No branches or pull requests

4 participants