Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Data Graham: Dec 28, 2009; 📈📊🍪😋

The reason I'm not using CanvasTexture (I tried that first) is because of CORS issues. I'm pulling in all the images from the server side, and if I load all the elements into the canvas and then try to map it directly onto the box, I get tainted canvas errors. That doesn't happen if I export it as a dataURL and then map it as an image.

Before I woke up and read that last post I was thinking "hmmm what about a separate canvas for each face?" I might try that, especially if I can figure out a) the CORS issues and b) how to map the canvas even if it's off-screen (maybe it doesn't matter in that case, whereas if I do a toDataURL on an invisible canvas the dataURL is also invisible and the image is whatever size the canvas is painted as via CSS; though maybe part of that was because I didn't have my renderAll triggers working at the time).

(Either way the updates are infrequent, they're not the source of the performance issues. I've been trying to figure out whether they're resulting from basic vs Phong textures, ambient vs directional lighting, etc. But in general it really seems to stem from manipulating the orbit controls and now that I've cleaned stuff up and have less debugging stuff going it seems to be behaving a bit better anyway.)

# ? May 31, 2021 12:37

Adbot: ADBOT LOVES YOU

# ? May 26, 2024 23:01

Tea Bone: Feb 18, 2011; I'm going for gasps.

I have a react app that I'm trying to make compatible with IE 11 (hopefully, 9 and 10 too), I've added the following polyfills:

code:

import 'react-app-polyfill/ie9';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

But nothing loads. I've traced the issue down to the Dropdown component from the react-bootstrap library. If I remove any instances of that then the app loads fine. I've tried googling around for problems with IE and that specific library/component but not finding anything. Is there a polyfill I'm missing? It also doesn't help that the IE developer console doesn't seem to be giving me anything in the way of pointers where the problem is.

# ? Jun 1, 2021 09:15

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Tea Bone posted:

I have a react app that I'm trying to make compatible with IE 11 (hopefully, 9 and 10 too), I've added the following polyfills:
code:
import 'react-app-polyfill/ie9';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';
But nothing loads. I've traced the issue down to the Dropdown component from the react-bootstrap library. If I remove any instances of that then the app loads fine. I've tried googling around for problems with IE and that specific library/component but not finding anything. Is there a polyfill I'm missing? It also doesn't help that the IE developer console doesn't seem to be giving me anything in the way of pointers where the problem is.

Probably stupid ideas:

- Read the source of that dropdown and see what fills you are missing.
- Wrap the function that renders it with try catch and log the error manually.

# ? Jun 1, 2021 15:00

Tea Bone: Feb 18, 2011; I'm going for gasps.

Lumpy posted:

Probably stupid ideas:

- Read the source of that dropdown and see what fills you are missing.
- Wrap the function that renders it with try catch and log the error manually.

Thanks, polyfills are a bit outside of my comfort zone. I've had a peek at the source code of the component, but wouldn't know where to even start looking to identify what polyfills I need. (Or if a missing polyfill is even the problem?)

I've tried wrapping it in a try and catch and nothing happens, literally:

code:

try {
            <Dropdown> </Dropdown>
            console.log('Dropdown loaded')
        } catch (e) {
            console.error(e)
        }

nothing renders, and neither "Dropdown loaded" nor the error shows up in the console.

I get the same issue even if I put the Dropdown in another function that's never called. It's presence in the source code whether called or not seems to be enough to stop the app rendering.

Edit: nevermind, there was a spread operator in the library that wasn't getting transpiled.

Tea Bone fucked around with this message at 16:40 on Jun 1, 2021

# ? Jun 1, 2021 15:31

Impotence: Nov 8, 2010; Lipstick Apathy

Tea Bone posted:

but wouldn't know where to even start looking to identify what polyfills I need. (Or if a missing polyfill is even the problem?)

A fun thing to do is to load https://polyfill.io/v3/polyfill.js?features=es2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019 from the browser you want to polyfill, and see which it automatically decides to give you

