Error: "Cannot find module" when cloning Ionic 4 component with StencilJS
davidesp
I need to clone an Ionic 4 component with StencilJS, then...
I just created the repository:
https://github.com/napolev/custom-range
based on the repository:
https://github.com/ionic-team/stencil-component-starter
then copied the Ionic component range:
https://github.com/ionic-team/ionic/tree/master/core/src/components/range
to:
/src/components/custom-range
but when opening the project on VS Code I get the following errors:
range.tsx src\components\custom-range
- Cannot find module '../../interface'.
- Cannot find module '../../utils/helpers'.
- Cannot find module '../../utils/theme'.
- Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
- Cannot find module '../../utils/gesture/gesture'.
as you can see on the following image:
Any idea on how to include those missing references into my project?
Thanks!
[EDIT 1]
Responding to @Ayoub k comments, where he said:
add the following dependencies:
"@stencil/core": "^0.12.0-8",
"@stencil/dev-server": "latest",
"@stencil/sass": "0.1.0",
"@stencil/utils": "latest",
you may find the resources in the node_modules folder, under @stencil folder.
Here is my answer:
Inside the /node_modules/@stencil directory I have the following directory structure:
.
├── core
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── bin
│ │ └── stencil
│ ├── compiler
│ │ ├── index.js
│ │ └── package.json
│ ├── dist
│ │ ├── cli
│ │ │ └── index.js
│ │ ├── client
│ │ │ ├── core.build.js
│ │ │ ├── core.esm.js
│ │ │ ├── declarations
│ │ │ │ └── stencil.core.d.ts
│ │ │ ├── loader.js
│ │ │ └── polyfills
│ │ │ ├── es5
│ │ │ │ ├── array.js
│ │ │ │ ├── dom.js
│ │ │ │ ├── fetch.js
│ │ │ │ ├── index.js
│ │ │ │ ├── object.js
│ │ │ │ ├── promise.js
│ │ │ │ ├── string.js
│ │ │ │ └── url.js
│ │ │ └── esm
│ │ │ ├── array.js
│ │ │ ├── dom.js
│ │ │ ├── fetch.js
│ │ │ ├── index.js
│ │ │ ├── object.js
│ │ │ ├── promise.js
│ │ │ ├── string.js
│ │ │ └── url.js
│ │ ├── compiler
│ │ │ ├── app
│ │ │ │ ├── app-core-browser.d.ts
│ │ │ │ ├── app-core-esm.d.ts
│ │ │ │ ├── app-es5-disabled.d.ts
│ │ │ │ ├── app-file-naming.d.ts
│ │ │ │ ├── app-global-scripts.d.ts
│ │ │ │ ├── app-loader.d.ts
│ │ │ │ ├── app-polyfills.d.ts
│ │ │ │ ├── app-registry.d.ts
│ │ │ │ ├── build-core-content.d.ts
│ │ │ │ ├── generate-app-files.d.ts
│ │ │ │ └── reserved-properties.d.ts
│ │ │ ├── asset-versioning
│ │ │ │ ├── asset-versioning.d.ts
│ │ │ │ ├── element-assets.d.ts
│ │ │ │ ├── manifest-assets.d.ts
│ │ │ │ └── util.d.ts
│ │ │ ├── build
│ │ │ │ ├── build-auxiliaries.d.ts
│ │ │ │ ├── build-ctx.d.ts
│ │ │ │ ├── build-finish.d.ts
│ │ │ │ ├── build-hmr.d.ts
│ │ │ │ ├── build-results.d.ts
│ │ │ │ ├── build-stats.d.ts
│ │ │ │ ├── build.d.ts
│ │ │ │ ├── cache-stats.d.ts
│ │ │ │ ├── compiler-ctx.d.ts
│ │ │ │ ├── empty-dir.d.ts
│ │ │ │ ├── replacer.d.ts
│ │ │ │ └── write-build.d.ts
│ │ │ ├── bundle
│ │ │ │ ├── bundle-modules.d.ts
│ │ │ │ ├── bundle.d.ts
│ │ │ │ ├── generate-bundles.d.ts
│ │ │ │ ├── rollup-bundle.d.ts
│ │ │ │ ├── rollup-plugins
│ │ │ │ │ ├── abort-plugin.d.ts
│ │ │ │ │ ├── in-memory-fs-read.d.ts
│ │ │ │ │ ├── json.d.ts
│ │ │ │ │ ├── local-resolution.d.ts
│ │ │ │ │ ├── node-env-vars.d.ts
│ │ │ │ │ ├── node-globals.d.ts
│ │ │ │ │ ├── paths-resolution.d.ts
│ │ │ │ │ └── rollup-plugin-replace.d.ts
│ │ │ │ └── write-bundles.d.ts
│ │ │ ├── cache.d.ts
│ │ │ ├── collections
│ │ │ │ ├── collection-compatibility.d.ts
│ │ │ │ ├── collection-data.d.ts
│ │ │ │ ├── collection-types.d.ts
│ │ │ │ ├── init-collections.d.ts
│ │ │ │ ├── parse-collection-module.d.ts
│ │ │ │ └── upgrade-collection.d.ts
│ │ │ ├── compiler.d.ts
│ │ │ ├── component-plugins
│ │ │ │ └── assets-plugin.d.ts
│ │ │ ├── config
│ │ │ │ ├── _deprecated-validate-config-collection.d.ts
│ │ │ │ ├── _deprecated-validate-multiple-targets.d.ts
│ │ │ │ ├── config-reload.d.ts
│ │ │ │ ├── config-utils.d.ts
│ │ │ │ ├── load-config.d.ts
│ │ │ │ ├── validate-asset-versioning.d.ts
│ │ │ │ ├── validate-component.d.ts
│ │ │ │ ├── validate-config.d.ts
│ │ │ │ ├── validate-copy.d.ts
│ │ │ │ ├── validate-dev-server.d.ts
│ │ │ │ ├── validate-docs.d.ts
│ │ │ │ ├── validate-namespace.d.ts
│ │ │ │ ├── validate-outputs-angular.d.ts
│ │ │ │ ├── validate-outputs-dist.d.ts
│ │ │ │ ├── validate-outputs-www.d.ts
│ │ │ │ ├── validate-outputs.d.ts
│ │ │ │ ├── validate-paths.d.ts
│ │ │ │ ├── validate-plugins.d.ts
│ │ │ │ ├── validate-prerender.d.ts
│ │ │ │ ├── validate-resources-url.d.ts
│ │ │ │ ├── validate-rollup-config.d.ts
│ │ │ │ ├── validate-service-worker.d.ts
│ │ │ │ ├── validate-stats.d.ts
│ │ │ │ └── validate-workers.d.ts
│ │ │ ├── copy
│ │ │ │ ├── assets-copy-tasks.d.ts
│ │ │ │ ├── config-copy-tasks.d.ts
│ │ │ │ ├── copy-styles.d.ts
│ │ │ │ └── copy-tasks-main.d.ts
│ │ │ ├── distribution
│ │ │ │ ├── dist-angular.d.ts
│ │ │ │ ├── dist-cjs.d.ts
│ │ │ │ ├── dist-esm.d.ts
│ │ │ │ ├── distribution.d.ts
│ │ │ │ ├── stencil-types.d.ts
│ │ │ │ └── validate-package-json.d.ts
│ │ │ ├── docs
│ │ │ │ ├── auto-docs.d.ts
│ │ │ │ ├── constants.d.ts
│ │ │ │ ├── docs-util.d.ts
│ │ │ │ ├── docs.d.ts
│ │ │ │ ├── generate-json-doc.d.ts
│ │ │ │ ├── generate-readmes.d.ts
│ │ │ │ ├── markdown-css-props.d.ts
│ │ │ │ ├── markdown-events.d.ts
│ │ │ │ ├── markdown-methods.d.ts
│ │ │ │ ├── markdown-props.d.ts
│ │ │ │ └── style-docs.d.ts
│ │ │ ├── entries
│ │ │ │ ├── app-graph.d.ts
│ │ │ │ ├── component-dependencies.d.ts
│ │ │ │ ├── component-references.d.ts
│ │ │ │ ├── entry-components.d.ts
│ │ │ │ └── entry-modules.d.ts
│ │ │ ├── events.d.ts
│ │ │ ├── fs-watch
│ │ │ │ ├── fs-watch-init.d.ts
│ │ │ │ ├── fs-watch-log.d.ts
│ │ │ │ ├── fs-watch-normalizer.d.ts
│ │ │ │ └── fs-watch-rebuild.d.ts
│ │ │ ├── html
│ │ │ │ ├── canonical-link.d.ts
│ │ │ │ ├── collapse-html-whitespace.d.ts
│ │ │ │ ├── generate-index-html.d.ts
│ │ │ │ ├── init-index-html.d.ts
│ │ │ │ ├── inline-external-assets.d.ts
│ │ │ │ ├── inline-loader-script.d.ts
│ │ │ │ ├── minify-inline-content.d.ts
│ │ │ │ ├── optimize-html.d.ts
│ │ │ │ └── used-selectors.d.ts
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── minifier.d.ts
│ │ │ ├── plugin
│ │ │ │ └── plugin.d.ts
│ │ │ ├── prerender
│ │ │ │ ├── host-config.d.ts
│ │ │ │ ├── prerender-app.d.ts
│ │ │ │ ├── prerender-path.d.ts
│ │ │ │ └── prerender-utils.d.ts
│ │ │ ├── service-worker
│ │ │ │ ├── generate-sw.d.ts
│ │ │ │ ├── inject-sw-script.d.ts
│ │ │ │ └── service-worker-util.d.ts
│ │ │ ├── style
│ │ │ │ ├── auto-prefix-css-main.d.ts
│ │ │ │ ├── cached-styles.d.ts
│ │ │ │ ├── component-styles.d.ts
│ │ │ │ ├── css-imports.d.ts
│ │ │ │ ├── generate-styles.d.ts
│ │ │ │ ├── get-selectors.d.ts
│ │ │ │ ├── global-styles.d.ts
│ │ │ │ ├── minify-style.d.ts
│ │ │ │ ├── normalize-styles.d.ts
│ │ │ │ ├── optimize-ssr-styles.d.ts
│ │ │ │ ├── parse-css.d.ts
│ │ │ │ ├── remove-unused-styles.d.ts
│ │ │ │ ├── scope-css.d.ts
│ │ │ │ └── stringify-css.d.ts
│ │ │ ├── transpile
│ │ │ │ ├── compiler-options.d.ts
│ │ │ │ ├── core-es5-build.d.ts
│ │ │ │ ├── create-component-types.d.ts
│ │ │ │ ├── datacollection
│ │ │ │ │ ├── component-decorator.d.ts
│ │ │ │ │ ├── discover-collections.d.ts
│ │ │ │ │ ├── element-decorator.d.ts
│ │ │ │ │ ├── event-decorator.d.ts
│ │ │ │ │ ├── gather-metadata.d.ts
│ │ │ │ │ ├── listen-decorator.d.ts
│ │ │ │ │ ├── method-decorator.d.ts
│ │ │ │ │ ├── prop-decorator.d.ts
│ │ │ │ │ ├── reserved-public-members.d.ts
│ │ │ │ │ ├── state-decorator.d.ts
│ │ │ │ │ ├── styles-meta.d.ts
│ │ │ │ │ ├── utils.d.ts
│ │ │ │ │ ├── validate-component.d.ts
│ │ │ │ │ └── watch-decorator.d.ts
│ │ │ │ ├── transformers
│ │ │ │ │ ├── JSX_Upgrade_From_0_0_5
│ │ │ │ │ │ └── upgrade-jsx-props.d.ts
│ │ │ │ │ ├── Metadata_Upgrade_From_0_1_0
│ │ │ │ │ │ └── metadata-upgrade.d.ts
│ │ │ │ │ ├── add-component-metadata.d.ts
│ │ │ │ │ ├── component-dependencies.d.ts
│ │ │ │ │ ├── module-imports.d.ts
│ │ │ │ │ ├── remove-collection-imports.d.ts
│ │ │ │ │ ├── remove-decorators.d.ts
│ │ │ │ │ ├── remove-stencil-imports.d.ts
│ │ │ │ │ └── util.d.ts
│ │ │ │ ├── transpile-app.d.ts
│ │ │ │ ├── transpile-service.d.ts
│ │ │ │ ├── transpile-to-es5-main.d.ts
│ │ │ │ └── validate-types-main.d.ts
│ │ │ └── util.d.ts
│ │ ├── declarations
│ │ │ ├── app-global.d.ts
│ │ │ ├── build-conditionals.d.ts
│ │ │ ├── build-events.d.ts
│ │ │ ├── build.d.ts
│ │ │ ├── cache.d.ts
│ │ │ ├── collection.d.ts
│ │ │ ├── compiler.d.ts
│ │ │ ├── component-interfaces.d.ts
│ │ │ ├── component.d.ts
│ │ │ ├── config.d.ts
│ │ │ ├── copy.d.ts
│ │ │ ├── decorators.d.ts
│ │ │ ├── dev-inspector.d.ts
│ │ │ ├── dev-server.d.ts
│ │ │ ├── diagnostics.d.ts
│ │ │ ├── docs.d.ts
│ │ │ ├── dom.d.ts
│ │ │ ├── entry.d.ts
│ │ │ ├── events.d.ts
│ │ │ ├── file-system.d.ts
│ │ │ ├── fs-watch.d.ts
│ │ │ ├── in-memory-fs.d.ts
│ │ │ ├── index.d.ts
│ │ │ ├── jsx.d.ts
│ │ │ ├── logger.d.ts
│ │ │ ├── minify-js.d.ts
│ │ │ ├── output-targets.d.ts
│ │ │ ├── platform.d.ts
│ │ │ ├── plugin.d.ts
│ │ │ ├── render.d.ts
│ │ │ ├── server.d.ts
│ │ │ ├── style.d.ts
│ │ │ ├── system.d.ts
│ │ │ ├── transpile.d.ts
│ │ │ ├── vdom.d.ts
│ │ │ └── worker.d.ts
│ │ ├── dev-server
│ │ │ ├── content-type-db.json
│ │ │ ├── index.js
│ │ │ ├── static
│ │ │ │ ├── app-error.css
│ │ │ │ ├── dev-server-client.html
│ │ │ │ └── favicon.ico
│ │ │ └── templates
│ │ │ ├── directory-index.html
│ │ │ └── initial-load.html
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── renderer
│ │ │ └── vdom
│ │ │ ├── h.d.ts
│ │ │ ├── index.d.ts
│ │ │ └── index.js
│ │ ├── server
│ │ │ ├── connect-element.d.ts
│ │ │ ├── dom-api-server.d.ts
│ │ │ ├── hydrate-html.d.ts
│ │ │ ├── hydrate-utils.d.ts
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── load-config.d.ts
│ │ │ ├── load-registry.d.ts
│ │ │ ├── middleware
│ │ │ │ └── express-middleware.d.ts
│ │ │ ├── platform-server.d.ts
│ │ │ ├── queue-server.d.ts
│ │ │ ├── renderer.d.ts
│ │ │ └── server-styles.d.ts
│ │ ├── sys
│ │ │ └── node
│ │ │ ├── LICENSES
│ │ │ │ ├── autoprefixer.md
│ │ │ │ ├── clean-css.md
│ │ │ │ ├── glob.md
│ │ │ │ ├── is-glob.md
│ │ │ │ ├── minimatch.md
│ │ │ │ ├── node-fetch.md
│ │ │ │ ├── opn.md
│ │ │ │ ├── postcss.md
│ │ │ │ ├── semver.md
│ │ │ │ ├── terser.md
│ │ │ │ ├── turbocolor.md
│ │ │ │ └── ws.md
│ │ │ ├── index.js
│ │ │ ├── node-fetch.js
│ │ │ ├── open-in-editor.js
│ │ │ ├── sys-util.js
│ │ │ ├── sys-worker.js
│ │ │ ├── visualstudio.vbs
│ │ │ ├── websocket.js
│ │ │ └── xdg-open
│ │ ├── testing
│ │ │ ├── expect.d.ts
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── mock-doc
│ │ │ │ ├── attribute.d.ts
│ │ │ │ ├── class-list.d.ts
│ │ │ │ ├── comment-node.d.ts
│ │ │ │ ├── constants.d.ts
│ │ │ │ ├── css-style-declaration.d.ts
│ │ │ │ ├── custom-element-registry.d.ts
│ │ │ │ ├── document-fragment.d.ts
│ │ │ │ ├── document-type-node.d.ts
│ │ │ │ ├── document.d.ts
│ │ │ │ ├── element.d.ts
│ │ │ │ ├── event.d.ts
│ │ │ │ ├── history.d.ts
│ │ │ │ ├── location.d.ts
│ │ │ │ ├── navigator.d.ts
│ │ │ │ ├── node.d.ts
│ │ │ │ ├── parse-html.d.ts
│ │ │ │ ├── performance.d.ts
│ │ │ │ ├── selector.d.ts
│ │ │ │ ├── serialize-node.d.ts
│ │ │ │ ├── storage.d.ts
│ │ │ │ ├── text-node.d.ts
│ │ │ │ └── window.d.ts
│ │ │ ├── mocks.d.ts
│ │ │ ├── parse-html.d.ts
│ │ │ ├── public-utils.d.ts
│ │ │ ├── test-transpile.d.ts
│ │ │ ├── test-window-logger.d.ts
│ │ │ ├── test-window.d.ts
│ │ │ ├── testing-config.d.ts
│ │ │ ├── testing-fs.d.ts
│ │ │ ├── testing-logger.d.ts
│ │ │ ├── testing-sys.d.ts
│ │ │ └── utils.d.ts
│ │ ├── transpiled-build-conditionals
│ │ │ ├── build-conditionals
│ │ │ │ ├── index.d.ts
│ │ │ │ └── index.js
│ │ │ ├── compiler
│ │ │ │ ├── bundle
│ │ │ │ │ └── rollup-plugins
│ │ │ │ │ ├── rollup-plugin-replace.d.ts
│ │ │ │ │ └── rollup-plugin-replace.js
│ │ │ │ ├── util.d.ts
│ │ │ │ └── util.js
│ │ │ ├── declarations
│ │ │ │ ├── app-global.d.ts
│ │ │ │ ├── app-global.js
│ │ │ │ ├── build-conditionals.d.ts
│ │ │ │ ├── build-conditionals.js
│ │ │ │ ├── build-events.d.ts
│ │ │ │ ├── build-events.js
│ │ │ │ ├── build.d.ts
│ │ │ │ ├── build.js
│ │ │ │ ├── cache.d.ts
│ │ │ │ ├── cache.js
│ │ │ │ ├── collection.d.ts
│ │ │ │ ├── collection.js
│ │ │ │ ├── compiler.d.ts
│ │ │ │ ├── compiler.js
│ │ │ │ ├── component-interfaces.d.ts
│ │ │ │ ├── component-interfaces.js
│ │ │ │ ├── component.d.ts
│ │ │ │ ├── component.js
│ │ │ │ ├── config.d.ts
│ │ │ │ ├── config.js
│ │ │ │ ├── copy.d.ts
│ │ │ │ ├── copy.js
│ │ │ │ ├── decorators.d.ts
│ │ │ │ ├── decorators.js
│ │ │ │ ├── dev-inspector.d.ts
│ │ │ │ ├── dev-inspector.js
│ │ │ │ ├── dev-server.d.ts
│ │ │ │ ├── dev-server.js
│ │ │ │ ├── diagnostics.d.ts
│ │ │ │ ├── diagnostics.js
│ │ │ │ ├── docs.d.ts
│ │ │ │ ├── docs.js
│ │ │ │ ├── dom.d.ts
│ │ │ │ ├── dom.js
│ │ │ │ ├── entry.d.ts
│ │ │ │ ├── entry.js
│ │ │ │ ├── events.d.ts
│ │ │ │ ├── events.js
│ │ │ │ ├── file-system.d.ts
│ │ │ │ ├── file-system.js
│ │ │ │ ├── fs-watch.d.ts
│ │ │ │ ├── fs-watch.js
│ │ │ │ ├── in-memory-fs.d.ts
│ │ │ │ ├── in-memory-fs.js
│ │ │ │ ├── index.d.ts
│ │ │ │ ├── index.js
│ │ │ │ ├── jsx.d.ts
│ │ │ │ ├── jsx.js
│ │ │ │ ├── logger.d.ts
│ │ │ │ ├── logger.js
│ │ │ │ ├── minify-js.d.ts
│ │ │ │ ├── minify-js.js
│ │ │ │ ├── output-targets.d.ts
│ │ │ │ ├── output-targets.js
│ │ │ │ ├── platform.d.ts
│ │ │ │ ├── platform.js
│ │ │ │ ├── plugin.d.ts
│ │ │ │ ├── plugin.js
│ │ │ │ ├── render.d.ts
│ │ │ │ ├── render.js
│ │ │ │ ├── server.d.ts
│ │ │ │ ├── server.js
│ │ │ │ ├── style.d.ts
│ │ │ │ ├── style.js
│ │ │ │ ├── system.d.ts
│ │ │ │ ├── system.js
│ │ │ │ ├── transpile.d.ts
│ │ │ │ ├── transpile.js
│ │ │ │ ├── vdom.d.ts
│ │ │ │ ├── vdom.js
│ │ │ │ ├── worker.d.ts
│ │ │ │ └── worker.js
│ │ │ └── util
│ │ │ ├── build-conditionals.d.ts
│ │ │ ├── build-conditionals.js
│ │ │ ├── constants.d.ts
│ │ │ └── constants.js
│ │ └── util
│ │ ├── cmp-meta.d.ts
│ │ ├── constants.d.ts
│ │ ├── data-parse.d.ts
│ │ ├── data-serialize.d.ts
│ │ ├── helpers.d.ts
│ │ ├── in-memory-fs.d.ts
│ │ └── scope.d.ts
│ ├── package.json
│ ├── readme.md
│ ├── server
│ │ ├── index.js
│ │ └── package.json
│ ├── sys
│ │ └── node
│ │ ├── index.js
│ │ └── package.json
│ └── testing
│ ├── index.js
│ ├── jest.preprocessor.js
│ └── package.json
├── dev-server
│ ├── LICENSE
│ ├── README.md
│ ├── assets
│ │ ├── 404.html
│ │ ├── __stencil-dev-server__
│ │ │ └── favicon.ico
│ │ └── index.html
│ ├── bin
│ │ └── stencil-dev-server
│ ├── dist
│ │ ├── definitions.js
│ │ ├── index.js
│ │ ├── middlewares.js
│ │ ├── promisify.js
│ │ └── utils.js
│ ├── node_modules
│ │ ├── anymatch
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── arr-diff
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── array-unique
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── braces
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── chokidar
│ │ │ ├── CHANGELOG.md
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ ├── lib
│ │ │ │ ├── fsevents-handler.js
│ │ │ │ └── nodefs-handler.js
│ │ │ └── package.json
│ │ ├── expand-brackets
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── extglob
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── glob-parent
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ ├── package.json
│ │ │ └── test.js
│ │ ├── is-extglob
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── is-glob
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── kind-of
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ └── micromatch
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── lib
│ │ │ ├── chars.js
│ │ │ ├── expand.js
│ │ │ ├── glob.js
│ │ │ └── utils.js
│ │ └── package.json
│ └── package.json
├── sass
│ ├── LICENSE
│ ├── dist
│ │ ├── declarations.d.ts
│ │ ├── declarations.js
│ │ ├── diagnostics.d.ts
│ │ ├── diagnostics.js
│ │ ├── index.cjs.js
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── util.d.ts
│ │ └── util.js
│ ├── package.json
│ └── readme.md
└── utils
├── LICENSE
├── README.md
├── bin
│ └── sd
├── dist
│ ├── concurrent.js
│ ├── index.js
│ ├── utils
│ │ └── promisify.js
│ └── vendor
│ ├── copyDir.d.ts
│ ├── copyDir.js
│ ├── mkdirp.d.ts
│ ├── mkdirp.js
│ ├── rimraf.d.ts
│ ├── rimraf.js
│ ├── tree-kill.d.ts
│ └── tree-kill.js
├── package.json
├── src
│ ├── concurrent.ts
│ ├── index.ts
│ ├── utils
│ │ └── promisify.ts
│ └── vendor
│ ├── copyDir.d.ts
│ ├── copyDir.js
│ ├── mkdirp.d.ts
│ ├── mkdirp.js
│ ├── rimraf.d.ts
│ ├── rimraf.js
│ ├── tree-kill.d.ts
│ └── tree-kill.js
└── tsconfig.json
89 directories, 516 files
where I can not find the referenced dependencies, for example:
- interface.ts [OR] interface.d.ts
- utils/helpers.ts [OR] utils/helpers.d.ts
- utils/theme.ts [OR] utils/theme.d.ts
- utils/gesture/gesture.ts [OR] utils/gesture/gesture.d.ts
Matt McCutchen
The relative imports are referring to other modules relative to https://github.com/ionic-team/ionic/tree/master/core/src/components/range . For example, ../../interface refers to https://github.com/ionic-team/ionic/blob/master/core/src/interface.d.ts . You probably don't want to manually copy these files into your project; it would be better to add a dependency on @ionic/core (the package name is from https://github.com/ionic-team/ionic/blob/master/core/package.json) and update the import paths to refer to the correct modules.
After installing @ionic/core, I looked in the node_modules/@ionic/core directory and it looks like the individual modules you want are under node_modules/@ionic/core/dist/collection. However, I noticed that some of your imports are reexported by the main @ionic/core module, so you can save yourself trouble by using it instead. Thus, your imports would look like:
import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '@ionic/core';
import { clamp, debounceEvent, deferEvent } from '@ionic/core';
import { createColorClasses, hostContext } from '@ionic/core/dist/collection/utils/theme';
and below:
import('@ionic/core/dist/collection/utils/gesture/gesture')
The types for the individual modules are under node_modules/@ionic/core/dist/types, so to associate the types with the actual modules, create a new file in src/components/custom-range (I called it ionic-module-aliases.d.ts) with the following content:
declare module '@ionic/core/dist/collection/utils/theme' {
export * from '@ionic/core/dist/types/utils/theme';
}
declare module '@ionic/core/dist/collection/utils/gesture/gesture' {
export * from '@ionic/core/dist/types/utils/gesture/gesture';
}
Finally, you'll need to change the module compiler option in your tsconfig.json to commonjs or esnext as indicated by the error message; I'd try esnext first.
The above gets me to zero TypeScript errors in range.tsx, but whether it will load properly at runtime depends on the build system you are using. I'm not familiar with the Stencil build system, but if it produces an error and you post the error, I may have an idea.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to make a container dependent on the height of one column and limit the other?
- Next: Angular: Components disappear when I add animations to components
Related
TOP Ranking
- 1
pump.io port in URL
- 2
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 3
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 6
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 7
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 8
Using Response.Redirect with Friendly URLS in ASP.NET
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
Double spacing in rmarkdown pdf
- 11
How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?
- 12
3D Touch Peek Swipe Like Mail
- 13
Bootstrap 5 Static Modal Still Closes when I Click Outside
- 14
Assembly definition can't resolve namespaces from external packages
- 15
Vector input in shiny R and then use it
- 16
Emulator wrong screen resolution in Android Studio 1.3
- 17
Svchost high CPU from Microsoft.BingWeather app errors
- 18
Graphics Context misaligned on first paint
- 19
Python connect to firebird docker database
- 20
Is this docker-for-mac password dialog legit?
- 21
How to save models trained locally in Amazon SageMaker?
Comments