Develop Reference

Storybook mdx files are not displayed

I use default Storybook Webpack config alongside with data from my existed one. I don't see any *.mdx files in a stories side-bar.
At first I just have replaced all config.module.rules by rules from existed webpack config and I got this error: Unexpected default error message
Error: Unexpected default export without title: undefined
at http://localhost:6006/vendors~main.iframe.bundle.js:96519:15
at Array.forEach (<anonymous>)
at http://localhost:6006/vendors~main.iframe.bundle.js:96512:11
at ConfigApi.configure (http://localhost:6006/vendors~main.iframe.bundle.js:76149:7)
at Object.configure (http://localhost:6006/vendors~main.iframe.bundle.js:96643:17)
at configure (http://localhost:6006/vendors~main.iframe.bundle.js:95240:24)
at Object.<anonymous> (http://localhost:6006/main.iframe.bundle.js:18:36)
at Object../.storybook/generated-stories-entry.js (http://localhost:6006/main.iframe.bundle.js:19:30)
at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:854:30)
at fn (http://localhost:6006/runtime~main.iframe.bundle.js:151:20)
Then I added this loader for *.mdx files:
{
test: /\.(stories|story)\.mdx$/, use: [
require.resolve('#mdx-js/loader'),
]
}
Hence, the error disappeared but also *.mdx files are not displayed.
I tried to add "babel-loader" before "#mdx-js/loader" in this way:
{
test: /\.(stories|story)\.mdx$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
plugins: ['#babel/plugin-transform-react-jsx'],
},
},
{
loader: '#mdx-js/loader',
options: {
compilers: [createMDXCompiler({})],
},
},
],
}
Also I checked different order for rules in config.module.rules and I added this rule directly to existed "webpack.config". I noticed that it doesn't matter what loader is in "mdx" rule, for instance, this works without errors but the files still not displayed:
{
test: /\.(stories|story)\.mdx$/,
use: ['any text]
};
mdx file sample:
import { Preview, IconGallery, IconItem } from '#storybook/addon-docs/blocks';
...
import { appConfig } from '../../config/AppConfig';
<Meta title='Theming/Icons' />
# Icons
<AppConfigContext.Provider value={appConfig}>
<IconGallery>
<IconItem name='ArrowDown'>
<Icon variant='ArrowDown' />
</IconItem>
...
</AppConfigContext.Provider>
My webpack.config.js:
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const ESLintPlugin = require('eslint-webpack-plugin');
const paths = require('./paths');
const modules = require('./modules');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const ReactRefreshWebpackPlugin = require('#pmmmwh/react-refresh-webpack-plugin');
const sites = require('./sites');
const postcssNormalize = require('postcss-normalize');
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const webpackDevClientEntry = require.resolve(
'react-dev-utils/webpackHotDevClient'
);
const reactRefreshOverlayEntry = require.resolve(
'react-dev-utils/refreshOverlayInterop'
);
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
const SITE = process.env.SITE?.toLowerCase() || sites[0];
if (!sites.includes(SITE)) {
throw new Error(
`Value of SITE: ${SITE} is not valid value. Please use one of the following [${sites.toString()}]`
);
}
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
const getRegexForIgnoreStyles = (app) => {
const test = new RegExp(
`\\.(${sites.filter((site) => site !== app).join('|')})\\.scss`
);
return { test, loader: require.resolve('ignore-loader') };
};
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
isEnvProduction && process.argv.includes('--profile');
// We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const shouldUseReactRefresh = env.raw.FAST_REFRESH;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {}
},
{
loader: require.resolve('css-loader'),
options: { ...cssOptions, url: false }
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize()
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
}
}
].filter(Boolean);
if (preProcessor) {
const options = { sourceMap: true };
if (preProcessor === 'sass-loader') {
options.additionalData = `$assets-url: '${process.env.REACT_APP_ASSETS_URL}';`;
}
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc
}
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true
}
}
);
}
return loaders;
};
const baseConfig = {
...
}
...
const baseRules = {
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// TODO: Merge this config once `image/avif` is in the mime-db
// https://github.com/jshttp/mime-db
{
test: [/\.avif$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
mimetype: 'image/avif',
name: 'static/media/[name].[hash:8].[ext]'
}
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]'
}
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic'
}
]
],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '#svgr/webpack?-svgo,+titleProp,+ref![path]'
}
}
}
]
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction
}
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /#babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true }
]
],
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap
}
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
})
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
},
'sass-loader'
)
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx|ejs)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
]
};
const configs = sites
.map((brand) => {
return {
...baseConfig,
name: brand,
entry: isEnvProduction
? { [brand]: paths.appIndexJs }
: [paths.appIndexJs],
module: {
...baseConfig.module,
rules: [
...baseConfig.module.rules,
{
oneOf: [getRegexForIgnoreStyles(brand), ...baseRules.oneOf]
}
]
},
plugins: [...baseConfig.plugins].filter(Boolean)
};
})
.reduce((acc, item) => {
return { ...acc, [item.name]: item };
}, {});
return isEnvProduction ? [...Object.values(configs)] : configs[SITE];
};

