Functions from index.js not executing inside of bundle when served without Webpack server: c[e] is not a function error #1793

gdkoo · 2023-05-18T04:00:50Z

All bundled files including html, css, main.js (bundle) and images are in public folder. When public folder is served to Firebase, the index.js code that is injected in the main.js bundle does not run. It runs when using webpack dev server. The following error is thrown but does not seem to affect the content being served:

Cannot read properties of undefined (reading 'getChunkConditionMap')

Other bundled files including style.css, index.html, and functions imported into index.js run fine. The only issue is with the functions called in index.js, such as a simple console.log(). None of it seems to execute when hosted with anything outside of Webpack dev server. The error that's thrown is

caught (in promise) TypeError: c[e] is not a function
    at l (main.49f6f6f82e9be0cd.js:2:39603)
    at main.49f6f6f82e9be0cd.js:2:39409
    at l.a (main.49f6f6f82e9be0cd.js:2:40104)
    at 131 (main.49f6f6f82e9be0cd.js:2:39284)
    at l (main.49f6f6f82e9be0cd.js:2:39603)
    at main.49f6f6f82e9be0cd.js:2:42815
    at main.49f6f6f82e9be0cd.js:2:42823

Looking through the generated main.js bundle served to the browser , this is where the error is:

`        ,
        131: (e,t,r)=>{
            "use strict";
            r.a(e, (async(e,t)=>{
                try {
                    r(196);
                    var n = r(209)
                      , o = (r(287),
                    r(655))
                      , i = r(437)
                      , s = r(937)
                      , a = r(378)
                      , c = (r(702),
                    r(777),
                    r(365),
                    r(463),
                    r(878),
                    r(125),
                    e([n, o, i, s, a]));
                    [n,o,i,s,a] = c.then ? (await c)() : c,
                    console.log("hi"),
                    t()
                } catch (e) {
                    t(e)
                }
            }
            ))
        }
    }, u = {};
    function l(e) {
        var t = u[e];
        if (void 0 !== t)
            return t.exports;
        var r = u[e] = {
            exports: {}
        };
        return c[e](r, r.exports, l),
        r.exports
    }`

I'm using HTMLWebpackPlugin and miniCSSExtractPlugin

Config

Copy the relevant section from webpack.config.js:

module.exports = {
   entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "public"),
      filename: '[name].[contenthash].js',
      clean: true,
  }
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        sideEffects: true,
        include: [
         path.resolve(__dirname, 'src/style.css'),
        ],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
       test: /\.(png|jpe?g|gif|svg)$/i,
       type: 'asset/resource'
      },
    ]
  }
  plugins: [
   new MiniCssExtractPlugin(
      { filename: '[name].[contenthash].css' },
      { experimentalUseImportModule: false },
    ),
    new HtmlWebpackPlugin({
      title: 'go outside today',
      template: './src/indexTemplate.html'
    }),
  ]
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>go outside today</title>
  <link rel="stylesheet" onload="this.onload=null; this.rel='stylesheet'"; href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <style>
  .material-symbols-rounded {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
  }
  </style>
  <style>
    .blink {
        animation: blink-animation 3.5s steps(2, start) infinite;
        -webkit-animation: blink-animation 2s steps(5, start) infinite;
      }
      @keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
      @-webkit-keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="f1-parent background">
      <p class="past-sunset"></p>
      <div class="f1-child1">
        <!--LOGO IMAGE GOES HERE-->
        <p class="f1-innerchild1"> </p>
        <p class="time"> loading </p>
        <p class="blinktime blink"> </p>
        <!--GETUP IMAGE GOES HERE-->
      </div>
    </div>
    <div class="f2-parent background">
      <div class="f2-childtext-1"> 
        <p class= "prescrip-title">Here's your prescription</p>
      </div>
      <div class="f2-childtext-2">
        <p class = "best-results">For best results,</p>
      </div>
      <div class="f2-childtext-3">
        <p class = "max-time"> </p>
        <p class = "min-time"> </p>
        <p class = "short-time"> short on time? </p>

      </div>
      <div class="f2-child">
        <!-- <p>generating...</p> -->
      </div>    
    </div>
    <div class="f3-parent background">
      <div class="f3-child1">  
        <div class= "f3-innerchild1"> 
           <p>Go Outside</p>
        </div>
      </div>
      <div class="f3-child2">
        <div class="f3-innerchild2">
          <p class="bouncetxt-1">improve focus</p>
          <p class="bouncetxt-2">sleep better</p>
          <p class="bouncetxt-3">release melatonin</p>c
          <p class="bouncetxt-4">increase longevity</p>
          <p class="bouncetxt-5">feel refreshed</p>
          <p class="bouncetxt-6">reduce symptoms of depression</p>
          <p class="bouncetxt-7">wake up easily</p>
          <p class="bouncetxt-8">manage anxiety</p>
          <p class="bouncetxt-9">improve focus</p>
          <p class="bouncetxt-10">enhance motivation</p>
          <p class="bouncetxt-11">feel happier</p>
        </div> 
      </div>
    </div>
    <div class="f4-parent background">
      <!--HERE-->
      <div class="f4-child2">
        <div class="f4-innerchild1">
          <p>For your daily afternoon walk</p>
        </div>
        <div class="f4-innerchild2">
          <p> The exact time to go outside,<br>
          based on where you are. </p>
        </div>
        <div class="f4-innerchild3">
          <p> Get enough afternoon light  <br>
          to regulate your circadian rhythm.</p>
        </div>
        <div class="f4-innerchild4">
          <p>Interested in the science?<br>
          Check out Huberman Lab.</p>
        </div>
        <div class="f4-innerchild5">
          <p>This is my take, if you're curious.</p>
        </div>
      </div>
      <div class="f4-child3">
        <div class="square square1">
          <a class= "linktomypage" href="https://hubermanlab.com/toolkit-for-sleep/#:~:text=1)%20View%20sunlight,your%20circadian%20clock." target="_blank">
            <span class="material-symbols-rounded">
              sentiment_calm
            </span>
          </a>
            <!-- <i class="material-icons calm-icon">sentiment_calm</i> -->
        </div>
        <div class="square square2">
          <a class= "linktomypage" href="https://www.youtube.com/clip/UgkxZfoz2So_yefhUhl0oCH7uEjo2q1W--ok" target="_blank">
            <span class="material-symbols-rounded">
              sentiment_calm
            </span>
          </a>
        </div>
        <div class="square square3">
          <a class= "linktomypage" href="https://hubermanlab.com/master-your-sleep-and-be-more-alert-when-awake/" target="_blank">
            <span class="material-symbols-rounded">
              sentiment_calm
            </span>
          </a>
        </div>
        <div class="square square4">
          <a class= "linktomypage" href="https://achieved-stranger-bc9.notion.site/What-s-This-For-07ee998333bf434db604399930b38d87" target="_blank">
            <span class="material-symbols-rounded">
              sentiment_calm
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Link to Repo