# ? Jun 1, 2021 17:44

Aeolius: Jul 16, 2003; Simon Templeman Fanclub

I'm a JS novice, and while I feel like this probably has a pretty elementary answer, google is basically telling me "go fish."

So, here's what I started today: https://remorsefullustrouscomments.aeoli.repl.co/index2.html

It's a B&W background and a color image, plus a bunch of different CSS clip-path classes corresponding to image-map positions, with some JS on mouseover and mouseout to swap between 'em.

The one that's different right now is #2, where I'm trying to transition from clip-path, which seems to only admit one shape at a time, to mask-image, which lets me composite multiple SVG masks. The idea is that as different (eventual) conditions are met, some of these visual elements should start to remain lit. Which means I'll need to keep a running list of those and then add that growing pile to each mask update.

But I'm hung up on the basic aspects of it. Assigning multiple classes just results in overriding, so this is, I guess, definitely where JS is going to shine. But what JS operation could let me apply multiple comma-separated url() component values to -webkit-mask-image?

The pertinent CSS property might look roughly like this, for reference:

code:

.point2 {
  mask-image: url("svg/point2.svg"), url("svg/sceneleft.svg")/*[, arbitrary number of other url() masks go here]*/;
  -webkit-mask-image: url("svg/point2.svg"), url("svg/sceneleft.svg")/*[, same]*/;
}

So far the closest I've gotten to a solution that works -- which is to say, one that merely bugs things up, instead of throwing console errors -- is

code:

document.getElementById("wheelzone").setAttribute('style', '-webkit-mask-image: url("svg/point5.svg"), url("svg/point6.svg")');

...But yeah, doesn't really "work." Any and all pointers welcome!

edit: and of course as soon as I work up the gumption to post, I notice that there was another class interfering with the line above. So. I guess I got it, haha. Never mind!

Aeolius fucked around with this message at 19:32 on Jun 2, 2021

# ? Jun 2, 2021 05:35

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Aeolius posted:

I'm a JS novice, and while I feel like this probably has a pretty elementary answer, google is basically telling me "go fish."

So, here's what I started today: https://remorsefullustrouscomments.aeoli.repl.co/

It's a B&W background and a color image, plus a bunch of different CSS clip-path classes corresponding to image-map positions, with some JS on mouseover and mouseout to swap between 'em.

The one that's different right now is #2, where I'm trying to transition from clip-path, which seems to only admit one shape at a time, to mask-image, which lets me composite multiple SVG masks. The idea is that as different (eventual) conditions are met, some of these visual elements should start to remain lit. Which means I'll need to keep a running list of those and then add that growing pile to each mask update.

But I'm hung up on the basic aspects of it. Assigning multiple classes just results in overriding, so this is, I guess, definitely where JS is going to shine. But what JS operation could let me apply multiple comma-separated url() component values to -webkit-mask-image?

The pertinent CSS property might look roughly like this, for reference:
code:
.point2 {
  mask-image: url("svg/point2.svg"), url("svg/sceneleft.svg")/*[, arbitrary number of other url() masks go here]*/;
  -webkit-mask-image: url("svg/point2.svg"), url("svg/sceneleft.svg")/*[, same]*/;
}
So far the closest I've gotten to a solution that works -- which is to say, one that merely bugs things up, instead of throwing console errors -- is
code:
document.getElementById("wheelzone").setAttribute('style', '-webkit-mask-image: url("svg/point5.svg"), url("svg/point6.svg")');
...But yeah, doesn't really "work." Any and all pointers welcome!

edit: and of course as soon as I work up the gumption to post, I notice that there was another class interfering with the line above. So. I guess I got it, haha.

.cssText?

JavaScript code:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

# ? Jun 2, 2021 05:42

Aeolius: Jul 16, 2003; Simon Templeman Fanclub

Grump posted:

.cssText?

Hell, this looks even simpler. Thanks!