TL;DR
obey to Storybook's default *.stories.mdx naming convention
ensure that there is no trailing ; behind your <Meta title="..." /> tag – something like this breaks the story: <Meta title="..." />;
also it seems that stories inside hidden folders (folder-name starting with a . – e.g. .stories/my.stories.ts) will be ignored as well. Remove the . from the folder name in those cases
when you add some html-tags (e.g. <br/>) after a <Story> or <Canvas> (or any other storybook-mdx-component, make sure to add a line-break between the <Story> and your <br/>. Otherwise this will also cause an error, making the file disappear.
Detail
In my case the problem was that I didn't want to go with Storybook's default naming convention *.stories.mdx. I tried to omit the .stories part (i.e. having files like button.mdx instead of button.stories.mdx) and reconfigured the main.js accordingly. But this seems to not work – no mdx-files were showing up. Once I reverted back to .stories.mdx the mdx files were displayed again in the storybook side-bar.
Update
Another problem I noticed is very subtle and easy to miss. If you or your code formatter by any chance added a ; after your <Meta title="..."> tag, your file will not be shown in the sidebar. So keep an eye on that:
<!-- note the trailing ";" -->
<Meta title="My/Title" />;
<!-- after removing it, your file will show again -->
<Meta title="My/Title" />

Devextreme : FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Trying to upgrade devextreme version 16.1.7 to 16.2.4 in an angular2 application. 'npm build' fails with error 'FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory'
Error details as follows
<--- Last few GCs --->
169161 ms: Mark-sweep 1268.1 (1413.2) -> 1268.1 (1424.2) MB, 1402.3 / 0.0 ms [allocation failure] [GC in old space requested].
170593 ms: Mark-sweep 1268.1 (1424.2) -> 1268.1 (1424.2) MB, 1431.9 / 0.0 ms [allocation failure] [GC in old space requested].
171955 ms: Mark-sweep 1268.1 (1424.2) -> 1277.1 (1413.2) MB, 1361.6 / 0.0 ms [last resort gc].
173350 ms: Mark-sweep 1277.1 (1413.2) -> 1286.1 (1413.2) MB, 1394.4 / 0.0 ms [last resort gc].
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 000002971F8CFB49 <JS Object>
2: _serializeMappings(aka SourceMapGenerator_serializeMappings) [D:\WorkSpaces\updated to 16.2.4\eln-data-management\src\client\node_modules\source-map\lib\source-map-generator.js:~291] [pc=0000005A37AF467F] (this=0000022768C27969 <a SourceMapGenerator with map 0000023BE9EFB481>)
3: toJSON(aka SourceMapGenerator_toJSON) [D:\WorkSpaces\updated to 16.2.4\eln-data-management\src\client\n...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! app#0.0.0 build: `rimraf dist && webpack --progress --profile --bail`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the app#0.0.0 build script 'rimraf dist && webpack --progress --profile --bail'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the app package,
npm ERR! not with npm itself.
Using webpack1 to build the app.
// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isProd) {
config.devtool = 'source-map';
}
else if (isTest) {
config.devtool = 'inline-source-map';
}
else {
config.devtool = 'eval-source-map';
}
// add debug messages
config.debug = !isProd || !isTest;
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
*/
config.entry = isTest ? {} : {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts' // our angular app
};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
*/
config.output = isTest ? {} : {
path: root('dist'),
publicPath: isProd ? '/' : 'http://localhost:8082/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
};
/**
* Resolve
* Reference: http://webpack.github.io/docs/configuration.html#resolve
*/
config.resolve = {
cache: !isTest,
root: root(),
// only discover files that have those extensions
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
alias: {
'app': 'src/app',
'common': 'src/common'
}
};
var atlOptions = '';
if (isTest && !isTestWatch) {
// awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
atlOptions = 'inlineSourceMap=true&sourceMap=false';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
config.module = {
preLoaders: isTest ? [] : [{test: /\.ts$/, loader: 'tslint'}],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '#angularclass/hmr-loader'],
exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
// copy those assets to output
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file?name=fonts/[name].[hash].[ext]?'
},
// Support for *.json files.
{test: /\.json$/, loader: 'json'},
// Support for CSS as raw text
// use 'null' loader in test mode (https://github.com/webpack/null-loader)
// all css in src/style will be bundled in an external css file
{
test: /\.css$/,
exclude: root('src', 'app'),
loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
},
// all css required in src/app files will be merged in js files
{test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'},
// support for .html as raw text
// todo: change the loader to something that adds a hash to images
{test: /\.html$/, loader: 'raw', exclude: root('src', 'public')}
],
postLoaders: []
};
if (isTest && !isTestWatch) {
// instrument only testing sources with Istanbul, covers ts files
config.module.postLoaders.push({
test: /\.ts$/,
include: path.resolve('src'),
loader: 'istanbul-instrumenter-loader',
exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
});
}
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
// Environment helpers
'process.env': {
ENV: JSON.stringify(ENV)
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
})
];
if (!isTest && !isProd) {
config.plugins.push(new DashboardPlugin());
}
if (!isTest) {
config.plugins.push(
// Generate common chunks if necessary
// Reference: https://webpack.github.io/docs/code-splitting.html
// Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
new CommonsChunkPlugin({
name: ['vendor', 'polyfills']
}),
// Inject script and link tags into html files
// Reference: https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
template: './src/public/index.html',
chunksSortMode: 'dependency'
}),
// Extract css files
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Disabled when in test mode or not in build mode
new ExtractTextPlugin('css/[name].[hash].css', {disable: !isProd})
);
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// Dedupe modules in the output
new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({
mangle: { keep_fnames: true },
compress: {
warnings: false,
},
}),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: root('src/public')
}])
);
}
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
config.postcss = [
autoprefixer({
browsers: ['last 2 version']
})
];
/**
* Sass
* Reference: https://github.com/jtangelder/sass-loader
* Transforms .scss files to .css
*/
config.sassLoader = {
//includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
};
/**
* Apply the tslint loader as pre/postLoader
* Reference: https://github.com/wbuchwalter/tslint-loader
*/
config.tslint = {
emitErrors: false,
failOnHint: false
};
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './src/public',
historyApiFallback: true,
quiet: true,
stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
};
return config;
}();
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
tsconfig as follows
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true,
"lib": [ "es2015", "dom" ]
},
"compileOnSave": false,
"buildOnSave": false,
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
}
}
What's causing this error on upgrading to devextreme 16.2.x. App works and builds ok with devextreme 16.1.7.

