There is an existing JS file that needs types, and tests are to be written in Mocha. The first line in the test.ts is
import { M$ } from "/js/MELEE-core.js";
in the same directory as MELEE-core.js there is MELEE-core.d.ts with
declare module "MELEE-core";
package.json
"scripts": {
"test": "mocha -r ts-node/register test/**/*.*"
}
The tests are run with
npm run test
The error is
TSError: ? Unable to compile TypeScript: test/MELEE-core_test.ts:1:20 - error TS2307: Cannot find module '/js/MELEE-core.js' or its corresponding type declarations.
1 import { M$ } from "/js/MELEE-core.js";
If // #ts-ignore is added to the top of the test no error occurs. Why won't it load the type definition file?
TL;DR: Why is #rollup/plugin-commonjs looking in my package.json and how can I stop that so that I don't have to include #rollup/plugin-json arbitrarily to fix the problem?
I have a file written in JS for Node.js, CommonJS require() / module.exports() that I want to work in the Browser, so I am using Rollup to bundle and 'browserify' the Node.js code.
Environment
macOS Monterey Version 12.4
npm version 8.3.1
node version 16.14.0
rollup version 2.75.6
#rollup/plugin-json version 4.1.0
rollup.config.js
Here is my rollup.config.js:
// rollup.config.js
import commonjs from '#rollup/plugin-commonjs';
// import json from '#rollup/plugin-json';
const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);
export default [
{
input: "test/_client_test.js",
output: {
file: 'build/test/test.js',
format: 'iife'
},
plugins: [
commonjs()
]
}
];
Problem
When running npm rollup -c I get the following output:
[!] (plugin commonjs--resolver) Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
package.json (2:8)
1: {
2: "name": "my-package",
^
3: "version": "0.0.1",
4: "description": "hello world",
Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
at error (/***/node_modules/rollup/dist/shared/rollup.js:198:30)
at Module.error (/***/node_modules/rollup/dist/shared/rollup.js:12553:16)
at Module.tryParse (/***/node_modules/rollup/dist/shared/rollup.js:12930:25)
at Module.setSource (/***/node_modules/rollup/dist/shared/rollup.js:12835:24)
at ModuleLoader.addModuleSource (/***********/rollup.js:22309:20)
Im trying to import socket.io-client into my project but the import line
import * as io from 'socket.io-client';
is throwing the following error
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,204): '>' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,239): '(' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,260): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,265): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,296): '(' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,313): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,321): Expression expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,49): ';' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,92): Expression expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (21,86): Cannot find name 'Parameters'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,212): 'EventNames' only refers to a type, but is being used as a value here.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,241): Cannot find name 'ReservedEvents'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,256): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,262): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,273): 'EventNames' only refers to a type, but is being used as a value here.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,298): Cannot find name 'UserEvents'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,309): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,315): Cannot find name 'never'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,58): Cannot find name 'never'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,94): Cannot find name 'T'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (51,31): Class 'StrictEventEmitter<ListenEvents, EmitEvents, ReservedEvents>' incorrectly extends base class 'Emitter<string>'.
Types of property 'on' are incompatible.
Type '<Ev extends ReservedOrUserEventNames<ReservedEvents, ListenEvents>>(ev: Ev, listener: [Ev]) => this' is not assignable to type '(event: string, listener: Function) => Emitter<string>'.
Types of parameters 'listener' and 'listener' are incompatible.
Type 'Function' is not assignable to type '[any]'.
Property '0' is missing in type 'Function'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (72,53): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (82,75): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (48,9): An accessor cannot be declared in an ambient context.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (73,53): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (184,9): An accessor cannot be declared in an ambient context.
After digging around for a bit I found that while being in angular debug mode, if I comment the import line out, save, uncomment and save the code run perfectly in debug mode.
Is there anyway to fix it so the import will work without the steps i mention above?
Angular version is 4.4.6
and socket.io-client version is 1.7.3
and here is the tsconfig.json file
{
"compileOnSave": false,
"compilerOptions": {
"esModuleInterop": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/#types"],
"lib": ["es2017", "dom"]
},
"allowSyntheticDefaultImports": true
}
You are not using socket.io-client in version 1.7.3 but rather version ^4.1.3. That one defacto creates dependency on typescript 4 thanks to its packed type definition files but your project compiles with typescript ~2.3.3. Hence the error you are getting.
Make sure to install the correct version with npm i -S socket.io-client#1.7.3. It doesn't pack its own type definitions though (so it creates no dependency on typescript), so you will also need to install #types/socket.io-client#1 to get the types.
I'm not sure about the issue you mention but I might be able to provide a workaround.
You can try using this package instead https://www.npmjs.com/package/ngx-socket-io while working with Angular and Socket.io. I've used it in the past and it works well, it might solve your problem.
Simply install it and then configure it. Something like:
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SocketIoModule.forRoot(config)],
bootstrap: [AppComponent],
})
export class AppModule {}
I'm using nuxt-env to access my env variables in vue-components and jest to test the components. But for the tests this.$env is undefined. Is there a way to configure jest to use the nuxt-env variables?
my nuxt.config.js :
['nuxt-env', { // Environment variables for runtime
keys: [
'FOO'
]
}],
the usage in vue components:
<script>
export default {
data: function() {
return {
bar: this.$env.FOO
}
}
}
</script>
Currently the jest-test for the component returns the following error:
Error: [Vue warn]: Error in data(): "TypeError: Cannot read property 'FOO' of undefined"
I'm using polymer-cli (v1.9.11) to serve my project while developing it :
polymer-cli serve
But when I use decorators (#customElement) in my js sources like this :
import { LitElement, html, property, customElement } from 'lit-element';
import '#polymer/iron-ajax';
import '#vaadin/vaadin-combo-box';
#customElement('my-element') // HERE
class MyElement extends PolymerElement {
static get properties() {
It raises this error when I request the file :
Error SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (5:0)
at Parser.raise (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:776:15)
at Parser.expectOnePlugin (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:2098:18)
at Parser.parseDecorator (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:4133:10)
at Parser.parseDecorators (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:4115:28)
at Parser.parseStatement (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:3959:12)
at Parser.parseBlockOrModuleBlockBody (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:4513:23)
at Parser.parseBlockBody (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:4500:10)
at Parser.parseTopLevel (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:3938:10)
at Parser.parse (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:5304:17)
at Object.parse (/usr/lib/node_modules/polymer-cli/node_modules/babylon/lib/index.js:10083:24) {
pos: 138,
loc: Position { line: 5, column: 0 },
missingPlugin: [ 'decorators-legacy', 'decorators' ]
}
So I'm wondering where I should declare one of these plugins ?