# ? Jun 2, 2021 06:02

tight aspirations: Jul 13, 2009

Posting on behalf of a friend, I hope that's ok.

quote:

I�m trying to map an array but trying to pass in a variable from outside to use as my . Eg) mappedData.variable. Trouble is it won�t recognise the value in the variable.

If I do �mappedData.age� it works fine.

But if

const myVar = age

Const howmanyage = didataCtx.map((mappedData) => (mappedData.myVar)

It doesn�t work, I�m sure I�m doing something really stupid or missing some key piece of information about scoping.

I have no idea about js myself, but if anyone has any ideas I could pass back to him, that's be super cool.

# ? Jun 4, 2021 13:28

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

If it's more like

const myVar = 'age'
(Needs to be a quoted string, otherwise it's assigning the value of variable age to myVar.)

then you can access the property of an object with

mappedData[myVar]

It evaluates to

mappedData['age']

which is the same as

mappedData.age

# ? Jun 4, 2021 13:57

tight aspirations: Jul 13, 2009

Thanks very much! I'll pass it on.

e: You've made him very happy, thanks again!

tight aspirations fucked around with this message at 14:10 on Jun 4, 2021

# ? Jun 4, 2021 14:03

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

I started messing around with Gatsby, and it's great! I get to have reusable components for things, and SEO seems to be supported pretty well. One thing I'm not too clear on, but it's been a long day: how do I implement things in the virtual DOM that I used to do in the physical DOM? For instance, I had animations triggered with Intersection Observer - what's the React/Gatsby way of doing that? Same with this bit of code that I was using for a mostly-CSS carousel:

code:

document.querySelector('.carousel__left').addEventListener('click', function(){
	scrollCarousel('left');
});

document.querySelector('.carousel__right').addEventListener('click', function(){
	scrollCarousel('right');
});

const carouselItems = document.querySelectorAll('.carousel__item');

function scrollCarousel($direction) {
	let scrollAmount = carouselItems[0].clientWidth;
	
	switch($direction) {
		case 'left': 
		document.querySelector('.carousel__inner').scrollLeft -= scrollAmount;
		break;
		case 'right':
		document.querySelector('.carousel__inner').scrollLeft += scrollAmount;
	}
}

What would be the cleanest implementation of that? I want to make sure I'm doing things the correct way (which I'm aware there's probably a better way to write that even in plain JS, but it does the job).

# ? Jun 7, 2021 23:02

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

I started messing around with Gatsby, and it's great! I get to have reusable components for things, and SEO seems to be supported pretty well. One thing I'm not too clear on, but it's been a long day: how do I implement things in the virtual DOM that I used to do in the physical DOM? For instance, I had animations triggered with Intersection Observer - what's the React/Gatsby way of doing that? Same with this bit of code that I was using for a mostly-CSS carousel:
code:
document.querySelector('.carousel__left').addEventListener('click', function(){
	scrollCarousel('left');
});

document.querySelector('.carousel__right').addEventListener('click', function(){
	scrollCarousel('right');
});

const carouselItems = document.querySelectorAll('.carousel__item');

function scrollCarousel($direction) {
	let scrollAmount = carouselItems[0].clientWidth;
	
	switch($direction) {
		case 'left': 
		document.querySelector('.carousel__inner').scrollLeft -= scrollAmount;
		break;
		case 'right':
		document.querySelector('.carousel__inner').scrollLeft += scrollAmount;
	}
}
What would be the cleanest implementation of that? I want to make sure I'm doing things the correct way (which I'm aware there's probably a better way to write that even in plain JS, but it does the job).

JavaScript code:

const MyCarousel = () => {
  
  // do setup and other stuff
  const switch = (direction) => { ... };

  return (
    <div>
       { your content or whatever }
      <button onClick={() => switch('left')}>Left</button>
      <button onClick={() => switch('right')}>Right</button>
    </div>
  );
}

# ? Jun 8, 2021 18:27

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Is Typescript stuff allowed here, too?

Is it possible to override the constructor of the Date type in Typescript without declaring a derivative type? Because I can just add methods fine like this:

code:

declare global {
    interface Date {
        doSomething() : Date;
    }
}

Date.prototype.doSomething = function() {
    return this;
}

export {};

But when I touch the constructor in any way (I can't even find the proper way), it starts acting up.

The idea is mostly trying to teach the Date constructor about that stupid YYYYMMDD date format used everywhere in our data tables and avoiding to declare a new type. I have plenty of helper functions on Date itself, so it'd be nice to have it parse that format, too, instead of veering off to a derived type. Apparently I need to do something with the DateConstructor interface, but I'm running against a wall.

# ? Jun 10, 2021 23:16

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

Combat Pretzel posted:

Is it possible to override the constructor of the Date type in Typescript without declaring a derivative type?

Overriding the constructor doesn't sound like a great idea. Perhaps a factory function could do the trick for you?

https://stackoverflow.com/questions/46664732/typescript-how-to-add-static-methods-to-built-in-classes suggests something like

TypeScript code:

declare global {
    interface DateConstructor {
        fromYYYYMMDD: (String source) => Date
    }
} 

Date.fromYYYYMMDD = function(String source) {
  let date = new Date;
  date.whatever = parsedBitFromSource;
  return date;
}

# ? Jun 11, 2021 01:41

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Oh, that's how you do it with DateConstructor. Thanks for the solution. That'll work as well, so long it's combined with the other helper functions and not separate.

# ? Jun 11, 2021 05:45

Tea Bone: Feb 18, 2011; I'm going for gasps.

I have a react native app on expo that uses token authentication. Everything seems to work great on ios, but on android even if I don't send any tokens I somehow still get authenticated.

I think I've worked out that on android the app is still sending session data. The server endpoint accepts both session and token authentication so when the token fails it falls through to the session which succeeds.

I've been going nuts trying to work out what's happening. It's always the same user session that gets sent even after logging in as a different user using a token.

I've not touched session authentication at all on the app so I have no idea where it was initially set. Is this something that android does automatically? Is there any way to stop the app sending the session data?

# ? Jun 11, 2021 17:17

fsif: Jul 18, 2003

Very particular question here, but might as well take a stab at it: has anyone here attempted to implement page transitions in Next.js by using GreenSock?

Best I can tell people generally use Framer Motion over GreenSock here (being that the former is declarative), but I already have gsap installed as a dependency for a canvas-based API and I�m trying to assess the feasibility of foregoing adding a second 30+ KB gzipped animation library.

# ? Jun 13, 2021 04:01

MrMoo: Sep 14, 2000

Page transitions are in Chome 92, although very basic set.

# ? Jun 13, 2021 22:48

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's the generally preferred YAML package nowadays?

# ? Jun 15, 2021 15:54

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I suppose there isn't any intrinsic functionality to Node.js/V8 to get the memory footprint of an object? I just have to iterate through it and estimate?

It's for some heuristic deciding when to ditch cached results of database queries. It's the goddamn varchars.

# ? Jun 18, 2021 20:41

MrMoo: Sep 14, 2000

Sounds like you want a WeakMap?

# ? Jun 19, 2021 04:02

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I'd like a more controlled approach. I want to assign a certain amount of memory to that cache and then jerryrig some tunable garbage collector that decides based on timeouts, hit rate and memory footprint. I suppose counting manually could work, but if there would have been some native method, that I couldn't find a reference to, that'd be nice, because I'd expect it to be faster (especially for larger datasets).

# ? Jun 19, 2021 07:46

Sab669: Sep 24, 2009

Hey dumb question - I just started a job yesterday that uses Angular, which I've never even so much as looked at before yesterday. I'm following along with the shopping cart tutorial on angular.io and on a previous step they had me add:

code:


[routerLink]="['/products', product.id]"

to an anchor tag.

On this step I'm up to now, the syntax they tell me to add to a button is:

code:


routerLink="/cart"

Why the brackets for the attribute / value in the first example and not the second? Does it not really matter and it's smart enough to infer what was meant?

# ? Jul 7, 2021 13:09

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Sab669 posted:

Hey dumb question - I just started a job yesterday that uses Angular, which I've never even so much as looked at before yesterday. I'm following along with the shopping cart tutorial on angular.io and on a previous step they had me add:
code:
[routerLink]="['/products', product.id]"
to an anchor tag.

On this step I'm up to now, the syntax they tell me to add to a button is:
code:
routerLink="/cart"
Why the brackets for the attribute / value in the first example and not the second? Does it not really matter and it's smart enough to infer what was meant?

It checks whether the argument is an array or string; in the first case, all elements beyond the first are passed in as route parameters.

# ? Jul 7, 2021 13:42

Sab669: Sep 24, 2009

Oh OK, so the routerLink "attribute" only needs them if the value justifies it, essentially?

# ? Jul 7, 2021 13:54

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Regarding React... or rather running a development server.

I've set up a React Typescript project, eventually linked my own libraries, when everything went to poo poo. It primarily got upset at the async keyword being present in my linked Typescript code, yapping something about loaders. Not being evident how to fix it in the template itself, I just upgraded to and set-up Webpack 5 et al from scratch. Now the React Router stuff doesn't entirely work. On the setup of the React template, refreshing the page in the browser, the site picked up where it should, whereas on Webpack's dev server, I just get an "Cannot get /a/b/c" error, if I load into anything other than /. Essentially, clicking my way through React Router links itself works fine, until I want to refresh the page in place.

I suppose this is just a configuration problem, since you'd probably want it to always load behind the scenes into / regardless of URL, but I don't see how. The same issue would probably happen on eventual deployment, so it'd be nice to know.

# ? Jul 7, 2021 16:39

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Yeah, sounds like it's using relative paths from "directories" at landing, which is not a problem when you start from the root as it just changes the history stack, not the actual directory of the page.

# ? Jul 7, 2021 18:35

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Combat Pretzel posted:

Regarding React... or rather running a development server.

I've set up a React Typescript project, eventually linked my own libraries, when everything went to poo poo. It primarily got upset at the async keyword being present in my linked Typescript code, yapping something about loaders. Not being evident how to fix it in the template itself, I just upgraded to and set-up Webpack 5 et al from scratch. Now the React Router stuff doesn't entirely work. On the setup of the React template, refreshing the page in the browser, the site picked up where it should, whereas on Webpack's dev server, I just get an "Cannot get /a/b/c" error, if I load into anything other than /. Essentially, clicking my way through React Router links itself works fine, until I want to refresh the page in place.

I suppose this is just a configuration problem, since you'd probably want it to always load behind the scenes into / regardless of URL, but I don't see how. The same issue would probably happen on eventual deployment, so it'd be nice to know.

Not sure about the webpack dev server part, but on a live deployment you just make it so each backend route (outside of whatever custom API routes you have) serves the same SPA bundle, and have the react router handle the rest.

# ? Jul 7, 2021 19:04

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Thanks. Mentioning the proper term for this all led me to find out that it's just this setting to make it work properly with Webpack dev server:

code:

devServer {
    historyApiFallback: true
}

Or --history-api-fallback respectively.

# ? Jul 7, 2021 19:10

Roadie: Jun 30, 2013

Serious recommendation: If you're not doing anything fancy, just use Next.js and its static build support instead of Webpack. It has Typescript, routing, etc out of the box with zero config stuff needed (but you can still inject things into the webpack config it uses if you really need to).

# ? Jul 7, 2021 19:23

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Dear god no. Everything related to web applications is getting tiring.

Doing the backend stuff in Node.JS seemed pretty easy, so I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy. Yet I lost hours on end today, because for some reason it (well, the template and toolchain, or whatever, it installs) doesn't support some standard loving Typescript feature/keyword, introduced end of 2015 of all things, out of the box. And trying to find a solution, I only chased my tail, because daily reinventions of the wheel litter the web with all sorts of outdated help and advice.

I have it working currently with my presumably janky Webpack configuration and I'm not gonna touch it anymore, until that house of cards collapses again. Probably takes just one npm update.

--edit:
Also, I'm not even sure it was the wisest idea to go fully Typescript. The initial idea was to type everything so that the TS compiler catches random idiocy, but whenever I'm looking up React things related to Typescript, they're all functional with plenty of any-types. Oh the time spent figuring out this React Hooks and classes things being like cats and water.

Combat Pretzel fucked around with this message at 19:55 on Jul 7, 2021

# ? Jul 7, 2021 19:39

HexiDave: Mar 20, 2009

Combat Pretzel posted:

Dear god no. Everything related to web applications is getting tiring.

Doing the backend stuff in Node.JS seemed pretty easy, so I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy. Yet I lost hours on end today, because for some reason it (well, the template and toolchain, or whatever, it installs) doesn't support some standard loving Typescript feature/keyword, introduced end of 2015 of all things, out of the box. And trying to find a solution, I only chased my tail, because daily reinventions of the wheel litter the web with all sorts of outdated help and advice.

I have it working currently with my presumably janky Webpack configuration and I'm not gonna touch it anymore, until that house of cards collapses again. Probably takes just one npm update.

--edit:
Also, I'm not even sure it was the wisest idea to go fully Typescript. The initial idea was to type everything so that the TS compiler catches random idiocy, but whenever I'm looking up React things related to Typescript, they're all functional with plenty of any-types. Oh the time spent figuring out this React Hooks and classes things being like cats and water.

Check your tsconfig.js file to see if it's set to compile a more modern standard. Async/await and such all work fine, but you also need to make sure that you're putting it in something that supports Promises directly, or you have to wrap them in one.

Typescript's whole deal is that it helps you keep types correct over time, rather than just catching initial mistakes. Plain JS can absolutely seem like it works fine, but you won't know until it explodes when it's missing a property somewhere. Typescript isn't generally a huge amount of effort on top of regular JS, but the times it's saved my rear end over the last few years is kind of crazy.

# ? Jul 7, 2021 20:07

Roadie: Jun 30, 2013

Combat Pretzel posted:

Dear god no. Everything related to web applications is getting tiring.

Doing the backend stuff in Node.JS seemed pretty easy, so I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy. Yet I lost hours on end today, because for some reason it (well, the template and toolchain, or whatever, it installs) doesn't support some standard loving Typescript feature/keyword, introduced end of 2015 of all things, out of the box. And trying to find a solution, I only chased my tail, because daily reinventions of the wheel litter the web with all sorts of outdated help and advice.

I have it working currently with my presumably janky Webpack configuration and I'm not gonna touch it anymore, until that house of cards collapses again. Probably takes just one npm update.

--edit:
Also, I'm not even sure it was the wisest idea to go fully Typescript. The initial idea was to type everything so that the TS compiler catches random idiocy, but whenever I'm looking up React things related to Typescript, they're all functional with plenty of any-types. Oh the time spent figuring out this React Hooks and classes things being like cats and water.

Again, I will point at Next.js, because it does all this stuff for you. You literally just add its dev dependencies and run next dev or next build / next export. No configuration stuff needed, supports a bunch of major build-related libraries out of the box and has literally hundreds of regularly updated working boilerplate examples you can copy-paste for every major case of "how do I use [X] with this".

# ? Jul 7, 2021 20:21

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

HexiDave posted:

Check your tsconfig.js file to see if it's set to compile a more modern standard. Async/await and such all work fine, but you also need to make sure that you're putting it in something that supports Promises directly, or you have to wrap them in one.

It happened whenever things were compiled. The error message was pretty much this (I just looked up a version of it on the web, project's over at work):

quote:

ERROR in ./foo.js
Module parse failed: C:\Users\Redark\Desktop\asyncFuncTest\node_modules\babel-loader\lib\index.js!C:\Users\Redark\Desktop\asyncFuncTest\foo.js Unexpected token (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:6)

Unexpected token was async. I have all tsconfig.json files set to esnext and es2020 where applicable. Was that wrong?

I mean I have it working now, mainly just by switching to custom Webpack, with the same tsconfigs. But it was still unfortunate it didn't work out of the box.

--edit: One of the things I had to do was to use that Babel plugin, one of its purposes is to deal/"transform" that async stuff, for reasons: https://babeljs.io/docs/en/babel-plugin-transform-regenerator/

Combat Pretzel fucked around with this message at 20:51 on Jul 7, 2021

# ? Jul 7, 2021 20:28

HexiDave: Mar 20, 2009

Combat Pretzel posted:

It happened whenever things were compiled. The error message was pretty much this (I just looked up a version of it on the web, project's over at work):

Unexpected token was async. I have all tsconfig.json files set to esnext and es2020 where applicable. Was that wrong?

I mean I have it working now, mainly just by switching to custom Webpack, with the same tsconfigs. But it was still unfortunate it didn't work out of the box.

One possibility is that your loader is looking for .ts files, and foo.js isn't getting picked up by the loader's regex in webpack's config. There are also different targets (what it's compiling into, e.g. es5) and libs (e.g. es2020).

If you try your code in a project started with create-react-app (npx create-react-app my-app --template typescript), does it still throw errors?

# ? Jul 7, 2021 20:52

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Combat Pretzel posted:

I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy.

React isn't a complete front-end framework on it's own, as you've found the hard way, but people are recommending Next because it is (meant to be, for most people). I know your project is done, I just wanted to try to help clarify that.

# ? Jul 8, 2021 18:40

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Roadie posted:

Again, I will point at Next.js, because it does all this stuff for you. You literally just add its dev dependencies and run next dev or next build / next export. No configuration stuff needed, supports a bunch of major build-related libraries out of the box and has literally hundreds of regularly updated working boilerplate examples you can copy-paste for every major case of "how do I use [X] with this".

That sounds interesting, I think I'm going to try a Next.js small project. The biggest question I have is: forms? I've relied on Wordpress plugins for contact forms for so long that I don't know how I'd handle validation, submission, etc. for simple contact forms. There's nothing in Next.js's docs about forms, so what's recommended to make one? Netlify's form setup seems simple enough for actually sending the emails, but I don't know if that's the best way.

# ? Jul 8, 2021 20:21

barkbell: Apr 14, 2006; woof

i default to reaching for nextjs for everything now tbh

for forms: https://nextjs.org/blog/forms

# ? Jul 8, 2021 21:21

Adbot: ADBOT LOVES YOU

# ? May 26, 2024 23:01

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

I was happily plugging along in Next.js when this error popped up:

code:

Failed to compile

./node_modules/etag/index.js:22:0
Module not found: Can't resolve 'fs'
null

I wasn't doing anything fancy, just adding components and JSX. Even undoing things to the last point it was working doesn't fix anything. I stopped the dev environment and reloaded it, and still nothing. I'd done so little that I just started over in a new directory with npx create-next-app, and that one works fine.

Hoping that doesn't happen again, but I'd like to know how to fix it if it does.

I need advice: say you're creating a five page informational site with Next.js, nothing special, just some content and images and a contact form. What's your process like? Do you use a starter? My process has been to use Wordpress (with Local by Flywheel) and base the site off a custom theme I created that I'd developed over the years. So I want something as smooth as that, even if it takes me a while to learn how to get it that way. It seems like there's so many ways of doing things, so I want to know what you actual goons do, not people trying to convince me to use their Tailwind/Jekyll/etc. starter or buy their udemy course.

# ? Jul 9, 2021 22:56

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »