Uniswap Widget and Next.js - widgets.js not supported - javascript

I created a fresh Next.js project and followed the Uniswap Widget guideline.
// create next app
npx create-next-app#latest
// add Uniswap widget dependency
yarn add #uniswap/widgets
// add Uniswap widget code
<div className="Uniswap">
<SwapWidget
provider={provider}
jsonRpcEndpoint={jsonRpcEndpoint} />
</div>
However, I get this error suggesting I should change React or Uniswap code to make it compatible with Next.js setup.
Is there anyway I can make this work without changing React or Uniswap libraries, as suggested by the error message?
error - Error [ERR_REQUIRE_ESM]: require() of ES Module /home/pomatti/pjs/uniswap/uniswap-widget/node_modules/#uniswap/widgets/node_modules/#web3-react/core/dist/cjs/index.js from /home/pomatti/pjs/uniswap/uniswap-widget/node_modules/#uniswap/widgets/dist/widgets.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/pomatti/pjs/uniswap/uniswap-widget/node_modules/#uniswap/widgets/node_modules/#web3-react/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Related

Vite build: Don't perform typecheck on modules that have been included via the "module" package.json param

I am transitioning my application from Webpack to Vite and I have this custom component library that uses typescript and includes many #types/library-name libraries.
I also have the main frontend repository which I am currently migrating to Vite. It uses this component library.
The problem is that Vite couldn't import this component library at first since there was no "module" property defined in the package.json file of my library. I defined it and pointed it to build/index.ts.
Now, when I include this library from my frontend and perform typecheck using tsc --noEmit, it gives a lot of errors that should've been thrown during the library build, i.e. errors about some modules not being defined, like for example library imports pluralize and during the build of the frontend it throws the following error:
frontend-repo/node_modules/pluralize/pluralize.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/pluralize` if it exists or add a new declaration (.d.ts) file containing `declare module 'pluralize';
How do I make it so that the type resolution for my component library stays local to the library build?

Problem with loading "ES module" when importing in node js [duplicate]

This question already has answers here:
SyntaxError: Cannot use import statement outside a module
(34 answers)
Closed last year.
So I am currently practicing with a trading bot on hardhat. My problem is, when I want to run my script this error shows up:
import './ABIConstants.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
with this suggestion:
(node:1284) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
However, when I do as it tells me and set "type":"module" I get this error:
hardhat.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename hardhat.config.js to end in .cjs, change the requiring code to use dynamic import() which is avakage.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
And the errors continue as I do the above....etc....
How do I fix this?
Heres the command I am using to run the script if it helps
npx hardhat run scripts/ArbitrageBot.js
There are two kinds of modules in nodejs - the older CommonJS which uses require() to load other CommonJS modules and the newer ESM which uses import to load other ESM modules? There are a few ways to mix and match module types, but that requires some additional knowledge and it is always easier if all the modules in your project are of the same type. So, for us to offer specific advice on your project, we need to know everything that you're trying to use in your project and what module type they all are.
The specific error you first report in your question is because you are trying to use import to load other modules from a file that nodejs is assuming is a CommonJS module and it will not allow that. If everything you are programming with is CommonJS modules, then switch to use require() to load your module instead of import. But, if everything isn't CommonJS modules, then it may be a bit more complicated.
The file extension (.mjs or .cjs) can force a module type or the "type": xxx in package.json can force a type. By default, with neither of those in place nodejs assumes your top level module with a .js extension is a CommonJS module where you would use require() to load other CommonJS modules.
The second error you get when you tried to force your top level module to be an ESM module makes it sounds like the module you are trying to import is a CommonJS module.
So, if I had to guess, I'd say the file you are trying to import is a CommonJS file and therefore, life would be easiest if you made your top level file CommonJS. To do that, remove the "type": "module" from package.json and change your import someModule to require(someModule) instead. This will attempt to just let everything be CommonJS modules.

Use Hardhat ES5 together with Sveltekit ES6

