Has anyone been successful in adding material-components-web into snowpack project?
I have used #snowpack/plugin-sass", it work fine with local .scss files, but when trying to import MDC components with javascript for example (import {MDCRipple} from '#material/ripple'; ), it breaks the sass modules of mdc in node-modules and always gives error like 'dependency not found'.
Also used saas-migrator package and it didn't work with them either.
It seems like a sass version failure, but don't know what is problem because all the examples are based on webpacks.
Could anyone share proper snowpack+#snowpack/plugin-sass+material-components-web configuration with simple example?
Related
I am looking to use the Facebook Static Analyzer Flow with my Ionic project. I am new to the different package managers as Ionic uses Webpack. Every tutorial I see for Flow indicates to configure Babel to use it, but it does not appear that Ionic uses Babel. Is there an issue configuring Flow with Ionic 3 with Babel?
All the references I have found for Typescript use either Babel or Webpack, which is why I am not sure that the two can work together.
There are two parts to Flow, the flow binary, and the flow preset for Babel.
You write JS with added flow type annotations, but the flow type annotations would not be acceptable to your JS interpretter (node, browser etc) - so the source files have to be transpiled to remove the Flow type information.
Babel is your transpiler, with the appropriate presets and plugins.
Webpack is used ahead of that chain to marshall other resources to get from source to build/distribution code.
Webpack can be configured with the babel-loader plugin so that Babel is run as the packing proceeds.
The babel-preset-flow is used to transpile the type-annotated code to plain JS.
So, Webpack uses Babel, Babel uses Flow preset.
There is also a comment mode for Flow which allows you to use Flow without having to do any transpiling which might also be a solution to your problem if you can't configure the tool stack to your liking.
I have flow integrated into a webpack / babel build using flow-babel-webpack-plugin and it works great. Webpack dev server compiles / serves assets in less than a second and if there are flow type errors it prints them out nicely. I'm very happy with that.
The problem begins when I turn on my IDE. In both VSCode and Atom, if I enable any kind of flow support, my webpack / babel build immediately begins to choke. It will take anywhere between 4 and 70 seconds to compile any change. Often it fails and gives multiple flow is still initializing notices and indicates it has tried to start the server over and over.
I suspect that both webpack and the IDE are trying to spin up separate flow servers at the same time and this is causing a conflict. Or they are using the same flow server and this is, for some reason, also a problem. I just can't figure out what to do about it. I have tried pointing at separate binaries with webpack using the global flow and the IDE using the one from node_modules. No dice.
It seems like this must be an extremely common use case - flow + a webpack watcher + any IDE whatsoever.
I'd like to have both my webpack build compile flow code and have my IDE show me syntax errors etc. So far that's been impossible
It looks like that plugin uses its own copy of Flow, from the flow-bin package:
index.js
package.json
If this version is out of sync with what your IDE is starting up, then they will fight -- starting up one version of Flow will kill any Flow server with a different version that is already running in that directory.
If you put flow-bin in your devDependencies (alongside this webpack plugin) and lock it to a specific version, and also set your IDE to use the Flow binary from flow-bin, then it looks like npm will just install the version you specify, and both the plugin and the IDE will be able to use the same Flow version.
Without knowing more specifics about your setup, it's hard to recommend a more concrete solution. You'll have to either make it so both your IDE and this webpack plugin are running the same version of Flow, or stop using either the IDE or the webpack plugin.
I would like to create a test suite which will be run with karma against my app which is using webpack to build itself. I have two entrypoints, app and vendors. These are set up through my webpack.config.js file here. The resulting bundle.js should contain both of these entrypoints in its generated file.
My karma (mocha) tests residing in test/spec/*_spec.js are currently pointing to specific components, via require statements like:
var app = require('../src/scripts/App')
They also utilize react/jsx which seems to be causing problems during the test run where I get jsx errors:
Module parse failed: /Users/dmarr/src/status/test/spec/app_spec.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
I'd like to keep test runs quick as possible as well as fast build times for testing with webpack-dev-server during development by minimizing babel transforms to only where needed.
What do I need to do in karma.conf.js to get my builds working? Here is the karma.conf.js file I'm playing around with.
Note, that I do have this working without breaking out the vendor bundle here: https://github.com/bitwise/status
Thanks for any help,
Dave
In a similar setup, disabling CommonsChunkPlugin (for testing only) worked for me. Give it a shot!
I'm currently using ember-cli with ember-qUnit for testing. I would also like to add code coverage results to the test output, so after some research blanketjs seemed the way to go. I installed blanket using:
npm install blanket
And moved the blanket folder into the ember-cli vendor folder. As I understand the way to import libraries is through the Brocfile.js which I am doing like so:
app.import('vendor/blanket/dist/qunit/blanket.js');
Using ember inspector it appears that blanket has been imported correctly, and the "enable coverage" checkbox has appeared at the top of the qUnit test results page. However the tests just hang and just say "running". No tests seem to run. When I use:
ember test -server
It says that it is "waiting for runners". Does anyone know what could be going wrong here?
I've looked around and it seems code-coverage with ember-cli is a tricky subject:
Ember CLI Code Coverage Reports
Thanks
I installed it using ember-cli-blanket. I don't think you need to include it in your Brocfile.js, but instead import it in your tests/index.html after you import your test-support.js.
Blanket will probably make your runners hang for a big as it is essentially loading you entire app all over again.
For what it's worth, I haven't been able to get accurate test coverage using this method yet, but it's possibly user error.
Lately, I am trying to use Eclipse more often, but so far I have shied away from it because I found it so difficult to install new packages. Whenever I find and try to install a new package, the errors panel flashes a batch of configuration errors. It requires this or that package to install this one. And when I find that package, it turns out that package requires another one that I don't have...and it's been a daunting problem for me.
These days I've been running into these configuration errors:
The current configuration contains errors and this operation can have
unpredictable results.
JST Web Core Patches requires feature "org.eclipse.jst.web_core.feature ".
WST Server Core Patches requires feature "org.eclipse.wst.server_core.feature".
Specifically, I'm looking for help to figure out how to get around these errors. (There aren't any informative pages in Google for "org.eclipse.jst.web_core.feature.")
More generally, though, I am wondering what alternatives I have to the internal package management system of Eclipse? (If I'm doing it wrong and the internal system is not as difficult as it seems to me, let me know of that as well!) I've heard of Pulse, but haven't used that much.
are you using 3.4 Ganymede? .. the dependencies should be figured out and selected for you .. in 3.1 there is a 'Select Required' button in the Updates window which is supposed to locate and select for you all the dependencies