Docs: IE11 example #1327
Docs: IE11 example #1327
Conversation
|
@sapegin do you want me to add FAQ section in addition to example or instead? |
|
Instead, I think it would be enough and will be easier to explain how it works and why.
Artem Sapegin, sapegin.me
…On 9. Apr 2019, 11:48 +0200, Vladislav Shkodin ***@***.***>, wrote:
@sapegin do you want me to add FAQ section in addition to example or instead?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
I ran a build on @smashercosmo's branch by running node lib/bin/styleguidist.js server --config examples/ie11/styleguide.config.jsThis build throws the following compiler warnings and It does not seem the site is served( irrespective of browser). Am I missing something? cause it seems the warning and the IE11 issue may be related and maybe the target files from |
- Prepend a specific loader to support IE11 to `webpack.config.module.rules` - Set the babel config option in the loader rules to avoid conflicting changes with complex babel-config files. This also works with `.babelrc.js` - This handles cases for webpack nested rules. Ref: https://webpack.js.org/configuration/module/#nested-rules [Ref styleguidist#1327]
|
I could make the example by @smashercosmo work! The initial issue I came across turned out to be related to npm and how it dedupes packages. A few other scenarios I came across while trying to make it work for my project:
FWIW: Based on @smashercosmo findings, here is the config that worked for me const TRANSFORMS_FOR_IE11 = {
test: /\.jsx?$/,
include: new RegExp(
`node_modules/(?=(${[
// ref: https://github.com/styleguidist/react-styleguidist/pull/1327
'acorn-jsx',
'estree-walker',
'regexpu-core',
'unicode-match-property-ecmascript',
'unicode-match-property-value-ecmascript',
'react-dev-utils',
'ansi-styles',
'ansi-regex',
'chalk',
'strip-ansi'
].join('|')})/).*`
),
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
ie: "11"
}
}
]
]
}
}
};
webpackConfig.module.rules = [
TRANSFORMS_FOR_IE11,
...webpackConfig.module.rules
]; |
|
@abhishekdev Using react-styleguidist@9.1.7, got IE error and ur code works for me. |
|
I also had to add |
ghost
mentioned this pull request
|
Could this be included by default in the configuration so everyone use a styleguidist compatible with IE11? |
|
@kopax unfortunately it can't be included by default. because it will break frequently. any dependency update can result in new error in IE |
|
Then what's the point? You will redirect IE11 user to a IE11 specific site? |
|
@kopax sorry, didn't understand. The reason why styleguidist doesn't work in IE11 is that it doesn't transpile its dependencies. And sometimes these dependencies contain non-ie-compatible code (like arrow functions). Currently we know the list of these dependencies for the latest styleguidist, so we can transpile them explicitly. But it might break at any moment, when some other dependency introduce non-ie-compatible code. |
@kopax Also to clarify, consider this custom compilation step as an opt-in behavior only required if a projects needs to support IE11. For such projects, this would be the default and no redirect should be required. |
|
😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature. |
Here is minimal example of react-styleguidist that works in IE11