I started project using Yeoman generator and i want use RxJS. I use js only. I can't import Observable class. I tried
import {Observable } from 'rxjs/Observable';
and I'm getting error:
Uncaught TypeError: Failed to resolve module specifier "rxjs/Observable.js". Relative references must start with either "/", "./", or "../".
How to fix it?
You need webpack. Gary Simon explains it very clearly in this tutorial https://coursetro.com/posts/code/147/How-to-Install-RxJS---Setting-up-a-Development-Environment
You can also use parcel to handle this issue quickly, check out the simple installation guide here
Related
Tried to follow te set up guide for this NestedForm Stimulus component: Installation
Like so:
$ npm install stimulus-rails-nested-form --save
app/javascript/controllers/application.js
import { Application } from "#hotwired/stimulus"
import NestedForm from 'stimulus-rails-nested-form' // Added this
const application = Application.start()
application.register('nested-form', NestedForm) // Added this
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
And I'm getting:
Uncaught TypeError: Failed to resolve module specifier "stimulus-rails-nested-form". Relative references must start with either "/", "./", or "../".
I can see the package properly installed in the node_modules directory and Stimulus is getting loaded properly as I'm using it in other places of the application.
I'm on Rails 7.0.4.
Appreciate any help, cheers!
If you share a bit more about your rails setup that might help.
Your Rails app might not know about your javascripts... have a look here: https://guides.rubyonrails.org/working_with_javascript_in_rails.html
You will either need to use importmaps (in which scenario you wouldn't need npm), or you use esbuild or webpack (I would not recommend the latter).
How do you resolve "Cannot use import statement outside a module" from a dependency when the dependency isn't declared as a module?
I want to use the validator in Svelte/kit to validate emails. However, when importing the ESM version, I get the "Cannot use import statement outside a module" error. I'm using pnpm instead of npm or yarn.
import isEmail from 'validator/es/lib/isEmail'
/node_modules/.pnpm/validator#13.6.0/node_modules/validator/es/lib/isEmail.js:1
import assertString from './util/assertString';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:355:18)
at wrapSafe (node:internal/modules/cjs/loader:1039:15)
at Module._compile (node:internal/modules/cjs/loader:1073:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at nodeRequire
It appears that validator is attempting to use the import statement, but it's package.json does not specify "type": "module". My guess is that this is the root cause of the error.
Debug steps
package.json has "type": "module"
Upgraded to latest version of node
Tried using the non-esm version of validator 'validator/lib/isEmail', but that causes other errors not related to this thread.
Related
SyntaxError: Cannot use import statement outside a module — this solution is for code you control, not for dependencies
"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 — this seems to be very similar, but I'm getting this error in node, not in the browser
Metadata
Node: v16.2.0
Sveltekit: v1.0.0-next.115
Validator: 13.6.0
Have you tried importing like this?
import validator from 'validator'
I tried reproducing your issue with latest SvelteKit. This works fine:
// index.svelte
<script>
import validator from 'validator';
let result = validator.isEmail('foo#bar.com');
console.log(result);
</script>
When I changed the import statement to:
import validator from 'validator/es/lib/isEmail'
I got the error from your question (Cannot use import statement outside a module).
Importing validator/es/lib/isEmail supposedly only imports a subset of the library. I'm not sure how much difference it will make; it might not make any difference. A slightly larger build beats a build that doesn't work. I suggest getting it working first, then optimize the build size if you really need to.
For those that happen to have the same problem while deploying with nodejs using typescript.
"type":"module" was already set in my package.json in the main project. I put the build directory on the server (created by npm run build).
working-dir
|--build
|--index.js
|--...
I thought i had to just run node build/index.js, as I thought everything was packaged.
Turns out I need to add a package.json into the working directory (I think it also works by putting it into the build directory).
server
+ |--package.json
|--build
|--index.js
|--...
// package.json
{
"type": "module"
}
Without more information, if your problem solely lies in a problem with code you are dependent on, consider short term using something like patch-package to make the necessary adjustment, and long term, open up a PR over at the validator.js repo!
for patch-package, just go add the "type": "module" to the package.json at node_modules/validator, and then run npx patch-package validator. You can then version control the outputted diff file, and the changes are made automatically with npm hooks assuming patch-package is a (dev) dependency.
The behavior or defect of the library here is probably from the devs more keeping in mind things like webpack that do esm imports on their own terms, and not with the node module resolution patterns that it appears svelte is using. or at least how the problem has gotten this far.(might be wrong about this!).
After reading their docs: https://github.com/validatorjs/validator.js#es6, it looks like the es part in the import is, so it can be treeshakable. You can fix this error, by just importing it normally:
import isURL from 'validator/lib/isURL';
Try importing like this
import { isEmail } from "validator"
Try to import like below
const {isEmail} = require('validator');
Can anybody help me figure out what is wrong with these imports? I upgraded from Angular 2 to 5 (big jump, I know) and have a couple dependency errors. They include:
import { NgModule, Inject } from '#angular/core';
Error:
[ts] Cannot find module '#angular/core'.
Also...
import { HttpModule } from '#angular/http';
Error:
[ts] Module '"/Users/laurenhesterman/Desktop/StormSensor/front-
stormsensor/node_modules/#angular/http/index"' has no exported member '
HttpModule'.
What might I need to change to fix these?
Thanks so much! Let me know if I can clarify anything.
For the first you can do npm -i #angular/core —save.
To solve the second you could try to use import {HttpClientModule} from ‘#angular/common/http.
So it seems the problem was just related to my IDE (vs Code) rather than my project. It wasn't reading my dependencies correctly after I updated. What I did was:
1.Open a TypeScript file. 2.Click the TypeScript version to the bottom right in the Status Bar. 3.Choose Use Workspace Version from the message box.
See here: https://github.com/Microsoft/vscode/issues/34681
I have encountered an issue where I am trying to perform mutation testing on my util classes in my react project using this http://stryker-mutator.github.io/ library. However I get the following errors,
[2017-05-17 16:29:04.321] [ERROR] CoverageInstrumenterStream - Error while instrumenting file "path/to/something.js", error was: Error: Line 29: Unexpected token
[2017-05-17 16:29:05.586] [ERROR] Stryker - One or more tests errored in the initial test run:
SyntaxError: Unexpected token import
seems the library cant identify the import and the export statements in the file.
I tried to search a fix for this but came up short. It will be grately appreciated if you experts can help me on a workaround, or a solution via grunt where I could change the import and exports to require and module.exports without harming the code format of the logic.
Thanks alot
I have worked with stryker framework. In our project, we were using browserify for importing files. So if you are using the same, you have to provide 'browserify' in framework array in stryker.conf.js.
The problem is that this version of Stryker work with ES5 by default.
There are a new version of Stryker which support ES6 (https://www.npmjs.com/package/stryker-javascript-mutator).
I am developing an app using starter project : https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate.
I am stuck when I need to use 3rd party library.
I want to use js-yaml https://github.com/nodeca/js-yaml
I try to add it in my angular service:
import jsyaml from '../../node_modules/js-yaml/bin/js-yaml.js';
But I get error:
bundle-0d6476.js:75756 Uncaught Error: Cannot find module "../../node_modules/js-yaml/bin/js-yaml.js"
How do I solve this?
Check the docs on resolving modules. To import modules from node_modules, specify the path omitting everything up to and including node_modules. Thus, import jsyaml from 'js-yaml/bin/js-yaml.js' should work.