Hello I am trying to use yoastseo plugin in NextJS, but when i import it i`m getting some strange errors.
Bellow is my code
import { Researcher, Paper } from 'yoastseo';
const paper = new Paper('Text to analyze', {
keyword: 'analyze',
});
const researcher = new Researcher(paper);
below is what i get in the terminal.
import { AnalysisWebWorker, AnalysisWorkerWrapper, createWorker } from "./src/worker";
^^^^^^
SyntaxError: Cannot use import statement outside a module
And that's what I get in the browser window.
Server Error
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22yoastseo%22 (1:0) # Object.yoastseo
> 1 | module.exports = require("yoastseo");
I used the plugin it with create-react-app without any issues. I guess its related to how NextJS is loading the web worker.
Related
I have a pretty simple problem but I can't for the life of me figure out how to make it work, I've spent hours looking online..
I'm using the got library to work with a weather API here is the code below:
import got from 'got';
import dotenv from 'dotenv';
dotenv.config();
class WeatherApi {
#getApiKey = () => process.env.WEATHER_API;
fetchWeatherData = (city, callback) => {
const apiKey = this.#getApiKey();
const apiUrl = `http://api.openweathermap.org/data/2.5/weather?units=metric&q=${city}&appid=${apiKey}`;
got(apiUrl).then((response) => {
const weatherData = JSON.parse(response.body);
callback(weatherData)
});
}
}
export { WeatherApi }
The code works perfectly when I run it with node, however when I try and run tests using Jest I get the followig:
C:\Users\alfon\OneDrive\Documents\Coding\JavaScript\thermostat\node_modules\got\dist\source\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import create from './create.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | import got from 'got';
| ^
2 | import dotenv from 'dotenv';
3 | dotenv.config();
4 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (weather_api.js:1:1)
My issue is that it seems that only the got library has trouble being imported, if I remove it and run Jest dotenv library gets loaded normally. I have no idea what I'm missing here..
I ended up trying an older version of got (11.8.2), which runs ES35 and that gives no problems at all. I'm guessing maybe the newer version of got which came out one month ago is causing some potential issues?
npm install got#11.8.2
https://www.npmjs.com/package/got
Using a JS sdk of Icon a blockchain. Trying to using the SDK API calls and I'm having issues import or require
When I use Import an error is thrown SyntaxError: Cannot use import statement outside a module
When I use require an error is thrown ReferenceError: HttpProvider is not defined
Below is the link to Icon Icx Github
Icon GitHub
const IconService = require('icon-sdk-js');
//import IconService from 'icon-sdk-js';
const provider = new HttpProvider('https://bicon.net.solidwallet.io/api/v3');
const iconService = new IconService(provider);
const totalSupply = iconService.getTotalSupply().execute();
console.log(totalSupply);
In NodeJS you use require to "import" node modules and dependencies to your project
const IconService = require('icon-sdk-js');
Regarding this line const provider = new HttpProvider('https://bicon.net.solidwallet.io/api/v3');
Where are you importing HttpProvider from? HttpProvider is not built in Javascript library.
If it is a node module, you have to do something similar
const HttpProvider = require('HttpProvider'); (in your question you don't specify what HttpProvider is)
I think you might use IconService.HttpProvider('the url'); to use the constructor
I m quite beginning with svelte and more a backend end developer than javascript. I see few people using Auth0 with svelte/sapper, when I try to import an npm auth0-lock package I have got events not defined error but no error if I link the javascript in html header, what is the way to import auth0-lock correctly ?
the error is thrown in main.js and I just wanted to add :
import Auth0Lock from "auth0-lock";
// // Initializing our Auth0Lock
let lock = new Auth0Lock(
"xxxxxxxxxxxxx",
"xxxxxxxxxx.auth0.com"
);
login = () => {
lock.show();
};
Uncaught ReferenceError: events is not defined at main.js:8 error
I am building a desktop application using Electorn and angular 8. I am trying to import a javascript file in index.html which has content like the following.
import ipcRenderer from 'electron';
import {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} from 'electron-push-receiver/src/constants';
So when I use the above code I get error Uncaught SyntaxError: Unexpected identifier.
and When I use following code I get Uncaught ReferenceError: require is not defined
const { ipcRenderer } = require ('electron')
const {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} = require ('electron-push-receiver/src/constants')
What could be the solution?
All the angular imports work with first snippets above. they do not have require. So I am assuming the first snippet should work as I am importing it in angular.
I am importing the file by specifying the following in the angular.json file.
"scripts": [
"../path/to/.js",
]
For that import for the ipcRenderer to work you have to establish it like so:
import { ipcRenderer } from "electron";
ipcRenderer being a module that you are pulling out of the electron library.
I have been working on a webapp locally and everything is working flawless. But whenever I run npm run build I get the following error message in my console.
ERROR in ./app/containers/Dashboard/Dashboard.js 42:27 Module parse
failed: Unexpected keyword 'var' (42:27) You may need an appropriate
loader to handle this file type. | import BookDay from
"components/BookDay/BookDay"; | import PatientOverview from
"components/PatientOverview/PatientOverview";
import TreatmentPlanner, { var _ref = | /#PURE/ | _jsx(ContentWidget, {}, void 0, _jsx(TreatmentPlanner, {})); } from "components/TreatmentPlanner/TreatmentPlanner"; #
./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 #
./app/containers/PracticePage/Loadable.js #
./app/containers/App/App.js # ./app/app.js # multi
./node_modules/react-app-polyfill/ie11.js ./app/app.js Child
__offline_serviceworker:
My imports look like this:
import ForegroundBlobWrapper from "basicComponents/ForegroundBlob/ForegroundBlobWrapper";
import BookDay from "components/BookDay/BookDay";
import PatientOverview from "components/PatientOverview/PatientOverview";
import TreatmentPlanner from "components/TreatmentPlanner/TreatmentPlanner";
import PlannedAppointments from "components/PlannedAppointments/PlannedAppointments";
import PageTitle from "components/PageTitle/PageTitle";
Also my linter is showing me a very weird problem on the line it is breaking (the import of TreatmentPlanner).
import TreatmentPlanner from "components/TreatmentPlanner/TreatmentPlanner";
Linter error:
I have tried to find out what the problem is, but I honestly do not know what could be causing this.
EDIT:
Found out that the issue might be a styled component, The Treatmentplanner is wrapped inside a styled component called ContentWidget, which is empty. But when I change this to a normal div, it works again? I am even more confused right now.