React + Typescript | Plugin imports not found

help
1

Hi Everyone :wave:

Background Info

I’m being onboarded to a planned migration from Angular-Meteor to Typescript + React as the front-end, keeping the back-end as is. I set up the project infrastructure where the backend runs without errors.

Problem

The Typescript compiler can detect the meteor/.. built-in modules with no problems. However, attempting to import plugins like alanning:roles using meteor/alanning:roles results in Typescript throwing a Module not found error.

@types/meteor as well as @types/meteor-roles are installed, along with meteor-node-stubs. The issue does not seem exclusive to alanning:roles, as any other plugin that uses the meteor/name:plugin format does not seem to be recognized.

I also noticed that plugins live in the $HOME/.meteor/... instead of the node modules folder in the project root. I thought maybe this had something to do with it.

The angular codebase is riddled with typescript compile errors that make debugging an arduous process. That’s why I’m doing my best to set up a robust workflow for the React rewrite.

2

What you are experiencing are eslint errors rather than typescript errors. You’ll just need to install a few packages like so:

npm install eslint-plugin-import eslint-import-resolver-meteor eslint-import-resolver-typescript

Then modify your eslint config file to use them. Below is a sample eslintrc.js file from one of my projects.

const path = require('path');

/** @type {import("eslint").Linter.Config} */
const config = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, 'tsconfig.json'),
  },
  plugins: ['@typescript-eslint'],
  extends: ['plugin:react/recommended', 'standard', 'plugin:@typescript-eslint/eslint-recommended'],
  rules: {
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      meteor: {},
      typescript: {},
    },
  },
};

module.exports = config;
1 Like
3

Hi @copleykj

Thank you for your reply. Correct me if I’m wrong (I probably am, since I’m still fresh when it comes to typescript), but the “Cannot find module” error seems to be coming from typescript-language-server, not eslint

ESLint was not configured for the project at all. Adding it and implementing your config or initializing a new one results in a lot more errors related to the style guideline. (I’m planning on implementing a style guideline after I sort out module discovery)

From what I understand, typescript-language-server handles module discovery, and makes things like jump to definitions and jump to module possible, along with other stuff, While ESLint handles things related to linting.

Feel free to completely negate my whole premise. I’m still feeling my way around a typescript environment.

Edit: A screenshot from VSCode after installing and configuring ESLint showing the error still present

image
image1072×87 52.8 KB

1 Like
4

This error occurs when a package doesn’t have types definition. You can create by yourself by creating a .d.ts file somewhere and define types for that package.
You can also just leave it as it’s. Your app still run as normal, just some warnings.

1 Like
5

Yes, those specifically are, as @minhna notes above, errors due to lack of type definition and there’s only so much you can do about modules that actually lack these except, write the definition yourself, paper over it with an empty module definition, or just ignore it.

One thing I forgot to mention that might help with meteor/package-name modules that do have proper definitions already is to install and configure zodern:types

6

Thank you @minhna and @copleykj

I’ll look into type definitions. I was under the impression that alanning:roles had type definitions and tried using zodern:types but I’m unable to make it work just yet.

Now that I know the problem is typescript-specific, I’ll keep poking around until I get it sorted out. I know I can ignore the error, but I think having type errors may obscure real errors when they inevitably crop up.

Thank you for the help, highly appreciated

1 Like