The problem is with windows environment, we need to allocate more memory in webpack/node process
in node_modules/.bin/webpack.cmd (set 8GB of memory)
#IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" --max_old_space_size=8048 "%~dp0..\webpack\bin\webpack.js" %*
) ELSE (
#SETLOCAL
#SET PATHEXT=%PATHEXT:;.JS;=;%
node --max_old_space_size=8048 "%~dp0..\webpack\bin\webpack.js" %*
)
Thanks to Angelminster who provided the help

Local JavaScript Files Not Updating - Stencil CLI

I am modifying a purchased stencil-based theme for a client. When I modify javascript files, bundle.js does not update and I do not see a file change in the CLI. I am unable to see my changes on the local site. However, as a test, I was able to modify bundle.js directly and saw my change take place.
I have looked through the BC docs and have asked questions in other forums, but still no solution. I am not getting any errors in the CLI when I start stencil or run the bundle command. I can also upload my theme to the store without error.
Any ideas?
**Edit:
Here are the contents of my stencil.conf.js file:
var path = require('path');
var webpack = require('webpack');
var webpackConfig = require('./webpack.conf.js');
webpackConfig.context = __dirname;
webpackConfig.entry = path.resolve(__dirname, 'assets/js/app.js');
webpackConfig.output = {
path: path.resolve(__dirname, 'assets/js'),
filename: 'bundle.js'
};
/**
* Watch options for the core watcher
* #type {{files: string[], ignored: string[]}}
*/
var watchOptions = {
// If files in these directories change, reload the page.
files: [
'/assets',
'/templates',
'/lang'
],
//Do not watch files in these directories
ignored: [
'/assets/scss',
'/assets/css',
]
};
/**
* Hook into the stencil-cli browsersync instance for rapid development of themes.
* Watch any custom files and trigger a rebuild
* #param {Object} Bs
*/
function development(Bs) {
var compiler = webpack(webpackConfig);
// Rebuild the bundle once at bootup
compiler.watch({}, function(err, stats) {
if (err) {
console.error(err)
}
Bs.reload();
});
}
/**
*/
/**
* Hook into the `stencil bundle` command and build your files before they are packaged as a .zip
* Be sure to call the `done()` callback when finished
* #param {function} done
*/
function production(done) {
var compiler;
webpackConfig.devtool = false;
webpackConfig.plugins.push(new webpack.optimize.DedupePlugin());
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
comments: false
}));
compiler = webpack(webpackConfig);
compiler.run(function(err, stats) {
if (err) {
throw err;
}
done();
});
}
module.exports = {
watchOptions: watchOptions,
development: development,
production: production,
};
Here are the contents of my webpack.conf.js file:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval-cheap-module-source-map',
bail: false,
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: [
path.resolve(__dirname, 'assets/js'),
path.resolve(__dirname, 'node_modules/#bigcommerce/stencil-utils'),
],
query: {
compact: false,
cacheDirectory: true,
presets: [ ['es2015', {loose: true}] ]
}
}
]
},
plugins: [],
watch: false
};

