django-webpack-loader
django-webpack-loader copied to clipboard
django-webpack
WebpackBundleLookupError in version 1.0.0 when files outside of entry points change
I've recently upgraded to version 1.0.0 of django_webpack_loader and webpack-bundle-tracker.
I have a project set up something like:
- frontend/
- webpack.config.js
- assets/
- cypress/
The config includes:
entry: {
index: ['./assets/js/index.jsx'],
},
When I edit files in the cypress directory, while running webpack-dev-server, no rebuild is triggered since the files aren't within the index entry point, but a new stats JSON is generated, and django_webpack_loader blows up with: WebpackBundleLookupError: Cannot resolve bundle index
Python error looks like this:
Do I need to change my configuration to somehow avoid new stats files getting generated when I edit files in frontend/cypress, or is this a bug? I couldn't find any exclude or ignore options in webpack-bundle-tracker. Didn't seem to be an issue with previous versions of these packages.
Didn't seem to be an issue with previous versions of these packages.
Confirmed downgrading to "webpack-bundle-tracker": "^1.0.0-alpha.1" and git+https://github.com/oleggromov/django-webpack-loader.git@164e7e8753 works correctly.
Unrelated, but I also noticed I need to change relative path location for the stats file between 1.0.0-alpha.1 and 1.0.0 though I didn't see any mention of that anywhere:
- new BundleTracker({ filename: '../webpack-stats.dev.json' }),
+ new BundleTracker({ filename: './webpack-stats.dev.json' }),
Not sure if any issue should be created for adding that to the docs, or if it's a regression/bug?
@DrMeers thanks for the info.
Would you be able to share more configurations about your setup? Like webpack.config.js and webpack-dev-server setup? I'm having some trouble reproducing this issue.
webpack.dev.config.js:
const webpack = require('webpack')
const BundleTracker = require('webpack-bundle-tracker')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = require('./webpack.base.config.js')
const webpack_dev_url = process.env.WEBPACK_DEV_URL || 'http://localhost:8080'
config.devtool = 'inline-source-map'
config.entry.index = ['react-hot-loader/patch', ...config.entry.index]
config.output.publicPath = `${webpack_dev_url}/`
// config.devServer = -- see server.js WebpackDevServer options
config.resolve = {
...(config.resolve || {}),
alias: {
...config.resolve.alias,
'react-dom': '@hot-loader/react-dom',
},
}
config.module.rules[0].use[0].options.plugins.unshift('react-hot-loader/babel')
config.plugins = config.plugins.concat([
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
new BundleTracker({ filename: '../webpack-stats.dev.json' }),
new HtmlWebpackPlugin({
templateContent:
'<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Site Title</title></head><body><div id="app"></div></body></html>',
favicon: './assets/img/favicon.ico',
}),
])
config.mode = 'development'
module.exports = config
webpack.base.config.js:
const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const autoprefixer = require('autoprefixer')
module.exports = {
context: __dirname,
entry: {
index: ['./assets/js/index.jsx'],
},
output: {
path: path.resolve('./webpack_bundles/'),
filename: '[name]-[hash].js',
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
failOnWarning: false,
failOnError: true,
},
},
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name]-[hash].css',
chunkFilename: '[id]-[hash].css',
}),
],
module: {
rules: [
{
// keep jsx first
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
plugins: [
// BEWARE use config.module.rules[0].use[0].options.plugins
// in webpack.dev.config.js!
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
],
presets: ['@babel/env', '@babel/react'],
},
},
{
loader: 'eslint-loader',
options: {
// fix: true,
},
},
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.(scss|css)$/,
use: [
// fallback to style-loader in development
process.env.NODE_ENV !== 'production'
? 'style-loader'
: MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer],
},
},
{
loader: 'sass-loader',
options: {
data: '@import "variables";',
includePaths: [path.resolve(__dirname, './assets/css')],
},
},
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff',
},
{
test: /\.(jpg|png|pdf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.(otf|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'base64-inline-loader?limit=1000&name=[name].[ext]',
},
],
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'assets/js'),
components: path.resolve('assets/js/components'),
},
modules: ['node_modules', 'bower_components'],
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
},
}
server.js:
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.dev.config')
const PORT = parseInt(config.output.publicPath.split(':')[2], 10)
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
index: 'index.html',
disableHostCheck: true,
sockHost: 'localhost',
sockPort: PORT,
hot: true,
inline: true,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
}).listen(PORT, '0.0.0.0', (err, result) => {
if (err) {
console.log(err)
}
console.log(`Listening at 0.0.0.0:${PORT}...`)
})
Awesome, thanks for the quick reply! Will be giving a look at this soon.
Hi @DrMeers,
I've tried to reproduce the issue with the config files you've sent but I wasn't able to. I think there might be more variables involved that we should look at.
When I edit files in the cypress directory, while running webpack-dev-server, no rebuild is triggered since the files aren't within the index entry point, but a new stats JSON is generated
This feels odd to me because the stats file are tied with the builds, so it isn't expected for it to change without a new build... From your image, I see the output file was changed to index.ts.js. This might be somehow related with the use of Cypress, although I also don't have any strong reasoning to back that up...
I don't think it's an issue with the django-webpack-loader because the stats file has changed, this is owned by webpack-bundle-tracker, and that repo had minimal changes from 1.0.0-alpha.0 and 1.0.0. If I had to guess, I'd say something is overwriting the stats file with changes from other directory, as if new BundleTracker is being used somewhere else.
Could you check if either new BundleTracker is used elsewhere, or if webpack.dev.config is being extended in another place?
Also I assume you aren't running cypress at the same time, but if so, could you test with only our application dev server running?
This is a longshot but the only thing that might make sense to me is that you might be using webpack in Cypress and the BundleTracker plugin is being used there by accident, overriding the stats file. I see webpack can be used in Cypress with https://github.com/cypress-io/cypress/tree/master/npm/webpack-preprocessor.
Also more information that might help are:
- The command to run the dev server. Usually it's
node server.jsbut I'd like to confirm how your command is set up - Your
WEBPACK_LOADERconfiguration in Django settings.
Closing as not reproduced. Please feel free to provide more info if you face a similar issue.