I did a lot of research on Webpack but I couldn't solve my problem.
I bought a theme: DatavizUI Template.
I can add this theme to the application I created with rails 6 using "sprockets". But I want to add this with webpack. The javascript files of the theme do not work when I add via Webpack.
ruby -v : 2.6.5p114
rails -v : 6.0.2.2
Javascript console errors:
1:
Uncaught TypeError: Cannot read property 'dates' of undefined
at formpickers.js:1
at Object. (formpickers.js:13)
at Object../app/javascript/packs/formpickers.js (formpickers.js:90)
at webpack_require (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:26)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
2:
template.js:63 Uncaught ReferenceError: PerfectScrollbar is not defined
at applyStyles (template.js:63)
at HTMLDocument. (template.js:57)
at mightThrow (deferred.js:97)
at process (deferred.js:139)
Related
Row.js:18
Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
at Module.default (Row.js:18:1)
at ./src/axios.js (axios.js:2:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/Banner.js (App.js:20:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/App.js (bundle.js:18:65
How do i remove this error whenever i use fetchUrl, useState and useEffect in row.js file it shows this error.
Might be an error import issue. Check whether all the file imports are working fine or not. Or check if you are calling some dependent function before the parent function is loaded. Also, check this for reference-- Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
I am trying to integrate workbox with webpack + React project using workbox-webpack-plugin
npm list workbox-webpack-plugin
+-- react-scripts#3.0.1
| `-- workbox-webpack-plugin#4.2.0
I want to add some custom code to service worker , hence using WorkboxPlugin.InjectManifest.
As per my understanding, since i am using webpack InjectManifest plugin it will take care of bundling and compiling by itself after workbox 5 .As per google docs :
The InjectManifest plugin handles both bundling and also injecting the precache manifest for you
My problem is when i am running local dev server, i am getting the below error :
Scenario 1 : If i am using only workbox.precaching.precacheAndRoute(self.__WB_MANIFEST); inside sw, i am getting below error
Error : Uncaught ReferenceError: workbox is not defined at Object../src/sw.js (sw.js:1) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83
Scenario 2 : If i am using
import {precacheAndRoute} from 'workbox-precaching'
precacheAndRoute(self.__WB_MANIFEST);
in sw, i am getting below error:
Error : cacheWrapper.mjs:36 Uncaught ReferenceError: regeneratorRuntime is not defined at cacheWrapper.mjs:36 at Module../node_modules/workbox-core/_private/cacheWrapper.mjs (cacheWrapper.mjs:36) at __webpack_require__ (bootstrap:19) at Module../node_modules/workbox-precaching/PrecacheController.mjs (pluginUtils.mjs:11) at __webpack_require__ (bootstrap:19) at Module../node_modules/workbox-precaching/utils/getOrCreatePrecacheController.mjs (getOrCreatePrecacheController.mjs:1) at __webpack_require__ (bootstrap:19) at Module../node_modules/workbox-precaching/utils/getCacheKeyForURL.mjs (generateURLVariations.mjs:23) at __webpack_require__ (bootstrap:19) at Module../node_modules/workbox-precaching/utils/addFetchListener.mjs (addFetchListener.mjs:1)
I have searched many articles regarding these and but nothing solves my pbm:
Searched article : https://github.com/GoogleChrome/workbox/issues/2493
webpack.config.dev.js
const WorkboxPlugin = require('workbox-webpack-plugin');
new WorkboxPlugin.InjectManifest({
swSrc: './src/sw.js',
swDest: "sw.js"
}),
Can any one help here!
I have a angular app that runs fine in ng build and served to my ASP.net core web server, but when i build the same application by ng build --prod command the project build successfully but when i serve my wwwroot folder in web server i am getting this error:-
Uncaught ReferenceError: Subscription is not defined
at Module.zUnb (main.2fbc30c2b70c6b016365.js:1)
at f (runtime.8844839a3cc2e01b8d02.js:1)
at Object.0 (main.2fbc30c2b70c6b016365.js:1)
at f (runtime.8844839a3cc2e01b8d02.js:1)
at t (runtime.8844839a3cc2e01b8d02.js:1)
at Array.r [as push] (runtime.8844839a3cc2e01b8d02.js:1)
at main.2fbc30c2b70c6b016365.js:1
and nothing appears on webpage. I have read about this on web but cannot resolved this error. What could be the reason for this error or how can i solve this. Please dont mind i have recently start with web development.Thankyou.
Update 1 : Upon running ng serve --prod sourceMap=true getting this error :-
Uncaught ReferenceError: Subscription is not defined at
Module.zUnb (SubjectSubscription.js.pre-build-optimizer.js:7)
at f (bootstrap:78)
at Object.0 (main.b3059a947fcd0e8a64b5.js:1)
at f (bootstrap:78)
at t (bootstrap:45)
at Array.r [as push] (bootstrap:32)
at main.b3059a947fcd0e8a64b5.js:1
Update 2 : With ng serve --prod sourceMap=true command this extra warning is comming :-
Is the warning has something to do with my error. Also i have checked for subscription in my code their doesn't seems any error.
I found the answer to this problem in Luciano comment.
Angular6 - Prod build fails to access
Basically it was Rxjs package problem in package.json.
May be this may help someone. Thankyou.
I have a problem with my reactjs app after running npm run deploy and open the path
Getting this error in the console
TypeError: Cannot read property 'fd' of undefined
at Function.useColors (2.fa6ad6b6.chunk.js:22096)
at createDebug (2.fa6ad6b6.chunk.js:19243)
at Object.577 (2.fa6ad6b6.chunk.js:21742)
at __webpack_require__ (main.574dac58.js:50)
at Object.390 (2.fa6ad6b6.chunk.js:18982)
at __webpack_require__ (main.574dac58.js:50)
at Object.1388 (2.fa6ad6b6.chunk.js:67)
at __webpack_require__ (main.574dac58.js:50)
at Object.134 (2.fa6ad6b6.chunk.js:20)
at __webpack_require__ (main.574dac58.js:50)
Help appreciated.
I am trying to include react-bootstrap js files into my project for a couple of hours. I am new to react and I will only use it for client side. I tried to include from CDN, could not get it worked (React-Bootsrap Uncaught ReferenceError: require is not defined)
This time I have downloaded packages via npm and then copy whole node_modules folder in my spring boot project.I tried to include files as below, and did not wrote any other code, just included.
<script src="${pageContext.request.contextPath}/node_modules/react/cjs/react.development.js"></script>
<script src="${pageContext.request.contextPath}/node_modules/react-dom/cjs/react-dom.development.js"></script>
<script src="${pageContext.request.contextPath}/node_modules/react-bootstrap/dist/react-bootstrap.js"></script>
However I am getting error below :
react.development.js:14 Uncaught ReferenceError: process is not defined
at react.development.js:14
(anonymous) # react.development.js:14
react-dom.development.js:14 Uncaught ReferenceError: process is not defined
at react-dom.development.js:14
(anonymous) # react-dom.development.js:14
react-bootstrap.js:2218 Uncaught TypeError: Cannot read property 'Component' of undefined
at Object.exports.__esModule (react-bootstrap.js:2218)
at __webpack_require__ (react-bootstrap.js:30)
at Object.exports.__esModule (react-bootstrap.js:450)
at __webpack_require__ (react-bootstrap.js:30)
at Object.exports.__esModule (react-bootstrap.js:62)
at __webpack_require__ (react-bootstrap.js:30)
at exports.__esModule (react-bootstrap.js:50)
at react-bootstrap.js:53
at webpackUniversalModuleDefinition (react-bootstrap.js:9)
at react-bootstrap.js:10
exports.__esModule # react-bootstrap.js:2218
__webpack_require__ # react-bootstrap.js:30
exports.__esModule # react-bootstrap.js:450
__webpack_require__ # react-bootstrap.js:30
exports.__esModule # react-bootstrap.js:62
__webpack_require__ # react-bootstrap.js:30
exports.__esModule # react-bootstrap.js:50
(anonymous) # react-bootstrap.js:53
webpackUniversalModuleDefinition # react-bootstrap.js:9
(anonymous) # react-bootstrap.js:10
1:85 Uncaught ReferenceError: ReactBootstrap is not defined
at 1:85