I'd like to use Sveltekit together with hardhat but hardhat uses commonjs require syntax, if run npx hardhat test with js ending I get the error:
Error [ERR_REQUIRE_ESM]: require() of ES Module hardhat.config.js from node_modules\hardhat\internal\core\config\config-loading.js not supported. hardhat.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename hardhat.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
If I change to type: commonjs I get this error if I run npm run dev:
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
svelte.config.js:1
import preprocess from "svelte-preprocess";
^^^^^^
SyntaxError: Cannot use import statement outside a module
If I change svelte.config.js to svelte.config.mjs I get the follwing error: You need to create a svelte.config.js file and if I rename hardhat.config.js hardhat doesn't find the config and wants to create a new project.
Is there any way to combine these two even tho there is a mixture of import and require statements?

ionic cordova run android not working. Giving error for strip-final-newline

I am trying to use Background Geolocation in ionic.
When I run ionic cordova run android it is giving me following error:
> cordova.cmd build android
cordova-android-support-gradle-release: ERROR: EXCEPTION: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\xampp\htdocs\myApp\node_modules\strip-final-newline\index.js
require() of ES modules is not supported.
require() of C:\xampp\htdocs\myApp\node_modules\strip-final-newline\index.js from C:\xampp\htdocs\myApp\platforms\android\cordova\node_modules\execa\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\xampp\htdocs\myApp\node_modules\strip-final-newline\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\xampp\htdocs\myApp\node_modules\strip-final-newline\package.json.
Unable to load Platform API from C:\xampp\htdocs\myApp\platforms\android\cordova\Api.js:
Must use import to load ES Module: C:\xampp\htdocs\myApp\node_modules\strip-final-newline\index.js
require() of ES modules is not supported.
require() of C:\xampp\htdocs\myApp\node_modules\strip-final-newline\index.js from C:\xampp\htdocs\myApp\platforms\android\cordova\node_modules\execa\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\xampp\htdocs\myApp\node_modules\strip-final-newline\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\xampp\htdocs\myApp\node_modules\strip-final-newline\package.json.
> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk
[native-run] No hardware devices found, attempting emulator...
[native-run] ERR_NO_TARGET: No targets devices/emulators available. Cannot create AVD because there is no suitable API installation. Use --sdk-info to reveal missing packages and other issues.
[native-run]
[native-run] More details for this error may be available online:
[native-run]
[native-run] https://github.com/ionic-team/native-run/wiki/Android-Errors
[ERROR] An error occurred while running subprocess native-run.
native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-d... exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
After installing npm install strip-final-newline I am finding above error Could you please help?
I had the same problem
I uninstalled strip-final-newline and then downgraded to 2.0.0 with
npm install strip-final-newline#2.0.0

Node can't find modules without .js extension

I have a file, test.js with these lines of code inside:
import {blabla} from "./bla";
async function dataGenerator() {
..........
}
(async() => {
console.log('1')
await dataGenerator()
console.log('2')
})()
Note: Ignore the import structure. It is just fictive for the question. In my file the imports are auto.
When I'm trying to run from terminal with node test.js it returns error:
Cannot find module 'D:\bla' imported from D:\test.js
I have added into package.json the line: "type": "module". Without this it returns:
Cannot use import statement outside a module
I'm using node v14. How can I run the test.js without adding to all the imports ".js". There are functions in functions in functions and is complicated to add .js extension. Is there any npm to run it?
Node.js by default does not attempt to guess the file extension when using import for ES modules. This is different from CommonJS modules with require.
In the documentation for the ES module loader you can read how files are found on disk.
The heading 'Customizing ESM specifier resolution algorithm' states:
The --experimental-specifier-resolution=[mode] flag can be used to customize the extension resolution algorithm. The default mode is explicit, which requires the full path to a module be provided to the loader. To enable the automatic extension resolution and importing from directories that include an index file use the node mode.

Categories

Resources