How to use webpack HASH filename and dotnet publish?

I am using dotnet core for my backend website, using MVC webpage (index.cshtml) and angular2 for my application.
My problem is that with every new release, users are obtaining the old javascript files, because my index.cshtml looks like this
#{
Layout = "";
}
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<!-- 3. Display the application -->
<body>
<my-app>
<div class="container text-md-center">
<div class="mb-1">Loading application, please wait...</div>
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
</my-app>
<script defer type="text/javascript" src="~/dist/webpack.bundle.js"></script>
#if (ViewBag.Environment != "Production")
{
<script defer type="text/javascript" src="~/dist/app-style.bundle.js"></script>
<script defer type="text/javascript" src="~/dist/vendor-style.bundle.js"></script>
}
<script defer type="text/javascript" src="~/dist/polyfills.bundle.js"></script>
<script defer type="text/javascript" src="~/dist/vendor.bundle.js"></script>
<script defer type="text/javascript" src="~/dist/builders.bundle.js"></script>
<script defer type="text/javascript" src="~/dist/app.bundle.js"></script>
</body>
</html>
I am also using webpack to bundle all my typescript, html views etc.
In my dotnet publish "prepublish" tags, i am getting webpack to run to create a production build, as below
"scripts": {
"prepublish": [ "npm run build" ],
}
And in my package.json file, "npm run build" is defined as so.
"scripts": {
"clean": "rimraf node_modules doc dist && npm cache clean",
"clean-install": "npm run clean && npm install",
"clean-start": "npm run clean-install && npm start",
"watch": "webpack --watch --progress --profile",
"debug": "rimraf dist && webpack --progress --profile --bail",
"build": "rimraf dist && webpack --progress --profile --bail",
"lint": "tslint --force \"wwwroot/app/**/*.ts\"",
"docs": "typedoc --options typedoc.json wwwroot/app/app.component.ts",
"postinstall": "npm run"
},
This is all very well, but since dotnet publish copies the files to a new location, and webpack runs before the copy... How can i update my index.cshtml file to include the hash tags for script files, without changing the actual index.cshtml file, because obviously that is checked in and dont want to release a new version everytime i publish (as it should be more of a template)
Any help much appreciated!
EDIT
Here is my actual webpack.config.js file
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';
console.log(isProd ? 'Production build...' : 'Debug build...');
// Webpack Config
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isProd) {
config.devtool = 'source-map';
}
else if (isTest) {
config.devtool = 'inline-source-map';
}
else {
config.devtool = 'source-map';
}
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
*/
config.entry = isTest ? {} : {
'polyfills': './wwwroot/polyfills.ts',
'vendor': './wwwroot/vendor.ts',
'builders': './wwwroot/builders.ts',
'app': './wwwroot/app.ts',
'vendor-style': './wwwroot/style/vendor-style.ts',
'app-style': './wwwroot/style/app-style.ts'
};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
*/
config.output = isTest ? {} : {
path: './wwwroot/dist',
publicPath: './dist/',
filename: '[name].bundle.js',
sourceMapFilename: '[name].bundle.js.map',
chunkFilename: '[id].chunk.js'
};
/**
* Resolve
* Reference: http://webpack.github.io/docs/configuration.html#resolve
*/
config.resolve = {
// only discover files that have those extensions
extensions: ['.ts', '.js']
};
var atlOptions = '';
if (isTest && !isTestWatch) {
// awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
atlOptions = 'inlineSourceMap=true&sourceMap=false';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
config.module = {
rules: [
// .ts files for TypeScript
{
test: /\.ts$/,
loader: 'awesome-typescript-loader?' + atlOptions,
exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader'] })
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader', 'sass-loader'] })
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: '[hash].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
optimizationLevel: 7,
interlaced: false
}
}
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
prefix: 'font/',
limit: 5000,
publicPath: '../dist/'
}
}
]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
publicPath: '../dist/'
}
}
]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml'
}
}
]
}
]
};
if (!isTest || !isTestWatch) {
// tslint support
config.module.rules.push({
test: /\.ts$/,
enforce: 'pre',
loader: 'tslint-loader'
});
}
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
// Environment helpers
'process.env': {
ENV: JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: true,
options: {
/**
* Apply the tslint loader as pre/postLoader
* Reference: https://github.com/wbuchwalter/tslint-loader
*/
tslint: {
emitErrors: false,
failOnHint: false
},
// htmlLoader
htmlLoader: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
customAttrAssign: [ /\)?\]?=/ ]
},
// postcss
postcss: [
autoprefixer({
browsers: ['last 2 version']
})
]
}
})
];
if (!isTest && !isTestWatch) {
config.plugins.push(
new ForkCheckerPlugin(),
// Generate common chunks if necessary
// Reference: https://webpack.github.io/docs/code-splitting.html
// Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
new CommonsChunkPlugin({
name: ['app', 'builders', 'vendor', 'polyfills', 'webpack'],
minChunks: Infinity
}),
// Extract css files
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Disabled when in test mode or not in build mode
new ExtractTextPlugin({
filename: '[name].css',
disable: !isProd
})
);
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// // Dedupe modules in the output
// new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
mangle: {
keep_fnames: true
}
})
);
}
return config;
}();

