Closed nboliver closed 6 years ago
Can you show me your build settings?
'use strict'; // eslint-disable-line
const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const config = require('./config');
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
let webpackConfig = {
context: config.paths.assets,
entry: config.entry,
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
output: {
path: config.paths.dist,
publicPath: config.publicPath,
filename: `scripts/${assetsFilenames}.js`,
},
stats: {
hash: false,
version: false,
timings: false,
children: false,
errors: false,
errorDetails: false,
warnings: false,
chunks: false,
modules: false,
reasons: false,
source: false,
publicPath: false,
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
include: config.paths.assets,
use: 'eslint',
},
{
enforce: 'pre',
test: /\.(js|s?[ca]ss)$/,
include: config.paths.assets,
loader: 'import-glob',
},
{
test: /\.js$/,
exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
use: [
{ loader: 'cache' },
{ loader: 'buble', options: { objectAssign: 'Object.assign' } },
],
},
{
test: /\.css$/,
include: config.paths.assets,
use: ExtractTextPlugin.extract({
fallback: 'style',
use: [
{ loader: 'cache' },
{ loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'postcss', options: {
config: { path: __dirname, ctx: config },
sourceMap: config.enabled.sourceMaps,
},
},
],
}),
},
{
test: /\.scss$/,
include: config.paths.assets,
use: ExtractTextPlugin.extract({
fallback: 'style',
use: [
{ loader: 'cache' },
{ loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'postcss', options: {
config: { path: __dirname, ctx: config },
sourceMap: config.enabled.sourceMaps,
},
},
{ loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
{ loader: 'sass', options: { sourceMap: config.enabled.sourceMaps } },
],
}),
},
{
test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: config.paths.assets,
loader: 'url',
options: {
limit: 4096,
name: `[path]${assetsFilenames}.[ext]`,
},
},
{
test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: /node_modules|bower_components/,
loader: 'url',
options: {
limit: 4096,
outputPath: 'vendor/',
name: `${config.cacheBusting}.[ext]`,
},
},
],
},
resolve: {
modules: [
config.paths.assets,
'node_modules',
'bower_components',
],
enforceExtension: false,
},
resolveLoader: {
moduleExtensions: ['-loader'],
},
externals: {
jquery: 'jQuery',
},
plugins: [
new CleanPlugin([config.paths.dist], {
root: config.paths.root,
verbose: false,
}),
/**
* It would be nice to switch to copy-webpack-plugin, but
* unfortunately it doesn't provide a reliable way of
* tracking the before/after file names
*/
new CopyGlobsPlugin({
pattern: config.copy,
output: `[path]${assetsFilenames}.[ext]`,
manifest: config.manifest,
}),
new ExtractTextPlugin({
filename: `styles/${assetsFilenames}.css`,
allChunks: true,
disable: (config.enabled.watcher),
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: 'popper.js/dist/umd/popper.js',
}),
new webpack.LoaderOptionsPlugin({
minimize: config.enabled.optimize,
debug: config.enabled.watcher,
stats: { colors: true },
}),
new webpack.LoaderOptionsPlugin({
test: /\.s?css$/,
options: {
output: { path: config.paths.dist },
context: config.paths.assets,
},
}),
new webpack.LoaderOptionsPlugin({
test: /\.js$/,
options: {
eslint: { failOnWarning: false, failOnError: true },
},
}),
new StyleLintPlugin({
failOnError: !config.enabled.watcher,
syntax: 'scss',
}),
new FriendlyErrorsWebpackPlugin(),
],
};
/* eslint-disable global-require */ /** Let's only load dependencies as needed */
if (config.enabled.optimize) {
webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
}
if (config.env.production) {
webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
}
if (config.enabled.cacheBusting) {
const WebpackAssetsManifest = require('webpack-assets-manifest');
webpackConfig.plugins.push(
new WebpackAssetsManifest({
output: 'assets.json',
space: 2,
writeToDisk: false,
assets: config.manifest,
replacer: require('./util/assetManifestsFormatter'),
})
);
}
if (config.enabled.watcher) {
webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
}
module.exports = webpackConfig;
Too complex. Can you import other libraries built by browserify? If not, you should debug it using a small repro.
I tried with a completely different project and configuration (but also webpack), got the same result.
If you cannot import any other browserified libraries, this is not an individual library's problem.
Reduced test case, simple html file with minimal other code. Other libraries work fine, but the issue persists here.
Webpack config:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [__dirname + '/demo/js/app.js', __dirname + '/demo/scss/style.scss'],
output: {
path: __dirname + '/demo/js',
filename: 'demo.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015']
},
},
],
rules: [
{
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '../css/style.css',
allChunks: true,
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
}
(Same problem for me - could this issue be reopened?)
Opend a new issue #31 for Webpack. Please use there.
When importing
pjax-api
, the result is an empty object. This means that trying to initialize throw the "not a constructor" error. Also tried importing using the relative path, same thing. Any help appreciated!