webpack4 bundle code introspection

[wldcordeiro]

I had found this issue and tried the solution near the bottom of flipping compress to false but had no success.

Please provide a description of the bug / issue, and provide the details below:

Worker error Error: No code sections found
    at Bundle.validate (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:54:11)
    at createBundle (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:262:12)
    at Immediate.setImmediate (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:313:7)
    at runCallback (timers.js:756:18)
    at tryOnImmediate (timers.js:717:5)
    at processImmediate [as _immediateCallback] (timers.js:697:5)
Worker error Error: No code sections found
    at Bundle.validate (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:54:11)
    at createBundle (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:262:12)
    at Immediate.setImmediate (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:313:7)
    at runCallback (timers.js:756:18)
    at tryOnImmediate (timers.js:717:5)
    at processImmediate [as _immediateCallback] (timers.js:697:5)
Worker error Error: No code sections found
    at Bundle.validate (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:54:11)
    at createBundle (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:262:12)
    at Immediate.setImmediate (/Users/wellingtoncordeiro/Documents/projects/aqueduct/node_modules/inspectpack/lib/models/bundle.js:313:7)
    at runCallback (timers.js:756:18)
    at tryOnImmediate (timers.js:717:5)
    at processImmediate [as _immediateCallback] (timers.js:697:5)

Steps to reproduce the problem

====================================================================

Please provide a gist of relevant files

1. package.json - webpack-dashboard -- webpack-dev-server --config config/webpack.config.js
2. webpack.config.js

const {
	addPlugins,
	createConfig,
	defineConstants,
	env,
	entryPoint,
	setContext,
	setOutput,
	sourceMaps,
	webpack,
} = require('@webpack-blocks/webpack2')
const babel = require('@webpack-blocks/babel6')
const devServer = require('@webpack-blocks/dev-server2')
const extractText = require('@webpack-blocks/extract-text2')
const { dirname, resolve } = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const DashboardPlugin = require('webpack-dashboard/plugin')
const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = require('./env.config')
const generateRuntimeConfig = require('./runtime.config.generator')
const root = resolve(__dirname, '..')
const {
	'process.env.BASE_PATH': BASE_PATH,
	'process.env.AUTHM_GATEWAY_URL': AUTHM_GATEWAY_URL,
} = config

const effigyAssetsDir = resolve(
	dirname(require.resolve('@inferno/effigy/package.json')),
	'assets'
)
module.exports = createConfig([
	setContext(root),
	entryPoint({
		main: './src/index.js',
	}),
	setOutput({
		path: resolve(root, 'dist'),
		publicPath: BASE_PATH && BASE_PATH !== '/' ? `${BASE_PATH}/` : '/',
		filename: '[name].[hash].js',
	}),
	babel(),
	defineConstants(config),
	addPlugins([
		new CleanWebpackPlugin(['dist'], { root }),
		new HtmlWebpackPlugin({
			inject: true,
			template: 'public/index.html',
			chunksSortMode: 'dependency',
		}),
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor',
			minChunks: ({ context }) =>
				context && context.indexOf('node_modules') !== -1,
		}),
		new webpack.optimize.CommonsChunkPlugin({
			name: 'manifest',
		}),
		new GenerateAssetPlugin({
			filename: 'runtime.config.js',
			fn: (compilation, cb) => {
				cb(null, generateRuntimeConfig(config))
			},
		}),
		new webpack.IgnorePlugin(/\.\/locale$/),
	]),
	env('production', [
		extractText(),
		sourceMaps('source-map'),
		addPlugins([
			new CopyWebpackPlugin(
				[
					{
						context: 'public',
						from: '*.*',
					},
					{
						context: effigyAssetsDir,
						from: '*.svg',
						to: 'assets',
					},
				],
				{
					ignore: ['*.txt'],
				}
			),
			new UglifyJsPlugin({
				uglifyOptions: {
					compress: {
						warnings: false,
					},
				},
				parallel: true,
				sourceMap: true,
			}),
		]),
	]),
	env('development', [
		devServer({
			compress: false,
			port: 3000,
			publicPath: '/',
			contentBase: 'public',
			disableHostCheck: true,
			proxy: [
				{
					context: ['/authorize', '/auth', '/token', '/oauth'],
					target: AUTHM_GATEWAY_URL,
					changeOrigin: true,
					cookieDomainRewrite: {
						'*': '',
					},
				},
			],
		}),
		sourceMaps(),
		addPlugins([new DashboardPlugin()]),
	]),
])

