Add workaround for @emotion packages naming issue
Storybook uses @emotion packages v10 and @wordpress/components
require v11. Storybook works with version 11 but since there were some merges
in @emotion packages we need to set some aliases and also make sure correct versions
are installed on top level in node_modules.
See https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111
This workaround was done based on a workaround applied in the Gutenberg project
bc072fddef
[MAILPOET-3654]
This commit is contained in:
Rostislav Wolny
committed by
Veljko V
Veljko V
parent
3871add5a6
commit
e8a6f5b1ad
@@ -1,14 +1,30 @@
|
||||
const path = require('path');
|
||||
|
||||
const modulesDir = path.join( __dirname, '../node_modules' );
|
||||
console.log('NODE', modulesDir);
|
||||
// Workaround for Emotion 11
|
||||
// https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111
|
||||
const updateEmotionAliases = (config) => ({
|
||||
...config,
|
||||
resolve: {
|
||||
...config.resolve,
|
||||
alias: {
|
||||
...config.resolve.alias,
|
||||
'@emotion/core': path.join(modulesDir, '@emotion/react'),
|
||||
'@emotion/styled': path.join(modulesDir, '@emotion/styled'),
|
||||
'@emotion/styled-base': path.join(modulesDir, '@emotion/styled'),
|
||||
'emotion-theming': path.join(modulesDir, '@emotion/react'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
stories: ['../assets/js/src/**/_stories/*.tsx'],
|
||||
webpackFinal: (config) => ({
|
||||
...config,
|
||||
resolve: {
|
||||
...config.resolve,
|
||||
modules: ['node_modules', '../assets/js/src'],
|
||||
},
|
||||
}),
|
||||
webpackFinal: (config) => {
|
||||
config.resolve.modules = ['node_modules', '../assets/js/src'];
|
||||
return updateEmotionAliases(config);
|
||||
},
|
||||
managerWebpack: updateEmotionAliases,
|
||||
addons: [
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-links',
|
||||
|
||||
194
package-lock.json
generated
194
package-lock.json
generated
@@ -9,6 +9,8 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.14.0",
|
||||
"@babel/runtime-corejs3": "^7.14.0",
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@wordpress/api-fetch": "^5.2.1",
|
||||
"@wordpress/block-editor": "^7.0.1",
|
||||
"@wordpress/block-library": "^5.0.1",
|
||||
@@ -2533,23 +2535,34 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@emotion/styled": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
|
||||
"integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
|
||||
"dev": true,
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
|
||||
"integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
|
||||
"dependencies": {
|
||||
"@emotion/styled-base": "^10.0.27",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@emotion/babel-plugin": "^11.3.0",
|
||||
"@emotion/is-prop-valid": "^1.1.0",
|
||||
"@emotion/serialize": "^1.0.2",
|
||||
"@emotion/utils": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/core": "^10.0.27",
|
||||
"react": ">=16.3.0"
|
||||
"@babel/core": "^7.0.0",
|
||||
"@emotion/react": "^11.0.0-rc.0",
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@babel/core": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/styled-base": {
|
||||
"version": "10.0.30",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.30.tgz",
|
||||
"integrity": "sha512-pjAZxjnDzLQ5F0Wv3DgTLvg8pw4bMSABP9GHDdCaDjZak/8Il5mQRLs15h9AKC95E8QG1NEr11GfHO1SGYV5ZA==",
|
||||
"version": "10.0.31",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
|
||||
"integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
@@ -2562,6 +2575,36 @@
|
||||
"react": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
|
||||
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/styled/node_modules/@emotion/serialize": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
|
||||
"integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
|
||||
"dependencies": {
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@emotion/memoize": "^0.7.4",
|
||||
"@emotion/unitless": "^0.7.5",
|
||||
"@emotion/utils": "^1.0.0",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/styled/node_modules/@emotion/utils": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
|
||||
"integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
|
||||
},
|
||||
"node_modules/@emotion/styled/node_modules/csstype": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
|
||||
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
|
||||
},
|
||||
"node_modules/@emotion/stylis": {
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
|
||||
@@ -6188,6 +6231,20 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@storybook/theming/node_modules/@emotion/styled": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
|
||||
"integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@emotion/styled-base": "^10.0.27",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/core": "^10.0.27",
|
||||
"react": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@storybook/theming/node_modules/resolve-from": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
|
||||
@@ -7845,14 +7902,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@wordpress/components/node_modules/@emotion/is-prop-valid": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
|
||||
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@wordpress/components/node_modules/@emotion/serialize": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
|
||||
@@ -7870,31 +7919,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
|
||||
"integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
|
||||
},
|
||||
"node_modules/@wordpress/components/node_modules/@emotion/styled": {
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
|
||||
"integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@emotion/babel-plugin": "^11.3.0",
|
||||
"@emotion/is-prop-valid": "^1.1.0",
|
||||
"@emotion/serialize": "^1.0.2",
|
||||
"@emotion/utils": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"@emotion/react": "^11.0.0-rc.0",
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@babel/core": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@wordpress/components/node_modules/@emotion/utils": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
|
||||
@@ -33651,19 +33675,53 @@
|
||||
"dev": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
|
||||
"integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
|
||||
"dev": true,
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
|
||||
"integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
|
||||
"requires": {
|
||||
"@emotion/styled-base": "^10.0.27",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@emotion/babel-plugin": "^11.3.0",
|
||||
"@emotion/is-prop-valid": "^1.1.0",
|
||||
"@emotion/serialize": "^1.0.2",
|
||||
"@emotion/utils": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
|
||||
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
|
||||
"requires": {
|
||||
"@emotion/memoize": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"@emotion/serialize": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
|
||||
"integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
|
||||
"requires": {
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@emotion/memoize": "^0.7.4",
|
||||
"@emotion/unitless": "^0.7.5",
|
||||
"@emotion/utils": "^1.0.0",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@emotion/utils": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
|
||||
"integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
|
||||
},
|
||||
"csstype": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
|
||||
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@emotion/styled-base": {
|
||||
"version": "10.0.30",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.30.tgz",
|
||||
"integrity": "sha512-pjAZxjnDzLQ5F0Wv3DgTLvg8pw4bMSABP9GHDdCaDjZak/8Il5mQRLs15h9AKC95E8QG1NEr11GfHO1SGYV5ZA==",
|
||||
"version": "10.0.31",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
|
||||
"integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
@@ -36338,6 +36396,16 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
|
||||
"integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@emotion/styled-base": "^10.0.27",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
}
|
||||
},
|
||||
"resolve-from": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
|
||||
@@ -37725,14 +37793,6 @@
|
||||
"@emotion/utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
|
||||
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
|
||||
"requires": {
|
||||
"@emotion/memoize": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"@emotion/serialize": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
|
||||
@@ -37750,18 +37810,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
|
||||
"integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
|
||||
"integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@emotion/babel-plugin": "^11.3.0",
|
||||
"@emotion/is-prop-valid": "^1.1.0",
|
||||
"@emotion/serialize": "^1.0.2",
|
||||
"@emotion/utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@emotion/utils": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
|
||||
|
||||
@@ -38,6 +38,8 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.14.0",
|
||||
"@babel/runtime-corejs3": "^7.14.0",
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@wordpress/api-fetch": "^5.2.1",
|
||||
"@wordpress/block-editor": "^7.0.1",
|
||||
"@wordpress/block-library": "^5.0.1",
|
||||
|
||||
Reference in New Issue
Block a user