This is part of my real code:
import { Tree, Text } from '#List'
import Upsert from './Upsert'
import { EntitySeo } from '../../Seo/Exports'
const filters = <>
<Text
column="Title"
placeholder="Title"
/>
</>
...
And my Vite React application loads perfectly fine.
But when I change in some files, the HMR complains that:
react_devtools_backend.js:4026
ReferenceError: Cannot access 'Text' before initialization
at Tree.jsx:6:6
overrideMethod # react_devtools_backend.js:4026
warnFailedFetch # client.ts:28
(anonymous) # client.ts:333
await in (anonymous) (async)
fetchUpdate # client.ts:320
(anonymous) # client.ts:74
handleMessage # client.ts:72
(anonymous) # client.ts:45
react_devtools_backend.js:4026
[hmr] Failed to reload /src/Panel/Menu.jsx.
This could be due to syntax errors or importing non-existent modules. (see errors above)
I don't know how to debug this. What systematic steps can I take to find out the root of the problem. Because import { Text } from '#List' is lexically in previous lines to its usage.
For anyone getting here, I found this solution and it worked for me.
Basically this error has two main reasons.
Either you have lexical problem (literally defining something after you have used it) in which case you always get error
Or you have circular dependency. A imports B and B imports A.
My case was the second case and it was working fine in the first load of my web app, but for HMR it would fail.
I searched and found this valuable tool called madge.
I installed it and found all of my circular dependencies and once I resolved them, I no longer saw this error.
Related
I'm trying to use the postal-mime JS library in a Chrome browser extension using Manifest V3. My extension spawns a service worker and I'm trying to use this library there. To import it, I tried both
const { PostalMime } = require("postal-mime");
and
import { PostalMime } from "postal-mime";
while my code looks like this:
const parser = new PostalMime();
parser.parse(result).then((email) => console.log(email));
The variable result contains a standard email message as a string that I'd like to parse.
In both cases, I get the following error:
Uncaught (in promise) TypeError: PostalMime is not a constructor
at sw.js:66:1
(anonymous) # sw.js:66
Promise.then (async)
(anonymous) # sw.js:61
What am I doing wrong?
Thank you for your help,
GTP
This is not a ES module so to import it in general you need to use webpack or browserify i.e. a build system for your extension. Luckily, in this case you can find a prebuilt js file on unpkg.com which you should download manually into the directory of your extension.
import './postal-mime.js'; // path and .js suffix are required for native import!
const PostalMime = postalMime.default;
const parser = new PostalMime();
parser.parse(result).then((email) => console.log(email));
Note that since postal-mime.js is not a native ES module we used a nameless import to let the library create its export in a global variable. To see the name of the variable (postalMime) look at the beginning of the file where you'll see exports.postalMime=. As for default it is an internal mechanism used by npm module implementation, which you can see in devtools console when you inspect postalMime object. Other libraries may use multiple named properties instead.
I ended up using the library emailjs-mime-parser. While not a real solution to the asked question and despite having fewer functionalities than postal-mime, at least I'm able to import it out of the box without thinkering with Webpack's config.
Background
I am trying to use dgraph-js-http in a Svelte application.
Error
The initial error I was facing was:
Uncaught ReferenceError: buffer is not defined
<anonymous> http://localhost:5000/build/bundle.js:6947
I'm including this as maybe my solution to this was not the best, and that hopefully there is a way to solve both this issue, and the current blocker issue.
However, after a trial-and-error approach (see below for the various things I've tried) I'm now stuck.
Current error
After solving the above error, I am now blocked on this error:
Uncaught ReferenceError: define is not defined
Attempts to resolve
None of the following have worked.
Add <script src="https://bundle.run/stream#0.0.2"></script> to index.html
Run npm install stream
Add import * as Stream from "stream" to the App.svelte file
Add import * as Stream from "stream" to the stores.js file
Add preferBuiltins:true to rollup.config.js
Add npm install --save-dev rollup-plugin-node-polyfills
Add preferBuiltins:false to rollup.config.js. This resolved prior errors and resulted in the new error of: Uncaught ReferenceError: define is not defined
Add npm install --save define. This, now results in the current blocker:
Uncaught ReferenceError: exports is not defined
I think you missed type: "module" attribute in package.json. Here, the type attribute represents whether the type of javascript interpreter is commonjs or babel. type: "module" indicates that you are going to use babel as the ECMA script interpreter.
I'm trying to understand how this import from # I can't run npm run dev because the module is not found. I think I'm missing something, below are the screenshot and the errors.
As you can see Module not found because of #
Here is my route.js that has # .
I'm using react inside a meteor app. It works fine when running in development mode, but when I run it in production mode and the code is minified, I get the below ReferenceError and minified react error in the browser console when the app loads. The same thing happens when I try to deploy it.
It's being minified using the built in standard-minifier-js. When I meteor remove this package, it works fine, so it's definitely the minification.
I'm stumped. I know that the line in question is part of react-dom, but I can't figure out which part or why it's only throwing an error after minification.
The react error decoder says:
Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue.
Which isn't much more helpful. Any ideas what could be causing the error, or how to troubleshoot it? I'm using the latest versions of everything, AFAICT:
react version: 16.0.0
meteor version: 1.5.2.2
standard-minifier-js version: 2.1.2
Thanks.
b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5149 ReferenceError: av is not defined
at b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4003
at sv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4107)
at dv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4104)
at beginWork (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4243)
at ov (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4941)
at fv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4976)
at lv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5028)
at mv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5182)
at bv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5164)
at Object.updateContainer (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8400)
pv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5149
lv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5042
mv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5182
bv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5164
updateContainer # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8400
(anonymous) # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5603
unbatchedUpdates # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5258
Dr # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5602
render # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8559
(anonymous) # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:93855
s # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:315
u # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:321
b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:3148 Uncaught Error: Minified React error #183; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=183 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at ot (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:3148)
at lv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5043)
at mv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5182)
at bv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5164)
at Object.updateContainer (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8400)
at b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5603
at Object.unbatchedUpdates (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5258)
at Dr (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5602)
at render (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8559)
at b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:93855
I tried another minification package, uglifyjs2, instead of standard-minifier-js and that appears to have worked. But it seems like there's a bug here with either react or meteor.
meteor remove standard-minifier-js
meteor add ssrwpo:uglifyjs2
I am biulding a MEAN application. I started from this template: https://github.com/linnovate/mean
I want to add a module (called cloudinary) so I followed this: http://cloudinary.com/documentation/node_integration#getting_started_guide
(ie: did a npm install and add the config in my server.js)
I also added this in my bower.json:
"dependencies": {
"cloudinary": "latest",
BTW, is this necessary? I did it to have access to cloudinary js file in my public/lib repo. Is this a good practice?
I am not sure, but anyway it did create a public/lib/cloudinary rep.
Then I added this in my app.js:
angular.module('mean.mycars', ['cloudinary']);
I fllowed this for direct html upload: http://cloudinary.com/documentation/node_image_upload#direct_uploading_from_the_browser
So I added this to my assets.json file (wich add it to all my pages in the footer:
"public/lib/cloudinary/js/jquery.min.js",
"public/lib/cloudinary/js/jquery.ui.widget.js",
"public/lib/cloudinary/js/jquery.iframe-transport.js",
"public/lib/cloudinary/js/jquery.fileupload.js",
"public/lib/cloudinary/js/jquery.cloudinary.js",
When I go to my app I get this js error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module mean.mycars due to:
Error: [$injector:modulerr] Failed to instantiate module cloudinary due to:
Error: [$injecto...<omitted>...1) angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:3745
forEach angular.js:323
loadModules angular.js:3711
createInjector angular.js:3651
doBootstrap angular.js:1379
bootstrap angular.js:1394
(anonymous function) init.js:8
trigger angular.js:2445
(anonymous function) angular.js:2716
forEach angular.js:330
eventHandler
I probably forgot to declare something somewhere, but don't know where too look...
If find the solution. The problem wad that I declared 'cloudinary' as an angular module here:
angular.module('mean.mycars', ['cloudinary']);
But it seems that it's not an angular module. So I put this:
angular.module('mean.mycars', ['']);
and the error disapears.
Now I am not sure how to use cloudinary in my app, to upload an image via brower. It looks a bit complicated.
I know this response is several months removed from your original question, but maybe it can help someone else if you've already found a solution.
I am currently working through getting Cloudinary to work in my Angular.js application as well. From what I can tell, you will need to inject 'cloudinary' as a module in your application in order for it to work.
There are two Cloudinary libs that you will need to include, and load order is important. It looks like you're already including 'jquery.cloudinary.js'; you will also need to include 'angular.cloudinary.js' (found here). Make sure that 'jquery.cloudinary.js' is called before 'angular.js', and that 'angular.cloudinary.js' is called after 'angular.js'. The cloudinary_angular project has a helpful example on Github.