3. index.js N/A

====================================================================

More Details

• What operating system are you on? Mac OS
• What terminal application are you using? iTerm2 + tmux
• What version of webpack-dashboard are you using? 1.1.1
• What is the output of running echo $TERM? xterm-256color

[ryan-roemer]

Can you create a minimal repository that exposes the issue with install + error reproduction steps? Thanks.

[MatissJanis]

I'm experiencing the same issue.

Downgrading to v1.0.2 and removing CommonChunks usage solved the issue for me. Though, later I decided to keep CommonChunks as it's a more important plugin than this. Would be great to get this working!

[ryan-roemer]

@MatissJanis -- Can you create a minimal repository that exposes the issue with install + error reproduction steps? There are a lot of reasons a "no code sections found" can happen -- without something we can dive into, it's really just guesswork and not necessarily connected from one project to the next. Thanks!

[joepagan]

Hi @ryan-roemer I am getting this also.

I am trying this on webpack4 so I appreciate it may not work anyway, but, here is a repo for you.

Just clone &yarn;yarn start.

You can see the errors in the Log window in the top left:

Strangely, I started this repo because on another project (carbon copy), I was getting similar errors without the ascii gui, but now I cannot replicate that, I get a blank shell:

In this situation, scrolling up/down here will reveal strange characters:

Which looks similar to:
#16

Let me know if you need anything else.

[ryan-roemer]

@joepagan -- Thanks for the repo. I've made some tweaks to your scripts and configs. Some initial observations:

