How can I ignore URL imports?

[stefanfrede]

I have this import and would like to ignore it: import confetti from 'https://cdn.skypack.dev/canvas-confetti';.

I tried the following in my .eslintrc.js, but it did not work:

  settings: {
    'import/ignore': ['^(https://cdn.skypack.dev/)'],
  },

I also tried something simpler without success:

  settings: {
    'import/ignore': ['^https'],
  },

Now I'm wondering what I have to do to ignore imports like that.

[ljharb]

When you say "it did not work", can you elaborate?

[stefanfrede]

With it did not work I mean that my linter is still throwing the error import/no-unresolved: Unable to resolve path to module 'https://cdn.skypack.dev/canvas-confetti'..

[ljharb]

See https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md#ignore - you need to configure the no-unresolved rule separately.

[stefanfrede]

Thank you, but it seems I'm still doing something wrong.

I changed my settings now to the following:

  settings: {
    'import/no-unresolved': [2, { ignore: ['^https'] }],
  },

Sadly this does not change anything.

[ljharb]

what's your full eslint config?

[stefanfrede]

This is my config:

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 11,
    sourceType: 'module',
    allowImportExportEverywhere: true,
    ecmaFeatures: {
      impliedStrict: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  plugins: ['html'],
  settings: {
    'import/no-unresolved': [2, { ignore: ['^https'] }],
  },
};

[ljharb]

(i'm confused by allowImportExportEverywhere, since import/export statements don't work except at Module level)

that definitely seems like it should work. You're not using any custom resolvers, you have root true, and none of those extended configs do anything wonky.

can you share the file that's being linted?

[stefanfrede]

Sure:

import Template from './template.js';

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

export default class App extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = Template.render();
    this.dom = Template.mapDOM(this.shadowRoot);

    confetti();
  }
}

if (!customElements.get('mf-app')) {
  customElements.define('mf-app', App);
}

[stefanfrede]

I pushed my code to GitHub: https://github.com/stefanfrede/monkey-funnel/tree/fix-problem-with-import.

I removed the skypack import for now but maybe the rest of my code is helping to figure out why import/no-unresolved': [2, { ignore: ['^https'] }] is not ignoring imports like import confetti from 'https://cdn.skypack.dev/canvas-confetti'.

[ljharb]

@stefanfrede npm run lint:eslint errors out on "no files matching src/".

If i run npx eslint . it does not produce an error.

[stefanfrede]

Yes, sorry, my bad. I adjusted the code and if you now run npm run lint:eslint you get the import/no-unresolved error.

This is the .eslintrc.js and this is the file where the error is happening.