Node.js v16.18.0
darwin 20.1.0
npm 8.19.1

sleepwakeregulate@1.0.0 /Users/georgettekoo/Documents/Code/First Project/SleepWakeRegulate
├─┬ @webpack-cli/generators@3.0.1
│ └── webpack@5.76.3 deduped
├─┬ babel-loader@9.1.0
│ └── webpack@5.76.3 deduped
├─┬ css-loader@6.7.2
│ └── webpack@5.76.3 deduped
├─┬ html-webpack-plugin@5.5.1
│ └── webpack@5.76.3 deduped
├─┬ mini-css-extract-plugin@2.6.1
│ └── webpack@5.76.3 deduped
├─┬ style-loader@3.3.1
│ └── webpack@5.76.3 deduped
├─┬ url-loader@4.1.1
│ └── webpack@5.76.3 deduped
├─┬ webpack-cli@5.0.1
│ ├─┬ @webpack-cli/configtest@2.0.1
│ │ └── webpack@5.76.3 deduped
│ ├─┬ @webpack-cli/info@2.0.1
│ │ └── webpack@5.76.3 deduped
│ ├─┬ @webpack-cli/serve@2.0.1
│ │ └── webpack@5.76.3 deduped
│ └── webpack@5.76.3 deduped
├─┬ webpack-dev-server@4.11.1
│ ├─┬ webpack-dev-middleware@5.3.3
│ │ └── webpack@5.76.3 deduped
│ └── webpack@5.76.3 deduped
└─┬ webpack@5.76.3
  └─┬ terser-webpack-plugin@5.3.6
    └── webpack@5.76.3 deduped
npm ls html-webpack-plugin

The text was updated successfully, but these errors were encountered:

alexander-akait · 2023-05-18T14:31:37Z

Please avoid dupplciation webpack/webpack#17223 in future, you can ping any person if you need help, but no need to create multiple issues, thank you

gdkoo · 2023-05-19T00:53:56Z

Right, sorry!

alexander-akait closed this as completed May 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Functions from index.js not executing inside of bundle when served without Webpack server: c[e] is not a function error #1793

Functions from index.js not executing inside of bundle when served without Webpack server: c[e] is not a function error #1793

gdkoo commented May 18, 2023 •

edited

alexander-akait commented May 18, 2023

gdkoo commented May 19, 2023

Functions from index.js not executing inside of bundle when served without Webpack server: c[e] is not a function error #1793

Functions from index.js not executing inside of bundle when served without Webpack server: c[e] is not a function error #1793

Comments

gdkoo commented May 18, 2023 • edited

Config

alexander-akait commented May 18, 2023

gdkoo commented May 19, 2023

gdkoo commented May 18, 2023 •

edited