I am currently working on a nodejs command-line package that should dynamically import a React component basing on the path of the component passed as parameter. My code is the following:
const path = require('path')
const pathArg = process.argv[2]
const componentPath = path.join(filePath, '../../../', pathArg)
const {default} = await import(componentPath)
The component i want to import would be something like
// src/components/Button/index.jsx
function Button () {
return <button>Click me!</button>
}
module.exports = Button
However, when i run my script passing src/components/Button/index.jsx as param, i receive unexpected token "<" while reading <button>, since the file is in jsx.
How can i transpile the React file dynamically (e.g. with Babel) and get rid of the error?
Related
I am trying to embed a JS custom function within my Angular (.ts) component.
The proccess i have gone through:
created and added a .js file with a function of my need
added the reference to this file on my angular.json scripts array
defined the function in my .ts component file
When i do this proccess with a .js file without require('axios') etc. it seems to work perfectly. but my .js file has some libraries (axios, express, cheerio) and when i use 'ng serve' i get an error at my console:
"Uncaught ReferenceError: require is not defined" - when using require
"Uncaught SyntaxError: Cannot use import statement outside a module" - when changing it to import
my .js file beginning:
// const axios = require('axios')
// const cheerio = require('cheerio')
// const express = require('express')
import axios from "axios"
import { Cheerio } from "cheerio"
import { Express } from "express"
const app = Express()
const axi = axios()
const cheer = cheerio()
function getScheduleFromUrl() {}
my .ts component references to the function:
declare function getScheduleFromUrl(): void;
constructor(private tvScheduleService: TvScheduleService) {
getScheduleFromUrl()
}
finally the reference in angular.json:
"src/assets/js/web-scrape-tv-schedule.js"]
Couldnt find a working example of this.
again: using .js function within my .ts component, while the .js file contains some exports
I am unable to import handlebars file in nodejs. Although it is importing the file but not compiling properly with given data.
here is my test.handlebars file code
<div>Hey {{firstname}} {{lastname}}</div>
and this is my index.js file code
const Handlebars = require("handlebars");
const testEmailTemplate = require("./email-templates/test.handlebars")
const template = Handlebars.compile(testEmailTemplate());
console.log(template({ firstname: "Nils", lastname: "Test" }));
And I am getting below output in console
<div>Hey</div>
expected output
<div>Hey Nils Test</div>
Note: - I don't want to use express-handlebar so please suggest some solution only with handlebars.
The require() method expects to get a Node.js module. But in your case, the target file is HTML, and you need to get the content of the file as plain text to use it further. Use for that fs module and it's method fs.readFile() or fs.readFileSync()
The result code should look like:
const fs = require("fs");
const Handlebars = require("handlebars");
const testEmailTemplate = fs.readFileSync("./email-templates/test.handlebars", "utf-8")
const template = Handlebars.compile(testEmailTemplate);
console.log(template({ firstname: "Nils", lastname: "Test" }));
Info: What is require?
I have a local module (speech.js) in my create-react-app src folder that is the google text to speech code on their website. I adjusted it to be an arrow function and use that specific export syntax.
const textToSpeech = require('#google-cloud/text-to-speech');
// Import other required libraries
const fs = require('fs');
const util = require('util');
export const main = async () => {
// Creates a client
const client = new textToSpeech.TextToSpeechClient();
// The text to synthesize
const text = "Hello world";
// Construct the request
const request = {
input: {text: text},
// Select the language and SSML Voice Gender (optional)
voice: {languageCode: 'en-US', ssmlGender: 'NEUTRAL'},
// Select the type of audio encoding
audioConfig: {audioEncoding: 'MP3'},
};
// Performs the Text-to-Speech request
const [response] = await client.synthesizeSpeech(request);
// Write the binary audio content to a local file
const writeFile = util.promisify(fs.writeFile);
await writeFile('output.mp3', response.audioContent, 'binary');
console.log('Audio content written to file: output.mp3');
};
What I'm not understanding is why this syntax isn't working in App.js.
import {main} from './speech';
I get the error, Error: not support and "4 stack frames were collapsed". Quite informative!
Does anyone know what the error could be here? I thought as long as I used es6 style imports and exports I wouldn't receive errors. Could this be due to the first require() statement of speech.js? Any help would be appreciated. I've felt like banging my head against the wall for the past 40 minutes.
May not be the correct answer but I believe it has a good chance of being right. I believe that since node is just a runtime environment and not a part of the actual browser, you aren't able to use node modules with react (a frontend framework). The solution to this quandary would be to use something like electron.
I would like to use require in a node/express app with typescript to import a json. I tried it like this:
const url = `./data/${resource}.json`;
const data = require(url);
but I get the error Cannot find module './data/my-data.json'.
I'd like to use require instead of an import in order to create the data variable dynamically depending on the value of the resource variable.
const path = require('path');
const url = path.resolve(__dirname, `./data/${resource}.json`);
const data = require(url);
The require keyword is a special keyword in nodejs. It is used to load modules, and since your json file is not a module, hence the error. Try this, this way you can dynamically load your json.
import fs from 'fs';
const file = fs.readFileSync(`./data/${resource}.json`).toString();
const data = JSON.parse(file);
There may be better ways to write this function, read mode about the fs module here.
Edit: As someone had alredy pointed out, it is actually possible to dynamicallyrequire json file. Here's how,
import path from 'path';
const uri = path.resolve(__dirname, `<path_to_json_file>`);
const data = require(uri);
However, as a standard practice, use the fs module to load static assets to your project.
import fs from 'fs';
const file = fs.readFileSync(`./data/${resource}.json`).toString();
const data = JSON.parse(file);
I think I can best explain it with code. I have a file in webpack like the following:
import ReactDOMServer from 'react-dom/server';
import Server from './server';
import templateFn from './template';
export default (req, res) => {
const reactString = ReactDOMServer.renderToString(<Server />);
const template = templateFn(html);
res.send(template);
};
I also have an express application where I want to have access to the default exported function. If it makes any difference, this file is the webpack entry file. Here is what I tried in my express app:
const handleRequest = require(path.resolve(webpackConfig.output.path, webpackConfig.output.filename));
app.get('*', (req, res) => {
console.log(handleRequest);
});
I was trying to import the webpack generated file with the hope that I will be able to access the entry file's default export. Well, I was wrong as the output of the import was {}.
Is there a webpack plugin or some kind of a technique to do what I am trying to build? I don't want the express application to be part of the webpack build. That was the main reason I separated the code in this way.
I was able to access contents of webpack using library parameter (webpack.config.js):
output: {
path: ...,
filename: ...,
library: 'myapp',
libraryTarget: 'commonjs'
}
Then access it in the code:
const output = require(path.resolve(webpackConfig.output.path, webpackConfig.output.filename));
const defaultExportFunction = output.myapp.default;