Failed to resolve module of Polymer 3 in Electron v.17 application

Question

I get electron-quick-start and electron-polymer from fluidnext to use for my Polymer 3 application.

When i try to import my webcomponents to the project, i have got this error: Uncaught TypeError: Failed to resolve module specifier "@polymer/polymer/polymer-element.js". Relative references must start with either "/", "./", or "../". to solve this i used ../node_modules/my-folder/my-component.js but this only worked when i import a component who has only references to his default folder.

Example: 

    import {
    html,
    PolymerElement
} from '../node_modules/@polymer/polymer/polymer-element.js';

This have worked for me, this component shows in my Electron Application, but i have a lot of others components who use other references, like this below.

import {
    html,
    PolymerElement
} from '../node_modules/@polymer/polymer/polymer-element.js';

// import { sharedStyles } from './shared-styles.js';

import '../node_modules/@polymer/paper-input/paper-input.js';
import '../node_modules/@polymer/iron-icon/iron-icon.js';
import '../node_modules/@polymer/iron-icons/iron-icons.js';

When i import this component i got this error, similar to the first: Uncaught TypeError: Failed to resolve module specifier "@polymer/polymer/polymer-legacy.js". Relative references must start with either "/", "./", or "../".

And that is my problem now, every new component i need to add ../node_modules before the default polymer import and when this component has others imports inside i got other errors to the references.

How can i solve this?

Answer 1

I also ran into this problem. I have a Flask application where I wanted to embed web components in my templates. I solved it in the following way. I have written the following python file and am calling it in the startup file. Now everything works.

# We need to go to node_modules\ and add a / before the all imports paths that don't start with ~ . \ or /

import os
import re

def fix_relative_references():
    path_to_node_modules = os.path.join(os.path.dirname(os.path.abspath(__file__)), '../node_modules')

    for root, dirs, files in os.walk(path_to_node_modules):
        for file in files:
            if file.endswith('.js'):
                file_path = os.path.join(root, file)
                with open(file_path, 'r') as f:
                    file_content = f.read()
                    file_content = re.sub(r"from '([^/\.~])", r"from '/\1", file_content)
                    file_content = re.sub(r"from \"([^/\.~])", r"from \"/\1", file_content)
                    file_content = re.sub(r"import '([^/\.~])", r"import '/\1", file_content)
                    file_content = re.sub(r"import \"([^/\.~])", r"import \"/\1", file_content)
                    file_content = re.sub(r"require\('([^/\.~])", r"require('/\1", file_content)
                    file_content = re.sub(r"require\(\"([^/\.~])", r"require(\"/\1", file_content)
                with open(file_path, 'w') as f:
                    f.write(file_content)