Avoid emotion/react dependency

[alexfreixa]

Describe your question

Hello!

Im using your "Image" component for my block creations which is working so good!

Now I'm having a small issue, related to @emotion/react dependecy that @10up/block-components is using.

I was creating multiple blocks and I suddendly realized I'm having more alert messages like this, all the same:

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

The more blocks I create, the more messages like these accumulate.
This happens after creating my block folders in the "src" folder and doing the "npm run build".

Any idea how can I fix this and only load this dependency once? Sorry if this is not the right place for this question, maybe it's not related at all. I'm a newbie in custom block themes creation.

This is what I see when I run: npm ls @emotion/react

@10up/[email protected]
├── @emotion/[email protected]
└─┬ @emotion/[email protected]
└── @emotion/[email protected] deduped

This is what I have in my package-lock.json, where "@emotion/react" is called many times and different versions. (I've deleted some json parts for this question)

"node_modules/@10up/block-components": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/@10up/block-components/-/block-components-1.18.1.tgz", "integrity": "sha512-ZglHvEdgt6OoutAstUzPP2JombTy+wc9ZKTB1AsEWvs8sAMeYsOvy98hJlps42zl0UKtUlwFS/Ut27PMzC3t5g==", "dependencies": { ... "@emotion/react": "^11.10.5", ... } }

Here too:

"node_modules/@10up/block-components": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/@10up/block-components/-/block-components-1.18.1.tgz", "integrity": "sha512-ZglHvEdgt6OoutAstUzPP2JombTy+wc9ZKTB1AsEWvs8sAMeYsOvy98hJlps42zl0UKtUlwFS/Ut27PMzC3t5g==", "dependencies": { ... "@emotion/react": "^11.10.5", ... } }

And finally here too:

"node_modules/@emotion/react": { "version": "11.11.4", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", }

[alexfreixa]

I just fixed it.

When creating a new block, in my index.js, I had an error alert that said:

Parsing error: 'import' and 'export' may appear only with 'sourceType: module'eslint

So I added "sourceType": "module" to my .eslintrc file:

"parserOptions": {
				"ecmaVersion": "latest",
				"sourceType": "module"
			}

I don't have the duplicated message alert.