In render.js I have
import { Grid } from 'ag-grid-community';
import { tableMethods } from './table.js';
I created my own custom table methods and decided to try ag-grid since mine aren't as fast as theirs (no surprise). Unfortunately, while I could get my own methods loading from my js file by setting
<script type="module" src="render.js"></script>
I cannot get ag-grid to load, I get this error
Uncaught TypeError: Failed to resolve module specifier "ag-grid-community". Relative references must start with either "/", "./", or "../".
I used npm i ag-grid-community -D to install it. I wasn't sure if I needed the -D, so I tried without that and it still shows same error.
*Note - of course I've tried doing what the error message says. But it didn't resolve and the documentation doesn't mention anything about this.
I was able to get this working by adding following before my render.js file
<script src="ag-grid-community.js"></script>
I also disabled type=module once I realized this is probably the intended way to split up rendering scripts, or at least that was my guess.
Related
I'm giving a try with [react-native-crypto][1] in order to learn how to convert nodejs to be used in React Native project in the future. Unfortunately, I couldn't get it running successfully. I've faced an issue with stream is undefined. ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[0], "stream").Transform.call').
If you have ever faced a similar problem, I'm so grateful for your help.
Also, I attach the screenshot of the issue as the following
For anyone still trying to solve this issue, I have figured out a solution that worked for me. So within node_modules/cipher-base/index.js, the top of the file should have a line which defines the variable Transform as var Transform = require('stream').Transform. For some reason, it does not like the module stream and as such it needs to be changed to readable-stream. Therefore the variable Transform should now read var Transform = require('readable-stream').Transform.
From what I have gathered, the stream module it is trying to refer to isnt actually a module that can be used. The reason why it gets referenced however seems to be because the tsconfig.json file in the root directory specifies "stream": ["./node_modules/readable-stream"] as a path, almost as if to make stream refer to the readable-stream module, which in theory it should refer to when it is called. But in this case it doesnt happen so we need to explicitly define that we are refering to the readable-stream module.
Hope this helps anyone else out there and prevents others scratching their heads for hours on end like it did for me!
I have figured it out by editing in metro.config.js as the following:
resolver: {
extraNodeModules: {
stream: require.resolve('stream-browserify'),
}
},
I have installed angular universal on my app.
Running npm run build:ssr - DONE. WORKS.
Running npm run server:ssr - DONE.WORKS.
After accessing the server URL (localhost:4000), the page is not fully loaded and the following error is raised on the Terminal:
I also faced the same problem, so I would just like to share my findings for the same.
For me, there were two plausible causes/solutions for it:
First, in my project's I18N default JSON file that was en.json, I was having a problem In the structure of the JSON file.
For example, I had the below mistake. I missed the comma after the second label 'FINISH' :
{
"COMMON": {
"EDIT": "Edit",
"FINISH": "Finish"
"QUIT": "Quit",
}
}
So after correcting the structure, the application ran fine without an error.
Secondly, another cause of the issue could be, at runtime transloco was not able to find the correct label in the selected language, so it looked for a fallback language and it could not even find that in the transloco-root.module.ts so after adding my fallback language, it tried to find the same in the fallback language as specified in the transloco-root.module.ts.
So it found out that label and the issue got resolved.
BUT in the second solution provided, you need to have that incorrect label in at least that fallback language's json file in correct format.
I added the fallback language like below:
useValue: translocoConfig({
availableLangs: ['fr', 'en'],
defaultLang: 'en',
reRenderOnLangChange: true,
fallbackLang: 'fr',
prodMode: environment.production,
missingHandler: {
logMissingKey: true
}
})
i18n Transloco wasn't fully configured on the module file.
I'm attempting to put my first full-stack application together and am getting an unexpected syntax error:
"Uncaught SyntaxError: Unexpected token {"
The error is coming from this line of code in my map.js file:
import {userInput} from './algorithm/searchingAlgorithm.js';
ejs file:
<head>
<script type="text/javascript" src="../javascripts/map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCx0LvEwPUgGhpLjCErr24dOnk-VWjo83g&callback=initMap">
</script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
from './algorithm/searchingAlgorithm.js':
export default async function userInput(origin, destination){
I've done a lot of searching and have yet to come up with an answer. I'm using node.js/express and express generator, javascript. I'm also utilizing the google maps api.
The import and export statements are used frequently in web development, but they do not currently work automatically in a browser because they are newer features in the JavaScript language. You need to "build" the code into a format that the browser can execute. Example code on the web tends to assume that you are already doing this.
There are different tools that allow you to do this, such as Rollup or Webpack.
Heads up for anyone running into this issue like I was.
TLDR; make sure to run the import statement from GLOBAL SCOPE.
I ended up trying to insert my first import {test_exported_function} from "./test.js";
from inside of my main function which waits for the DOM content to load before running all of my scripts.
Didn't realize that I needed to execute that line from global scope of the script.
Once I realized that, it suddenly hit me how dumb I was for trying to import from a function scope.
(ﾉ≧ڡ≦) Teehee~!
I'm using the admin-on-rest npm package starter project and trying to plug in a simple SSO Facebook login button using the FacebookAuth npm package. Every time I try to click the "Login" button, I get the following error:
FB.login() called before FB.init()
I'm using an .env file with the following variable: REACT_APP_FACEBOOK_APP_ID and setting it to the right value. I even did console.log() within my app and can see it output.
I checked and I'm only loading the FB SDK once, not multiple times (this was a common issue reported on other threads).
Ok, it turned out to be something pretty dumb, but something to point out nonetheless!
In my .env file, I had accidentally placed a semicolon (;) at the end of the declaration, like this:
REACT_APP_FACEBOOK_APP_ID = XXXXXXXXXXXX;
Apparently .env files do NOT like semi-colons. This was just very difficult to figure out from the error above.
So if any of you want to pull your hair out because of this issue, and you're using similar tech, check to make sure you're syntactically kosher EVERYWHERE variables are being declared.
the funny thing was i forgot to replace your-app-id with my app id:
<script>
FB.init({
appId: 'your-app-id',
autoLogAppEvents: true,
xfbml: true,
version: 'v8.0'
});
</script>
I am creating a Yeoman Generator, which up until this point has been working correctly. My index.js runs correctly in my app folder, generating the initial structure. In that file, I frequently use this.fs.copy() and this.fs.copyTpl(), and both work fine. Now, I am in the process of creating a subgenerator which extends yeoman.generators.NamedBase as is required from reading the documentation here.
My file structure appears to be correct according to the documentation on the same page I linked to above. It is like so:
├───package.json
├───app/
│ └───index.js
└───view/
└───index.js
└───templates/
└───views/
└───view.html
Here is the code I am attempting to use to generate this new "view" in my project, located in the index.js in the view directory.
'use strict';
var yeoman = require('yeoman-generator');
module.exports = yeoman.generators.NamedBase.extend({
copyFile: function() {
this.fs.copyTpl(
'views/view.html',
'app/views/'+this.name.toLowerCase()+'.html',
{ name: this.name.toLowerCase() }
);
}
});
I ran yo {generatorname}:view helloWorld expecting it to create a new file based on the view.html template, which is the following file, very simply:
<p>This is the <%= name %> view.</p>
When I ran that command, I got the following error.
events.js:85
throw er; // Unhandled 'error' event
^
TypeError: Cannot read property 'toString' of null
at copy.process (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy-tpl.js:11:33)
at applyProcessingFunc (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy.js:12:16)
at EditionInterface.exports._copySingle (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy.js:52:24)
at EditionInterface.exports.copy (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy.js:22:17)
at EditionInterface.module.exports [as copyTpl] (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy-tpl.js:9:8)
at module.exports.yeoman.generators.NamedBase.extend.copyFile (/Users/woodruffjb/dev/yeoman/{generatorname}/view/index.js:7:11)
at /Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/lib/base.js:408:16
at processImmediate [as _immediateCallback] (timers.js:358:17)
I attempted to see if the issue was that this.name was undefined or null, but when I did a console.log(this.name) I got the correct response, which was helloWorld. After a lot of googling the only stuff I could find on that error is for other things completely unrelated to what I am attempting to do, including Atom packages and Node.js server code.
All I can think of is that I'm somehow using this.fs.copyTpl() incorrectly? However, I am using it exactly the same as I use it in my app/index.js file to do the initial project setup. After all my searching I am stuck with this issue. According to the documentation on that function located here I seem to be doing it right. Anybody know my error?
Chances are 'views/view.html' is not found on disk.
This is because every this.fs methods won't magically resolve your paths. The safe way is to always provide absolute path. In your case you want to copy the file located in your template directory, so you'll use this.templatePath('views/view.html') to get the absolute path to it.