I'm trying to write jquery inside a rails application. I've imported jquery into the app, but it wasn't recognizing the $. At the top of the .js file I"m working in I imported:
import $ from 'jquery'
window.$ = $
but I get the unexpected identifier error. The error points to the import line.
Rails is not using webpack or other module-aware and es6-aware build tools (until webpacker).
If you want to use modules, either
use webpacker (which needs a specific directory structure), or
use a UMD-like module (the ones that declare dependencies in a way that's compatible with require.js, commonjs and globals) and browserify.
Read more on UMD modules here https://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html
On webpacker, for instance here https://medium.com/statuscode/introducing-webpacker-7136d66cddfb
Related
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.
I am trying to write a JavaScript module that will be imported in the browser. This module should import and patch another which uses UMD (Universal Module Definition).
In this new module I do import 'old.js'; I get the following TypeError: root is undefined. What is the correct way to do it?
I am using react and need to use modules, hence I have to use require.
I found a way to use require in JS browser which is BROWSERIFY.
I installed browserify and diffie-hellman(module I want to use) by npm.
dh.js
var crypto = require('diffie-hellman/browser');
After executing the following command
browserify dh.js -o bundle.js
The bundle file has been created with the commands inside.
now, how to import this bundle.js inside the react app to use the module? I tried to use
import "bundle.js"
but the compiler shows me those errors inside the bundle
Line 6240:82: Unexpected use of 'self'
no-restricted-globals Line 6240:105: Unexpected use of 'self'
no-restricted-globals
shall I import bundle or dh instead?
sorry it's my first time I use browserify.
I have not dealt a lot with writing modules and am using lerna for the first time, and could use a lift from somebody more familiar with these subjects.
I am converting our existing babel hooked common component directory into a lerna module. The shared component module is currently bundled with rollup. I am stuck on a component which imports css from a node_module like so: import 'slick-carousel/slick/slick.css';
The cjs module generated by rollup does require('slick-carousel/slick/slick.css') as I would expect, however the create-react-app which makes use of the in house module does not hook the require properly. When I run the app I get an error where it tries to compile the .css as code:
slick-carousel/slick/slick.css:2
.slick-slider
^
SyntaxError: Unexpected token .
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
...
How do I get the css import in the module to hook properly into the app?
Is there a better way to handle hooking the module for development into our create-react-app packages using lerna?
I'm trying to build a react application using rollup instead of browserify and babel. I realize I need to use the rollup-plugin-babel to transpile jsx, but when I tell rollup the format is iife, the final page loads with an error:
Uncaught ReferenceError: React is not defined
What do I need to add to the rollup.config.js to include the node modules I've installed in package.json in my final build?
Two options:
Include React as a separate <script> tag before your app bundle
Include rollup-plugin-node-resolve in your config file, to pull in dependencies from your node_modules folder.
If you take the second route you'll also need rollup-plugin-commonjs (to convert the CommonJS module into an ES module). I think you would also need to add import * as React from 'react' to each module that contained JSX, otherwise you'll continue to get the ReferenceError.
Note: you might be able to use rollup-plugin-buble to transpile JSX. It's similar to the Babel plugin but much faster (though it doesn't transpile every ES2015 feature)