I was creating a customer element using the "Your first Polymer App" templates and I wanted to switch over from the included components folder to a Bower managed install. However, after swapping some URLs I began to receive the following error:
polymer Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
The solution is to change ALL of the file paths over to the Bower install of Polymer at the same time. HTML imports suppress duplicate paths but switching will cause it to load Polymer twice and things break.
Related
I have a react application created using "create react app rewired". I've installed ts-jest and want to be able to customize Jest. I read the documentation from ts-jest and executed npx ts-jest config:init at the root level of my project to create the initial configuration file. To test that jest is indeed using that configuration file, I wrote the following line console.log(window); in a sample test file and modified the configuration such that testEnvironment is set to "node".
I am expecting the test to fail due to window being undefined, but I am getting the window object back. I tried renaming the file to jest.config.ts and I got the same result.
I did a global search across all the files to see if there's another configuration file somewhere that is overriding my configurations, but there was none found.
What am I doing wrong? I know jest comes pre-packaged with create-react-app (CRA). I would imagine that create-react-app-rewired would only include some wrapper above CRA so where is it getting its configurations from?
I've come to realize that create-react-app-rewired package had nothing to do with this issue since it is simply a wrapper package that exposes a configure-overrides.js file to allow developers to modify the webpack configurations managed by create-react-app.
The jest.config.ts or jest.config.js config file I created had no effect because create react app (CRA) will generate and use its own jest config file underneath the hood.
I discovered this by happenstance while researching on another issue. A comment by dstapleton92 on GitHub helped me draw this conclusion.
Create React App supports overriding SOME of the values via the "jest" property in package.json file. Upon inspecting the jest config factory function in CRA, testEnvironment property is hard coded to "jsdom" and the key is not exposed as part of the list of overridable properties.
This is why the attempts I made were not successful.
I'm working on a project using Electron and Webpack in which I have three processes: main, renderer and app (app and renderer being children of main). App process is forked from main. Before applying webpack into app process, eveything worked just fine. Now that I'm using webpack to create app's bundle, suddenly the child process doesn't seem to be able to send messages to it's parent process.
While debugging, I've added the following line in app's file:
console.log(process.pid);
And weirdly it prints out undefined. How can a process print it's own PID and print undefined?
Silly mistake. In webpack.app.config.js file, target should be node, but it was electron-main. Changed it and everything worked.
I still don't know why it printed undefined as it's PID, though.
I am developing a web component using Polymer v3, and need to include some custom elements defined in legacy Polymer 2 components in the template HTML of my new component.
Since HTML imports are no longer supported in Polymer 3, what approach should I take to include them? If I was using Polymer 2 I could just add the following in my component's HTML file:
<link rel="import" href="../my-legacy-component.html">
I have tried adding the above link into the template HTML of my component, but it appears that doesn't work. I have also tried various import commands to reference the JS files inside the legacy component directly, but received various inscrutable JS errors so I'm not sure if that is the correct way to go either.
I can't believe there isn't a simple way to do this - would the Polymer team really introduce a new version of the library that is completely incompatible with all the components created using older versions?
Did you try to use polymer-modulizer?
Modulizer performs many different upgrade tasks, like:
Detects which .html files are used as HTML Imports and moves them to .js
Rewrites in HTML to import in JS.
Removes "module wrappers" - IIFEs that scopes your code.
Converts bower.json to package.json, using the corresponding packages on npm.
Converts "namespace references" to the proper JS module import, ie: Polymer.Async.timeOut to timeOut as imported from #polymer/polymer/lib/util/async.
Creates exports for values assigned to namespace referencs. ie, Foo.bar = {...} becomes export const bar = {...}
Rewrites namespace objects - an object with many members intended to be used as a module-like object, to JS modules.
Moves Polymer element templates from HTML into a JS template string.
Removes s if they only contained a template.
Moves other generic HTML in the document into a JS string and creates it when the module runs.
more on github
I have ran into the same problem with the module js-yaml earlier. I don't have enough reputation for a comment yet so I just write it down here.
Run this sudo npm install -g js-yaml -> This will install the missing package for the tool
Then at the root of your project, run modulizer --import-style name --out . -> This will convert your component from Polymer 2 to Polymer 3. The option --import-style name tells the tool to use package name instead of path. --out will make the tool writes those files to the directory.
After that, if no error prompts. Try to serve it with polymer serve --module-resolution=node -> Since we are using node modules now, we have to provide the --module-resolution=node option.
How to install polymer iron and paper elements for Polymer 0.9 using bower? Tried using bower to install in a way similar to core-elements but fails. Migration guide doesn't provide any information on upgrading core/iron or paper elements.
bower install Polymer/iron-elements#^0.9.0
bower iron-elements#^0.9.0 not-cached git://github.com/Polymer/iron-elements.git#^0.9.0
bower iron-elements#^0.9.0 resolve git://github.com/Polymer/iron-elements.git#^0.9.0
bower iron-elements#^0.9.0 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/Polymer/iron-elements.git", exit code of #128 fatal: remote error: Repository not found.
The new 0.9 elements are here.
You get them with bower this way:
bower install polymerelements/iron-ajax
I don't think there's an entire element collection ready yet, you should probably download every single needed element.
You can find more info about the new elements in the 0.9 release info:
Where did the elements go?
Not all elements have been ported to the
current release, but we’re porting them as fast as we can. You can
find work-in-progress versions of many elements in the PolymerElements
GitHub organization.
The elements are being reorganized into more consistent product lines,
including:
Iron elements. Basic elements that don’t express a visual style. Most
of the old core- elements are being renamed to iron-. Some former
core- elements that implemented material design (such as core-toolbar,
core-menu, core-header-panel) are being migrated to paper-.
Paper elements. Material design elements. All of the old paper-
elements, plus a few of the old core- elements.
Neon elements. Animation elements.
These element sets will be launching with their own site sometime
around the Polymer 1.0 timeframe. The new site will include API docs
for the elements. If you want to get started with the work-in-progress
versions, the individual repos are the best source for information
about the elements right now.
You can also check out the community Road to Polymer project which is
tracking the status of Polymer elements.
Also, you may find some valualble info in the Polymer Blog. Stay tuned!
Thanks Matteo. Adding to Matteo's answer we can install all available ported iron and paper elements for Polymer 0.9.0 using the following bower commands
bower install polymerelements/iron-elements
bower install polymerelements/paper-elements
for any elements installation, first go to element's page:
https://elements.polymer-project.org/
and find the element you want. while inside the element's page, in the left hand side, there is 'Bower Command' section.
just copy that and paste it in your shell/terminal/command prompt.
I had the same error as you reported, and was unable to install any elements using bower as proposed above. However, everything worked after running following command in my project folder:
git config --local url."https://".insteadOf "git://"
Here you may find more details about this solution:
Bower Install error: Unable to connect & exit code of #128
It seems that you have to manually checkout a bunch of repos, and when I tried to run the core-tests runner.html, they reference htmls from outside the folder which is restricted by the browser
Polymer uses a notion of components. We define a component as a set of shareable resources in a folder. All of your components should be together in one master folder (I usually call it components). This way one component can reference another component by looking in ../<component-name>/.
A project will generally look something like this:
my-project/
index.html
components/ <-- could be symlink or a server redirection
platform/ <-- polyfills
polymer/ <-- polymer
core-ajax/ <-- a custom element
...
core-tests in particular, is itself a component. It lives in the components folder and runs tests on other components (by looking at ../<component-name>/ as above).
So, if your web-root in the example above is my-project, you should be able to access my-project/components/core-tests/runner.html to run those component tests.
There are multiple ways to populate the components folder. The easiest way is to use Bower (http://bower.io) with a command like bower install Polymer/core-elements.
You can also use Git checkouts, or ZIP archives. There is a nifty utility for downloading Bower packages as zip files at bowerarchiver.appspot.com. E.g.:
http://bowerarchiver.appspot.com/archive?core-elements=Polymer/core-elements
Will get you a zip of the core-elements Polymer component, with all of it's dependencies.
There are two Yeoman generators that can help you with starting off: yo polymer and yo element
yo polymer is based on the polymer seed-element and yo element is based on the polymer-boilerplate.
I ended up writing a blog post on getting the hang of these different setups. If you get the latest version of the generator from the github repo it will scaffold an app for you:
npm install -g git+https://github.com/yeoman/generator-polymer.git
Also make sure to have a look at the vulcanize task to concat your components.