Hi I want to execute polymer component(polymer3.x) in visual studio,I am able to run polymer cli and polymer serve and I can see outputs.but when I try to execute my code in visual studio project I get `error
Failed to resolve module specifier
"#polymer/polymer/lib/utils/import-href.js". Relative references must
start with either "/", "./", or "../".
I find this link https://github.com/Polymer/tools/issues/363 but I am confused what should I change ?
By the way I change my relative path #polymer/polymer/ to ../polymer/polymer/ but not work
`
I tried with visual studio 2017 and it work but relative paths are important
in polymer element polymer-element.js must be imported
import { PolymerElement, html } from
'../node_modules/#polymer/polymer/polymer-element.js';
and in your html page webcomponents-loader.js must be added,and you add your polymer eleement with script which type is module
> <script
> src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
>
> <script src="component/my-polymerelement.js" type="module">
Related
Rationale
I'm making a small website using svelte and sveltekit, and a library (roslibjs) that seems to be only usable within <head>.
It worked only in those 2 types of scenarios for me:
put everything in <head> and output to the console
import the library in <head>, but only by using <script src='https link here'></script>.
Everything else goes into onMount, outside of <head>.
1 is not acceptable, and while 2 is a temporary fix, I really don't want to rely on external links. (the site might be used in an offline environment)
What I tried
Since if I have all the code relying on the library inside <head> it works just fine, I tried to do so. But so long I couldn't find a way to export variables from <head>.
Example:
<svelte:head>
<script>
let a = 10
</script>
</svelte:head>
<p>{a}</p>
This throws an error saying 'a' is not defined.
Change the import line to <script src="node_modules/roslib/build/roslib.js"></script>, directly from the node_modules folder.
While this works in npm run dev, it doesn't once after npm run build.
What I expect
To be able to use the library with svelte3, but by using it from npm, not an external link.
One way to tackle this might be to export variables from <head>, but I couldn't find a way to do so.
I am using Create-React-App and I want to add background image for my header section and I am doing this in that way:
background-image: url('~/Screenshot_11.png');
After this I'm getting this error:
./src/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss)
Module not found: You attempted to import
../../../../../../../Screenshot_11.png which falls outside of the
project src/ directory. Relative imports outside of src/ are not
supported.
I've set up homepage in package.json
"homepage": "http://localhost:3000",
In my older projects that works but today I cannot import this correctly.
They have changed that but I don't know why. Working path:
background-image: url('/Screenshot_11.png');
EDIT 2021
For people who think that it doesn't work:
https://codesandbox.io/s/agitated-turing-gsnr3
you can import that image as
import Background from './Screenshot_11.png'
and use
background-image: `url(${Background})`
This still does not work for me with images in the public folder.
UPDATED 19 March 2021
Regarding using of <ROOT/public/images> in .css files.
It appears to be a breaking change (will be considered as a bug?) in create-react-app (react-scripts) package v4.x.
And more precisely in package 'css-loader' v4.x.
3.x branch works OK with that.
Here is the corresponding issue on the github repo:
https://github.com/facebook/create-react-app/issues/9870
(and there are few more actually).
No fixes (yet). (will be?..)
But a few workarounds mentioned there.
Which one to use... it depends on your project, I suppose.
Some of workarounds:
downgrade to react-scripts 3.4.x
don't use url in CSS files :) you still can use in .JSX (inline styles). Or put in .html. They are obviously not processed by css-loader.
reconfigure webpack to add url:false to css-loader options (either eject CRA or use this: https://github.com/gsoft-inc/craco or this: https://github.com/timarney/react-app-rewired
(you can find sample configurations at the github issue page)
use this new feature of css-loader https://github.com/webpack-contrib/css-loader/pull/1264
(released in 5.1.0, current last version is 5.1.3; to use that version you can add the following to the package.json: "resolutions": { "css-loader": "5.1.3" } (at root level) )
As said in the Polymer-Summit 2017, web-components, in Polymer 3.0, won't be imported using HTML-imports but ES6-modules.
So I am looking for a way to change all my HTML-imports one by one into ES6-module's import without making unstable code.
For exemple:
Here's a little simple project.
Their are 3 files:
|-index.html
|-custom-element.html
|-MyModule.html
The index.html imports the custom-elementcomponent and instantiate one in the DOM.
The custom-element.html imports MyModule.html, and use its function square(number).
All imports are made using HTML-imports.
I am trying to figure out how to make just MyModule an ES6-module and then import it in the custom-element.html file without breaking the app.
Change the script tag's type into <script type="module">.
Import the ES6 module from inside the script module.
Here's the plunker with the full solution.
we're handling low level html markup as npm modules where one could specify via comment, the name of a modules whose supporting html would be injected at that location. A module contains the html, supporting SCSS and vanilla JS. From a SCSS & JS standpoint everything is buttoned up. The moment the module is installed, the SCSS is compiled, concatenated & appended to a core CSS file and then minified. The JS treatment is very similar.
Where I'm getting very hung up on is how to treat the html snippets. Here is what I've got, which works but this isn't dynamic in any way.
gulp.task('inject-atoms', function () {
gulp.src('./index.html')
.pipe(inject(gulp.src(['./node_modules/my-module-name/my-module-name.html']), {
starttag: '<!-- inject:html -->',
transform: function (filePath, file) {
return file.contents.toString('utf8')
}
}))
.pipe(gulp.dest('./'));
});
What I'd like to be able do (within the target index.html file) is specify module names whose html snippets get injected. So something like:
<!-- inject:my-module-ABC --!>
<!-- inject:my-module-XYC --!>
The only requirement being that the modules have been installed prior to trying to inject their snippets. So the gulp task would need to sweep through the index file and for each inject comment, go fetch that module's html snippet and inject it in.
Any tips on helping me move in the right direction?
Thanks!
I followed The Bower installation method to install the Polymer library as recommended on the Polymer Project website. Specifically, I ran these commands from the root of my project's live web folder. The OS is Amazon Linux:
bower init
bower install --save Polymer/polymer#^1.2.0
bower update
This generated the following files/folders:
/bower.json
/bower_components/*
/bower_components/polymer/*
/bower_components/webcomponentsjs/*
To test whether the libraries were successfully installed, I went ahead and grabbed one of the examples from the tutorial and tried it out. Only the first line of this code comes into question, but I'm including all of it to dispel concerns that the code here is at fault:
elements/proto-element.html
// THIS is the line that doesn't work. The file exists, it was
// installed in the correct location. However, the polymer.html file
// itself appears to be broken
<link rel="import" href="../bower_components/polymer/polymer.html">
// HOWEVER, if I change it to link the library in from the web, everything
// works perfectly. As in this example:
<!--<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">-->
<polymer-element name="proto-element">
<template>
<span>Hello World.</span>
</template>
<script>
Polymer({
ready: function() {
}
});
</script>
</polymer-element>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
I examined the polymer.html file in question. The file that bower installed is completely different from the one available on the web. I guess my question is - is the bower install of Polymer just broken? Why is Bower installing a version other than the active stable release? Am I missing something?
If you open the web version's code, it is clearly marked as version 0.5.5, even though it is being pulled from the /1.0/ pool.
The bower version has no version markers in the code so I'm not sure which one it is, though I have to assume it is the latest 1.2.x stable release because that was specified in the install command. I'll note that I did try it without specifying any version as well (supposed to just install the very latest then) but that still didn't work.
Conclusion
The libraries Bower installed were working files after all. The problem was that the examples I had pulled from the "Getting Started" tutorial on the Polymer-Project.org website were outdated. Be very careful to select v. 1.0 from the top right hand corner.
It's not going to work as you're using the old way of declaring elements (pre v0.8).
Here's how you declare new elements:
<dom-module id="my-element"> <!-- ID must be the same as that of the name of the element you declared. -->
<template> <!-- Styles used to be declared outside the template v0.8 to v1.0. At v1.1 it is now declared inside the template (the outside declaration still works, it's just slow and discouraged). -->
<style>
:host {
display: block;
}
</style>
<div>Hello {{name}}.</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element', // you must declare the name of your element
properties: { // declare your element's properties here
name: {
type: String,
value: 'Neil'
}
}
});
</script>
Also, the official hub/CDN for the library is at http://polygit.org, not at the official website.