Functions from index.js not executing inside of bundle when served without Webpack server: c[e] is not a function error
gdkoo opened this issue · 2 comments
gdkoo commented
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>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
alexander-akait commented
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 commented
Right, sorry!