Here is the answer... Someone else has added a nice guide
https://scottaddie.com/2015/12/14/a-practical-approach-to-cache-busting-with-webpack-and-asp-net-5/

Warning: I'm not using this approach myself. I tried it out but the multiple matching files issue was a pain. Leaving the answer in case it helps someone in a different situation.
Another way to do this is to:
Configure webpack with [name].[chunkhash].js and [name].[chunkhash].css, to make the regexes less likely to missfire
Write code to supplement Bundle.Include that is more flexible, eg supporting {hash} in addition to {version} and *, probably using regular expressions
Make sure that if there are multiple files matching your regular expression, you take the most recent one!
Set up your files as bundles in BundleConfig.cs
on your .cshtml pages, use Scripts.Render and Styles.Render to pull in the correct underlying files for each bundle
Here is some sample code that finds the matching physical files despite the hash name. I'll leave integrating it into BundleConfig.cs as an exercise for the reader, as it may be different depending on what else you have going on. Also it needs changing to get only the most recent file.
private static string ReplaceHash(string pathWithHash)
{
var i = pathWithHash.LastIndexOf('/');
var virtualPath = pathWithHash.Substring(0, i);
var physicalPath = HostingEnvironment.MapPath(virtualPath);
var fileName = pathWithHash.Substring(i + 1);
if (!Directory.Exists(physicalPath))
{
throw new FfcException(string.Format("Bundle path '{0}' not found", pathWithHash));
}
var re = new Regex(fileName
.Replace(".", #"\.")
.Replace("{hash}", #"([0-9a-fA-F]+)")
.Replace("{version}", #"(\d+(?:\.\d+){1,3})")
.Replace("*", #".*")
, RegexOptions.IgnoreCase
);
fileName = fileName
.Replace("{hash}", "*")
.Replace("{version}", "*");
var matchingFiles = Directory.EnumerateFiles(physicalPath, fileName).Where(file => re.IsMatch(file)).ToList();
if (matchingFiles.Count == 0)
{
throw new FfcException(string.Format("Bundle resource '{0}' not found", pathWithHash));
}
if (matchingFiles.Count > 1)
{
// TODO: need to pick the most recently created matching file
throw new FfcException(string.Format("Ambiguous Bundle resource '{0}' requested", pathWithHash));
}
var matchingPhysicalFile = matchingFiles[0];
var matchingVirtualFile = matchingPhysicalFile.Replace(physicalPath + "\\", virtualPath + "/");
return matchingVirtualFile;
}

Webpack fails to build ES6 in external packages

I'm trying to use an ES6 npm package (in this case one called gamesystem) in a project and build with webpack (and babel) it fails to build any ES6 code inside the external dependency, why is that? If I have the same code as a dependency with a relative path it works fine.
App code:
'use strict';
import World from 'gamesystem'; // Breaks
//import World from '../node_modules/gamesystem'; // Also breaks
//import World from '../gamesystem'; // Works (copied the same directory gamesystem outside the node_modules directory)
let world = new World();
Error:
ERROR in ./~/gamesystem/World.js
Module parse failed: /home/user/project/node_modules/gamesystem/World.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import System from './System';
|
| export default class World {
# ./src/app.js 3:18-39
Webpack config:
'use strict';
// Modules
let WebpackNotifierPlugin = require('webpack-notifier');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: {
app: __dirname + '/../src/app.js'
},
devtool: 'source-map',
devServer: {
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
},
proxy: require('./devProxy')
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.html$/,
loader: 'raw'
}]
},
plugins: [
new WebpackNotifierPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/../src/index.html',
inject: 'body',
minify: false
})
]
};
module.exports = config;

You're explicitly excluding node_modules from babel-loader:
exclude: /node_modules/,
You'll need to tweak that if you want to pass modules from node_modules through babel. You might consider explicit includes like this:
// be sure to req path
// var path = require('path')
include: [
// Include everything from your app path
path.resolve(__dirname, 'my-app-js-path'),
// Include gamesystem modules
/\bgamesystem\b/,
],