Html loader overrides template variables #312

kof · 2017-02-09T15:45:11Z

I have an html loader in my webpack.config:

{
 test: /\.html$/,
 loader: 'html-loader'
}

Now document template renders this:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title><%=htmlWebpackPlugin.options.title%></title>
	</head>
	<body>
		<div id="app"></div>
	<script type="text/javascript" src="build/bundle.js"></script></body>
</html>

As we discussed with @sapegin the issue seems to be here but a solution needs to be more general.

sapegin · 2017-02-09T15:51:50Z

More info in html-webpack-plugin FAQ

Probably we can hardcode EJS loader from html-webpack-plugin, something like this:

const loader = require.resolve('html-webpack-plugin/lib/loader');
new HtmlWebpackPlugin({
  template: `!!${loader}!${template}`
})

Another solution would be to replace html-webpack-plugin with something simpler that can’t be affected by user loaders configuration.

/cc @bebraw

kof · 2017-02-09T15:52:56Z

What about other things, can anything else in the users wp config break sg?

sapegin · 2017-02-09T15:54:09Z

Only practice can tell ;-)

kof · 2017-02-09T15:55:51Z

Well anything you rely on from the webpack config may be different in the users one, so its basically guaranteed that something can go wrong, I am not familiar with the code base yet to see what sg depends on.

sapegin · 2017-02-09T16:00:32Z

That’s why I didn’t want to do any user config importing ;-) But we had the same issues before, even worse.

This way it can’t be affected by user’s html-loader. Fix #312

sapegin · 2017-02-17T08:57:07Z

Should be fixed in react-styleguidist@5.0.0-beta.11.

[link to medium article]() ## Highlights 1. create-react-app support out of the box. 2. New webpack configuration options + user config auto load. ## Breaking changes ### create-react-app support Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config. It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`. ### User webpack config auto load By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it. If your webpack config is located somewhere else, you need to load it manually: ```javascript module.exports = { webpackConfig: require('./configs/webpack.js') }; ``` > **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored. > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist. > **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/). ### Easier webpack configuration With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig): ```javascript module.exports = { webpackConfig: { module: { loaders: [ // Babel loader, will use your project’s .babelrc { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, // Other loaders that is needed for your components { test: /\.css$/, loader: 'style-loader!css-loader?modules', }, ], }, }, }; ``` See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples. Also: * `include`/`exclude` options in you webpack loaders are no longer required. * JSON loader will be added automatically if needed. ### No global Lodash in examples Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option: ```javascript module.exports = { context: { forEach: 'lodash/forEach', map: 'lodash/map', }, }; ``` Or replicate previous behavior though it’s not recommended: ```javascript module.exports = { context: { _: 'lodash', }, }; ``` ### Use JSS for styling instead of CSS Modules Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components: ```javascript module.exports = { theme: { link: 'firebrick', linkHover: 'salmon', font: '"Comic Sans MS", "Comic Sans", cursive', }, styles: { Logo: { logo: { animation: 'blink ease-in-out 300ms infinite', }, '@Keyframes blink': { to: { opacity: 0 }, }, }, }, }; ``` We now use [JSS](http://cssinjs.org/) under the hoood. ### New default config options * `components`: `src/components/**/*.js` * `getExampleFilename`: `Component/Readme.md` or `Component/Component.md` * `title`: `<app name from package.json> Style Guide` ### New default dev-server port Default port is now 6060 because create-react-app uses 3000 too. ### Use findAllExportedComponentDefinitions as a default resolver Fixes #260. ### Drop npm2 support ## Other changes and new features * New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles * New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide. * New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310) * Ignoring props with `@ignore` JSDoc tag (#353) * `objectOf` propType support (#347) * `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough * Style guide config validation * Reduced build size ## Bug fixes * Path for `template` config option should be relative to style guide config (#211) * Do not show isolated links on Markdown examples (#251) * Show function PropType.func’s source in a tooltip (#343) * Escape and highlight code in Markdown in descriptions (#284) * Do not change level of Markdown headings (#329) * Search should work for subsections (#245) * Better anchors navigation with unique slugs (#318) * User’s html-loader should not affect Styleguidist (#312) * Show webpack build errors and warnings * Exit with error code when build fails * Show error when no components found on style guide start * Do not fail when one of the files doesn’t export a component --- https://github.com/n1313 https://github.com/okonet https://github.com/kof

@n1313