• Files cannot be minified when using the webpack-dashboard
• Files typically are real file bundles and written to disk when analyzed by the webpack dashboard.
• webpack-dashboard is potentially not going to play well with tools like concurrently. And given that you had only one task in package.json:start I removed concurrently there.
• Since the dashboard reads bundles, it's fastest and best to not use the devtool of inline-source-map or eval-source-map. I've switched your code to sourcemap`

Here's my diff:

diff --git a/package.json b/package.json
index d62592d..0a79d71 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "start": "webpack-dashboard -- concurrently \"node_modules/.bin/webpack-dev-server --watch --config webpack.dev.js\"",
+    "start": "webpack-dashboard -- node_modules/.bin/webpack --watch --config webpack.dev.js",
     "build": "concurrently \"node_modules/.bin/webpack --config webpack.prod.js\" \"gulp build\" && yarn run sizecheck-js && yarn run sizecheck-css",
     "sizecheck-js": "node_modules/.bin/bundlesize -f \"./public/resources/javascript/*\" -s 20kB",
     "sizecheck-css": "node_modules/.bin/bundlesize -f \"./public/resources/stylesheets/*\" -s 20kB"
diff --git a/webpack.common.js b/webpack.common.js
index 46cd2b1..71e416c 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -9,14 +9,14 @@ const DashboardPlugin = require('webpack-dashboard/plugin');
 // const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-    
+
   context: __dirname,
-  
+
   // stats.children false stops a bunch of spam appearing in the console when HMR is used, this is also set on devServer for the 'development' environment
   stats: {
     children: false
   },
-    
+
   optimization: {
     // SplitChunks replaces CommonsChunkPlugin in webpack4, this setup puts all node_modules dependencies in one commons chunk 'vendors'
     splitChunks: {
@@ -42,6 +42,7 @@ module.exports = {
     filename: "resources/javascript/[name].bundle.js",
     chunkFilename: "resources/javascript/[name].chunk.js",
     publicPath: "http://localhost:8080/",
+    pathinfo: true,
   },
 
   plugins: [
@@ -51,13 +52,13 @@ module.exports = {
     //   {
     //     from:'frontend/images',
     //     to:'public/resources/images'
-    //   } 
-    // ]), 
+    //   }
+    // ]),
 
     // new SimpleProgressWebpackPlugin( { // Default options
     //   format: 'compact'
     // } ),
-  
+
     new CleanWebpackPlugin([
       __dirname + "/public/resources/javascript",
       __dirname + "/public/resources/stylesheets"
@@ -73,9 +74,9 @@ module.exports = {
       ignoreOrder: true
     }),
 
-    new UglifyJsPlugin({
-      sourceMap: true
-    }),
+    // new UglifyJsPlugin({
+    //   sourceMap: true
+    // }),
 
     new DashboardPlugin({
       // port: 8080
@@ -134,7 +135,7 @@ module.exports = {
       {
         test: /\.(c|sc)ss$/,
         use: ['css-hot-loader'].concat(
-          ExtractTextPlugin.extract({ 
+          ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: [
               {
@@ -143,7 +144,7 @@ module.exports = {
                   sourceMap: true,
                   minimize: true
                 }
-              }, 
+              },
               {
                 // TODO - check this loader may just load autoprefixer without options
                 loader: 'postcss-loader',
@@ -178,11 +179,11 @@ module.exports = {
           })
         )
       },
-      
+
       /*
         Images
       */
-      { 
+      {
         test: /\.svg$/,
         loader: 'svg-inline-loader' },
       /*
diff --git a/webpack.dev.js b/webpack.dev.js
index 76fa344..4d15b37 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -3,11 +3,18 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
-  
+
   context: __dirname,
   // TODO - check which devtool is best
   // https://webpack.js.org/configuration/devtool/
-  devtool: "inline-source-map",
+  devtool: "source-map",
+
+  // webpack-dashboard needs unminified bundles.
+  // https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
+  optimization: {
+    minimize: false
+  },
+
   // watch on production doesn't work in webpack4
   watch: true,
   // mode is now required in webpack4, has to either be 'development' or 'production'

That produces:

So we've got some entries, just not the specific files we're expecting.

The first bundle looks like:

({

/***/ "./frontend/entries/app.entry.js":
/*!***************************************!*\
  !*** ./frontend/entries/app.entry.js ***!
  \***************************************/
// CODE

and I've got to check if we should already handle bundles like this or not...

[joepagan]

Thanks for taking the time to look at my repo, appreciate y'all are busy!

After a bit of testing found that it was indeed concurrently that seemed to be causing the main issue getting it going.

Notes on your changes:
On the link you provided
output.pathinfo is already enabled in dev mode (yarn start is dev mode):

Enabled in development mode

And

optimization.minimize is only enabled in production mode (yarn start is dev mode)

Enabled in production mode. Elsewise disabled.

It looks like you were setting optimization.minimize to false in a duplicate optimization object in the same config, it was used higher up in the config to set the splitchunks options.

It appears that I was wrong to be using UglifyJsPlugin in my webpack.common.js config. I have moved that to the production config.

I have added a new branch on the same repo here.
You can view the changes here

After these changes, I do get further, and, I can see the gui now, but I do appear to be getting the errors you were also :

Bonus question:
Is it just the 2 source map modes inline-source-map & eval-source-map which are the issue? Or, can we only use source-map with webpack-dashboard?

[ryan-roemer]

Thanks for the update -- some other stuff has come up, so this is on my radar, even if I can't get to it immediately.

To answer you bonus question: inspectpack reads raw bundles and disassembles them into code, so...

• eval-source-map is bad because we don't get var CODE = 'mccodeface'; , we get eval("var CODE = 'mccodeface';")
• inline-source-map sticks the map at the bottom of the file, which inspectpack can technically handle fine (ignoring it), but it slows things down.

so, tl;dr anything besides eval-source-map should be fine...

[joepagan]

No rush Ryan, appreciate the help.

Thanks for the bonus answer 💃💃💃

[ryan-roemer]

Fixed in webpack-dashboard@^2-- the dashboard engine (inspectpack) now uses the webpack stats object for code introspection instead of parsing real outputted bundles.

[joepagan]

Thank you Ryan I'll try this soon!
Edit*:
Just to confirm, this works!
For a reference on how to use this, in your package.json add a script using:
webpack-dashboard -- node_modules/.bin/webpack-dev-server --watch --config webpack.dev.js