I use Nuxt, and sometimes, when I want to use some npm packages, I have this error:
SyntaxError
Unexpected token '<'
The stack:
vm.js:102:7
new Script
internal/modules/cjs/loader.js:1114:10
Module._extensions..js
internal/modules/cjs/loader.js:950:32
Module.load
internal/modules/cjs/loader.js:790:14
Module._load
internal/modules/cjs/loader.js:974:19
Module.require
webpack:/external "vue-typeahead-bootstrap":1:
Object.vue-typeahead-bootstrap
webpack/bootstrap:25:
__webpack_require__
pages/account/tabs/addresses.js:693:81
Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/address/form/country.vue?vue&type=script&lang=js&
webpack/bootstrap:25:
I have this error for example on this package: vue-typeahead-bootstrap
If I import the package:
import VueTypeaheadBootstrap from ['vue-typeahead-bootstrap'](https://github.com/mattzollinhofer/vue-typeahead-bootstrap)
export default {
components: { VueTypeaheadBootstrap },
}
It throws the error.
Is it because the package is not supported or something ?
You may try to transpile it. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#transpile
Add the package name like this
{
build: {
transpile: [
({ isServer }) => 'vue-typeahead-bootstrap'
]
}
}
As answered here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap/issues/19#issuecomment-645510809
Related
I have an issue where I am trying to import an object from a types package in my project, built with yarn work spaces and Turbo-repo. But I am unable to because I get this error.
import {Injectable} from "#nestjs/common"
import {SAMPLE_SONG_INFO, Song} from "types"
#Injectable()
export class CurrentSongService {
private currentSong: Song = SAMPLE_SONG_INFO
get() {
return this.currentSong
}
set(song: Song) {
this.currentSong = song
}
}
I import it with "types": "*", in package.json. I have no project references setup in tsconfig.json
A brief overview of types file:
const SAMPLE_SONG_INFO: Song = {
name: "While My Guitar Gently Weeps",
album: "The Beatles",
artist: "The Beatles",
imageUrl: "sample-album-cover.jpeg"
}
interface Song {
name: string
album: string
artist: string
imageUrl: string
}
export type {Song}
export {SAMPLE_SONG_INFO}
When I run the application the error I get is:
const SAMPLE_SONG_INFO: Song = {
^^^^^^^^^^^^^^^^
SyntaxError: Missing initializer in const declaration
at compileFunction (<anonymous>)
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/media/joshua/379a09fe-3da5-4787-9a8c-cb522be8375d/code/personal/music-circle/apps/api/src/websockets/current-song/current-song.service.ts:2:1)
I run the program with NestJS run dev.
In NextJS I fixed this with next-transpile-modules.
Any help would be appreciated.
Thanks.
I am stuck with an issue,
I have to generate a 6 digit alphanumeric CODE which should be unique and for that i am using nanoid,
Now when i code this:
const {nanoid} = require("nanoid");
const ID = nanoid();
I got error:
const {nanoid} = require("nanoid");
^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\HP\Desktop\test\node_modules\nanoid\index.js from C:\Users\HP\Desktop\test\server.js not supported.
Instead change the require of index.js in C:\Users\HP\Desktop\test\server.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (C:\Users\HP\Desktop\test\server.js:1:18) {
code: ←[32m'ERR_REQUIRE_ESM'←[39m
}
if I code this:
import { nanoid } from 'nanoid'
const id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"
i got error:
(node:4636) 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)
C:\Users\HP\Desktop\test\server.js:4
import { nanoid } from 'nanoid'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47
Now I have tried changing package.json file
"type":"module"
but my project use babel and it will automatically convert import to require and as result first error come again.
could you please tell me how to do nanoid with require'
Thank you
This is a feature, not a bug. See the changelog for details of the breaking change in version 4.0
https://github.com/ai/nanoid/issues/365
I have a folder structure as following
src
--/lib
----/errors
------/notFound.ts
in notFound.ts, I'm exporting this class
export abstract class HttpError extends Error {
abstract statusCode: number;
constructor(message: string) {
super(message);
Object.setPrototypeOf(this, HttpError.prototype);
}
abstract serializeErrors(): { message: string; field?: string }[];
}
export class NotFoundError extends HttpError {
statusCode = 404;
constructor() {
super('Route not found');
Object.setPrototypeOf(this, NotFoundError.prototype);
}
serializeErrors() {
return [{ message: 'The requested route is not Found' }];
}
}
Then in TSconfig.json, I have the path parameter set like this
"paths": {
"#/lib/*" : [
"src/lib/*"
],
"#/routes/*": [
"src/routes/*"
],
"*": [
"node_modules/*"
]
},
When i Import NotFoundError as follows, it results in error
import { NotFoundError } from '#/lib/errors/notFound';
Here's the error.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/home/tuser/Projects/tpro/src/server/express.ts:5:1)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Module._compile (/home/tuser/Projects/tpro/node_modules/source-map-support/source-map-support.js:568:25)
at Module.m._compile (/tmp/ts-node-dev-hook-07042914060113459.js:69:33)
at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at require.extensions..jsx.require.extensions..js (/tmp/ts-node-dev-hook-07042914060113459.js:114:20)
[ERROR] 16:40:04 Error: Cannot find module '#/lib/errors/notFound'
I have also tried imports like these
const { NotFoundError } = require('#/lib/errors/notFound')
const NotFoundError = require('#/lib/errors/notFound')
Both result in same error
What am i missing ?
Sorry, I initially wanted to post a comment but I don't have enough rep; instead, I've expanded what I know into a full answer in hopes it helps.
I've recently gone about with setting up Node + TypeScript + Express. The repo I made and was playing around with initially is here, but note that it's undocumented and the auxiliary configs aren't necessarily up to scratch. Also, apologies if the formatting of this answer is really unorthodox, and I hope linking to personal repos is not looked down on.
I'm uncertain if the paths in the tsconfig.json have anything to do with your issue; I've never used them, so I don't know. I would remove them for now.
As a preface, this is an imperfect solution.
For my Node/TypeScript/Express setup I had to do the following:
Set "type": "module" in package.json
Install required packages: > npm install ts-node ts-loader (I'm unsure if both are necessary, I believe they are though)
Add node --es-module-specifier-resolution=node --loader ts-node/esm ./src/server/express.ts (Presuming that express.ts is your entrypoint) as a command to your package.json and check if it works.
With what I understand, this works by specifically invoking ts-node with esm support, and it seems to work on Node 14 LTS and v16.9.1.
The command is rather hacky and will give you warnings about it being an experimental feature. I couldn't find any other solution for myself when (very stubbornly) using ESModules.
I've also used this command to use Webpack with TypeScript and ESM (that is, having a webpack.ts file with ESM imports) to compile TypeScript src files with ESM, as below (in package.json, from here):
"webpack-examples": "node --es-module-specifier-resolution=node --loader ts-node/esm node_modules/webpack-cli/bin/cli.js --config webpack.examples.ts --mode production",
expressjs doesnt support import statements yet. use require for eg const http = require("http");
With svgo 1.3.2 I used to run this command :
svgo --pretty --disable={removeUnusedNS,removeUselessDefs,removeUselessStrokeAndFill} file.svg -o file.min.svg
I updated to svgo 2.3.0 and now I get :
error: unknown option '--disable={removeUnusedNS,removeUselessDefs,removeUselessStrokeAndFill}'
So I tried to create a svgo.config.js like this :
const { extendDefaultPlugins } = require('svgo');
module.exports = {
plugins: extendDefaultPlugins([
{
name: 'removeUnusedNS',
active: false
},
{
name: 'removeUselessDefs',
active: false
},
{
name: 'removeUselessStrokeAndFill',
active: false
}
])
}
but I just get the error :
Error: Cannot find module 'svgo'
Require stack:
C:\Users\jpprade\Documents\vrac\svgo.config.js
C:\Users\jpprade\AppData\Roaming\npm\node_modules\svgo\lib\svgo-node.js
C:\Users\jpprade\AppData\Roaming\npm\node_modules\svgo\lib\svgo\coa.js
C:\Users\jpprade\AppData\Roaming\npm\node_modules\svgo\bin\svgo
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (C:\Users\jpprade\Documents\vrac\svgo.config.js:1:34)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
svgo is install (globaly)
How can I run svgo with those 3 plugins disabled using to config file (or not) ?
Thanks !
What is the output when you run svgo -v?
It is possible that you are inside a project that has an older version as a dependency which takes precedence over the global svgo package.
You can try require using the absolute path to svgo 2.3.0.
For instance mine was like that require('/home/nili/.nvm/versions/node/v14.16.1/lib/node_modules/svgo');
I think it could also be in /usr/local/lib/node_modules/svgo if you installed it as root.
the very simple example below (pretty much copied off the npm inquirer front page) is giving the ".then is not a function" error. However I can't figure out what the issue is.
var inquirer = require('inquirer');
inquirer.prompt([
{
name: 'my_name',
type: 'input',
message: 'What is your name: '
}]).then(answers => {
console.log("Your name is:"+answers.my_name)
});
The error message looks like this:
? What is your name:
/home/peter/Documents/nodejs.d/vscode_examples_workspace/security/inq.js:8
}]).then(answers => {
^
TypeError: inquirer.prompt(...).then is not a function
at Object.<anonymous> (/home/peter/Documents/nodejs.d/vscode_examples_workspace/security/inq.js:8:13)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
at startup (internal/bootstrap/node.js:201:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
But the following example works OK. So the basic node.js environment (nodejs --version = v9.11.2) is OK.
var inquirer = require('inquirer');
let q = [
{
name: 'my_name',
type: 'input',
message: 'What is your name: '
}];
inquirer.prompt (q, function (answers){
console.log("Your name is: "+answers.my_name);
});
// Output
$ nodejs inq.js
? What is your name: Peter
Your name is: Peter
This is probably because you have an old version of inquirer (0.12.0 or older) which does not support promises (promises were added in version 1.0.0).
Your snippet works fine with version 6.0.0 and 1.0.0 but fails with the exact same error message in version 0.12.0.
Check packages.json for your version and update it:
"dependencies": {
"inquirer": "^6.0.0"
}
Then do
npm install