Huge thanks to @n1313, @okonet and @kof for help with this release! ## Highlights 1. create-react-app support out of the box. 2. New webpack configuration options + user config auto load. ## Breaking changes ### create-react-app support Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config. It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`. ### User webpack config auto load By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it. If your webpack config is located somewhere else, you need to load it manually: ```javascript module.exports = { webpackConfig: require('./configs/webpack.js') }; ``` > **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored. > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist. > **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/). ### Easier webpack configuration With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig): ```javascript module.exports = { webpackConfig: { module: { loaders: [ // Babel loader, will use your project’s .babelrc { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, // Other loaders that is needed for your components { test: /\.css$/, loader: 'style-loader!css-loader?modules', }, ], }, }, }; ``` See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples. Also: * `include`/`exclude` options in you webpack loaders are no longer required. * JSON loader will be added automatically if needed. ### No global Lodash in examples Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option: ```javascript module.exports = { context: { forEach: 'lodash/forEach', map: 'lodash/map', }, }; ``` Or replicate previous behavior though it’s not recommended: ```javascript module.exports = { context: { _: 'lodash', }, }; ``` ### Use JSS for styling instead of CSS Modules Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components: ```javascript module.exports = { theme: { link: 'firebrick', linkHover: 'salmon', font: '"Comic Sans MS", "Comic Sans", cursive', }, styles: { Logo: { logo: { animation: 'blink ease-in-out 300ms infinite', }, '@Keyframes blink': { to: { opacity: 0 }, }, }, }, }; ``` We now use [JSS](http://cssinjs.org/) under the hoood. ### New default config options * `components`: `src/components/**/*.js` * `getExampleFilename`: `Component/Readme.md` or `Component/Component.md` * `title`: `<app name from package.json> Style Guide` ### New default dev-server port Default port is now 6060 because create-react-app uses 3000 too. ### Use findAllExportedComponentDefinitions as a default resolver Fixes #260. ### Drop npm2 support ## Other changes and new features * New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles * New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide. * New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310) * Ignoring props with `@ignore` JSDoc tag (#353) * `objectOf` propType support (#347) * `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough * Style guide config validation * Reduced build size ## Bug fixes * Path for `template` config option should be relative to style guide config (#211) * Do not show isolated links on Markdown examples (#251) * Show function PropType.func’s source in a tooltip (#343) * Escape and highlight code in Markdown in descriptions (#284) * Do not change level of Markdown headings (#329) * Search should work for subsections (#245) * Better anchors navigation with unique slugs (#318) * User’s html-loader should not affect Styleguidist (#312) * Show webpack build errors and warnings * Exit with error code when build fails * Show error when no components found on style guide start * Do not fail when one of the files doesn’t export a component

@n1313

Huge thanks to @n1313, @okonet and @kof for help with this release! ## Highlights 1. create-react-app support out of the box. 2. New webpack configuration options + user config auto load. ## Breaking changes ### create-react-app support Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config. It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`. ### User webpack config auto load By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it. If your webpack config is located somewhere else, you need to load it manually: ```javascript module.exports = { webpackConfig: require('./configs/webpack.js') }; ``` > **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored. > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist. > **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/). ### Easier webpack configuration With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig): ```javascript module.exports = { webpackConfig: { module: { loaders: [ // Babel loader, will use your project’s .babelrc { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, // Other loaders that is needed for your components { test: /\.css$/, loader: 'style-loader!css-loader?modules', }, ], }, }, }; ``` See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples. Also: * `include`/`exclude` options in you webpack loaders are no longer required. * JSON loader will be added automatically if needed. ### No global Lodash in examples Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option: ```javascript module.exports = { context: { forEach: 'lodash/forEach', map: 'lodash/map', }, }; ``` Or replicate previous behavior though it’s not recommended: ```javascript module.exports = { context: { _: 'lodash', }, }; ``` ### Use JSS for styling instead of CSS Modules Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components: ```javascript module.exports = { theme: { link: 'firebrick', linkHover: 'salmon', font: '"Comic Sans MS", "Comic Sans", cursive', }, styles: { Logo: { logo: { animation: 'blink ease-in-out 300ms infinite', }, '@Keyframes blink': { to: { opacity: 0 }, }, }, }, }; ``` We now use [JSS](http://cssinjs.org/) under the hoood. ### New default config options * `components`: `src/components/**/*.js` * `getExampleFilename`: `Component/Readme.md` or `Component/Component.md` * `title`: `<app name from package.json> Style Guide` ### New default dev-server port Default port is now 6060 because create-react-app uses 3000 too. ### Use findAllExportedComponentDefinitions as a default resolver Fixes #260. ### Drop npm2 support ## Other changes and new features * New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles * New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide. * New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310) * Ignoring props with `@ignore` JSDoc tag (#353) * `objectOf` propType support (#347) * `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough * Style guide config validation * Reduced build size ## Bug fixes * Path for `template` config option should be relative to style guide config (#211) * Do not show isolated links on Markdown examples (#251) * Show function PropType.func’s source in a tooltip (#343) * Escape and highlight code in Markdown in descriptions (#284) * Do not change level of Markdown headings (#329) * Search should work for subsections (#245) * Better anchors navigation with unique slugs (#318) * User’s html-loader should not affect Styleguidist (#312) * Show webpack build errors and warnings * Exit with error code when build fails * Show error when no components found on style guide start * Do not fail when one of the files doesn’t export a component

sapegin added the bug label Feb 9, 2017

sapegin added this to the 5.0.0 milestone Feb 9, 2017

sapegin added a commit that referenced this issue Feb 17, 2017

Fix: Hardcode template loader for htmlLoader

baf7fec

This way it can’t be affected by user’s html-loader. Fix #312

sapegin closed this as completed Mar 9, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Html loader overrides template variables #312

Html loader overrides template variables #312

kof commented Feb 9, 2017 •

edited by sapegin

Loading

sapegin commented Feb 9, 2017 •

edited

Loading

kof commented Feb 9, 2017

sapegin commented Feb 9, 2017

kof commented Feb 9, 2017 •

edited

Loading

sapegin commented Feb 9, 2017

sapegin commented Feb 17, 2017

Html loader overrides template variables #312

Html loader overrides template variables #312

Comments

kof commented Feb 9, 2017 • edited by sapegin Loading

sapegin commented Feb 9, 2017 • edited Loading

kof commented Feb 9, 2017

sapegin commented Feb 9, 2017

kof commented Feb 9, 2017 • edited Loading

sapegin commented Feb 9, 2017

sapegin commented Feb 17, 2017

kof commented Feb 9, 2017 •

edited by sapegin

Loading

sapegin commented Feb 9, 2017 •

edited

Loading

kof commented Feb 9, 2017 •

edited

Loading