Uncaught ReferenceError: <something> is not defined

Question

In my github project , am receiving the error Uncaught ReferenceError: breakpoints is not defined in the chrome console. This should be resolved from the breakpoints.min.js , but webpack is somehow breaking/mangling it.

I think it has something to do with webpack and how I am importing the static js files from the theme I downloaded.

breakpoints resolves if I paste the original breakpoints.min.js content into the chrome console.

Here is my webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require("webpack");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
      './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
});

Am not seeing any errors in the webpack debug output:

Webpack is watching the files…

Hash: e70b0e57a305a5ee940a
Version: webpack 4.4.0
Time: 2890ms
Built at: 5/7/2019 9:08:20 PM
                Asset       Size       Chunks             Chunk Names
       ../css/app.css    113 KiB  ./js/app.js  [emitted]  ./js/app.js
               app.js    351 KiB  ./js/app.js  [emitted]  ./js/app.js
       ../favicon.ico   1.23 KiB               [emitted]
../images/overlay.png   2.74 KiB               [emitted]
  ../images/pic02.jpg   20.2 KiB               [emitted]
../images/phoenix.png   13.6 KiB               [emitted]
  ../images/pic01.jpg   59.5 KiB               [emitted]
     ../images/bg.jpg    396 KiB               [emitted]
  ../images/pic03.jpg   20.2 KiB               [emitted]
  ../images/pic04.jpg   20.3 KiB               [emitted]
  ../images/pic08.jpg   13.1 KiB               [emitted]
  ../images/pic06.jpg   20.6 KiB               [emitted]
  ../images/pic05.jpg   20.7 KiB               [emitted]
  ../images/pic07.jpg   20.7 KiB               [emitted]
  ../images/pic09.jpg   12.7 KiB               [emitted]
        ../robots.txt  202 bytes               [emitted]
   [0] multi ./js/app.js ./vendor/js/breakpoints.min.js ./vendor/js/browser.min.js ./vendor/js/jquery.scrollex.min.js ./vendor/js/jquery.scrolly.min.js ./vendor/js/main.js ./vendor/js/util.js 100 bytes {./js/app.js} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built]
[./css/app.css] 39 bytes {./js/app.js} [built]
[./js/app.js] 493 bytes {./js/app.js} [built]
[./vendor/js/breakpoints.min.js] 4.25 KiB {./js/app.js} [built]
[./vendor/js/browser.min.js] 2.76 KiB {./js/app.js} [built]
[./vendor/js/jquery.scrollex.min.js] 3.3 KiB {./js/app.js} [built]
[./vendor/js/jquery.scrolly.min.js] 1.25 KiB {./js/app.js} [built]
[./vendor/js/main.js] 4.92 KiB {./js/app.js} [built]
[./vendor/js/util.js] 11.3 KiB {./js/app.js} [built]
    + 6 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css:
    [./node_modules/css-loader/dist/cjs.js!./css/app.css] 455 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/font-awesome.min.css] 32.4 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/main.css] 99.2 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/noscript.css] 1.12 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

EDIT:

breakpoints is called in main.js in line 17. From the webpack console output, breakpoints.min.js appears to load before main.js as can be see above.

Answer 1

Try this configuration:

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require("webpack");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },

  entry: {
    'vendor': glob.sync('./vendor/**/*.js'),
    './js/app.js':  ['./js/app.js']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
});

Answer 2

How are you using breakpoints ?
Based on the reported error, it sounds like there is some script file attempting to use breakpoints before the file which defines it has been loaded (and run enough to define breakpoints ).

Look at the Chrome console on the right side to see what line is throwing that error. This is the code which is running before that definition. Make sure that code does not run until after the file defining breakpoints has finished loading.