webpack 2 support
See original GitHub issueI am not sure if the issue is in carte-blanche itself or some dependency… but as soon as I add the webpack plugin I start getting callback is not defined
Webpack: webpack@2.1.0-beta.20
Node: v6.3.0
NPM: 3.10.3
Stack:
CarteBlanche started at //carte-blanche
Uncaught Exception...
TypeError: callback is not a function
at MultiModuleFactory.create (/Users/edvinerikson/code/fulcrum-frontend/node_modules/extra-entry-webpack-plugin/node_modules/webpack/lib/MultiModuleFactory.js:17:2)
at Compilation.process [as _addModuleChain] (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compilation.js:350:16)
at Compilation.process [as addEntry] (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compilation.js:421:7)
at MultiEntryPlugin.<anonymous> (/Users/edvinerikson/code/fulcrum-frontend/node_modules/extra-entry-webpack-plugin/node_modules/webpack/lib/MultiEntryPlugin.js:25:15)
at Compiler.applyPluginsParallel (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/node_modules/tapable/lib/Tapable.js:156:14)
at Compiler.compile (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compiler.js:431:7)
at Watching.<anonymous> (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compiler.js:47:17)
at next (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/node_modules/tapable/lib/Tapable.js:81:11)
at Compiler.invalidAsyncPlugin (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack-dev-middleware/middleware.js:80:3)
at next (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/node_modules/tapable/lib/Tapable.js:83:14)
at Compiler.<anonymous> (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/CachePlugin.js:31:4)
at Compiler.applyPluginsAsync (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/node_modules/tapable/lib/Tapable.js:85:13)
at Watching._go (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compiler.js:45:16)
at Watching.<anonymous> (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compiler.js:37:8)
at Compiler.readRecords (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compiler.js:339:10)
at new Watching (/Users/edvinerikson/code/fulcrum-frontend/node_modules/webpack/lib/Compiler.js:34:16)
Uncaught Exception...
undefined
Webpack config
/**
* DEVELOPMENT WEBPACK CONFIGURATION
*/
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CarteBlanche = require('carte-blanche');
const logger = require('../../server/logger');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
// PostCSS plugins
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');
const plugins = [
new CarteBlanche({
componentRoot: path.join(process.cwd(), 'app', 'components'),
}),
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
templateContent: templateContent(), // eslint-disable-line no-use-before-define
}),
];
module.exports = require('./webpack.base.babel')({
// Add hot reloading in development
entry: [
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
// Load the CSS in a style tag in development
cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
// Process the CSS with PostCSS
postcssPlugins: [
postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list
}),
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true,
}),
],
// Tell babel that we want to hot-reload
babelQuery: {
presets: ['react-hmre'],
},
// Emit a source map for easier debugging
devtool: 'eval-source-map',
});
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used. Otherwise the CommonsChunkPlugin
* will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step
if (process.env.BUILDING_DLL) { return []; }
// If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin
if (!dllPlugin) {
return [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
];
}
const dllPath = path.resolve(process.cwd(), dllPlugin.path || 'node_modules/react-boilerplate-dlls');
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*
* @see https://github.com/gutro/fulcrum-frontend/tree/master/docs/general/webpack.md
*/
if (!dllPlugin.dlls) {
const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error('The DLL manifest is missing. Please run `npm run build:dll`');
process.exit(0);
}
return [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
}),
];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
const dllManifests = Object.keys(dllPlugin.dlls).map((name) => path.join(dllPath, `/${name}.json`));
return dllManifests.map((manifestPath) => {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error(`The following Webpack DLL manifest is missing: ${path.basename(manifestPath)}`);
logger.error(`Expected to find it in ${dllPath}`);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
});
});
}
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
function templateContent() {
const template = fs.readFileSync(path.resolve(process.cwd(), 'app/index.html')).toString();
if (!dllPlugin) { return template; }
const dllNames = dllPlugin.dlls ? Object.keys(dllPlugin.dlls) : ['reactBoilerplateDeps'];
return template.replace(
'<!-- #PLACE_FOR_DLLS# -->',
dllNames.map(dllName => `<script data-dll='true' src='/${dllName}.dll.js'></script>`).join('\n')
);
}
Issue Analytics
- State:
- Created 7 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >Webpack 2 Documentation - W3cubDocs
webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation...
Read more >webpack2
Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, ...
Read more >Practice introduction to webpack 2 · programming mentor
Modern front-end projects become very complex and include multiple modules of different kind. Such tools as webpack called module bundlers help ...
Read more >Migrating to Webpack 2: some tips and gotchas
You also have to update babel-loader to at least 6.2.10 . That's when they added support for Webpack 2 rc. Not too bad....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I also have the same issue without using
react-boilerplate
or the DLL plugin.Any updates on this? Almost 3 months have passed since last comment. I still have the issue.