We recently updated our Angular Dependencies to 6, and now ng-packagr breaks with the listed error. with ng serve and ng build, the import strategy...
#import "~src/scss/variables"
works fine. When ng packagr gets to the Rendering Stylesheets portion, it breaks with the error above.
This is my ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts",
"externals": {
"#angular/animations": "ng.animations"
}
},
"whitelistedNonPeerDependencies": ["."]
}
Is there an option I'm missing?
Related
I am unable to load an .mjs file and run tests with mocha.
I have tried mocha v.7.2.0 with flag --experimental-modules and v.10.0.0 without flag.
I am using node v.14.15.4.
The import statement that I have in my code to test is:
import * as XLSX from 'xlsx/xlsx.mjs';
NB: this import statement works 100% fine while building my app with Webpack.
The error I get when I try to run unit tests on this code with Mocha is:
(node:5452) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
C:\Users......webapp\node_modules\xlsx\xlsx.mjs:81
export { set_cptable };
^^^^^^
SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:979:16)
My mocha invocation is a vanilla mocha \"src/**/*.spec.js\", which I call through an npm task; as I mentioned before, flag --experimental-modules does not help.
My .babelrc, which (I suspect) is used to transpile my code, is the following:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"react-hot-loader/babel",
["module-resolver", {
"alias": {
"#src": "./src"
}
}]
],
"env": {
"coverage": {
"plugins": [
"istanbul"
]
}
}
}
What can I do to solve this problem?
Learner and keep getting "Step implementation missing for: I open Google page" error.
Here is my repo https://github.com/PatoDeVille/TsBDDtest.git
Checked the documentation here https://www.npmjs.com/package/cypress-cucumber-preprocessor#cypress-configuration and all seems okay.
The tutorial I am following is https://www.youtube.com/watch?v=ZM7bzu0zIT8
Also checked the problem in Cypress.io and Cucumber.io testing integration, Step implementation missing for: and the bug is still present
/package.json devDependencies
{
"browserify": "^16.2.3",
"cypress": "^7.3.0",
"cypress-cucumber-preprocessor": "^4.1.0",
"node-static": "^0.7.11",
"typescript": "^2.9.2"
}
/cypress.json
{
"testFiles": "**/*.feature"
}
/.cypress-cucumber-preprocessorrc.json
{
"nonGlobalStepDefinitions": true,
"step_definitions": "cypress/support/step_definitions/"
}
If you specified in the following way
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true
}
cypress will check for your test definitions inside the integration folder but if you want to change the location outsite the integration file folder you should set it as the following way (define the nonGlobalStepDefinitions as false and define the stepDefinitions file folder)
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/stepsDefinition"
}
it should work, here I attach you an example of my structure
I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui
I am trying to set up Browserify with Elixir and Browserify Shim on Laravel 5.2 to use Gulp with my JavaScript files, but I didn't have much luck so far. This should be pretty straightforward to do, but it isn't.
Here is my package.json
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"browserify-shim": "^3.8.12",
"jquery": "^2.2.0",
"jquery-ui": "^1.10.5",
"laravel-elixir": "^4.0.0"
},
"browser": {
"app": "./resources/assets/js/app.js",
"utils": "./resources/assets/js/utils.js",
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"app": {
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"depends": [
"jquery:$"
]
},
}
}
gulpfile.js
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.browserify('main.js', './public/js/bundle.js');
});
Entry script main.js looks like this:
var $ = require('jquery');
var Utils = require('utils');
var App = require('app');
app.js
var App = {
init: function(){
console.log(Utils);
Utils.doSomething();
}
//other methods
};
In short: Utils depends on $, and App depends on both $ and Utils.
When I hit gulp from terminal, bundle.js is correctly created. All scripts are wrapped up in Browserify code (as expected). Each script has all included dependencies, like I configured in package.json so this part looks good as well.
The problem is that all my included dependencies are empty objects. For example, Utils in app.js is empty, and I get an error when I try to call its method "doSomething". Console log prints out an empty object "{}" instead of real object. The only correctly included script is jQuery and it's not an empty object.
What could be wrong here? Do I need to make some changes in my JS files or in configuration to make this work? It looks like I'm pretty close to the solution, but it still does not work and I can't use it at all.
It is the easiest solution to directly use 'exports' from browserify-shim property:
"browserify-shim": {
"app": {
"exports": "App",
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"exports": "Utils",
"depends": [
"jquery:$"
]
},
}
Take a look at this repo which I believe shows the fixed version of your app. The issue is that your app.js and utils.js modules aren't exporting anything to their respective require calls. One option is to add a line like:
module.exports = App;
to the bottom of your app.js file, and the equivalent to the bottom of your utils.js file. You'll see if you test the repo that badapp doesn't have this line and produces the exact behavior you're describing.
See this answer for an explanation of the issue.
I'm using the "Marionette-Require-Boilerplate" (https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate) to build my app, which also uses Firebase and FirebaseSimpleLogin. They are working fine in 'development' mode, but when it's time to minify it into 'Production' mode using Grunt and running in the browser, the minified version will have trouble finding the Firebase libraries, spitting out an error saying firebase is not defined. Both the Firebase and FirebaseSimpleLogin libs have been included in the config file as followed:
paths:{
"firebase" : "../libs/firebase",
"firebase-simple-login" : "../libs/firebase-simple-login",
"backbone-firebase" : "../libs/backbone-firebase",
}
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"],
"exports": "backbone-firebase"
}
}
It seems like the Boilerplate is minifying the code using Almond.js in 'production mode', but I'm not sure how that's affecting it. I tried including the Firebase libs in the 'path' variable in Grunt.js, but that didn't do anything.
Any help is appreciated!
Thanks.
-Tony
You shouldn't be minifying the already minified Firebase sources - that will cause trouble. You should skip minification for firebase.js (and simple login).
Thanks to the Firebase Support Team in solving the problem. The solution is to remove the "exports" from the "backbone-firebase" shim as there's no such thing as "backbone-firebase"; it is part of the "Backbone" namespace, e.g. Backbone.Firebase.Colection. Require.js was looking for something that is called "backbone-firebase" while non exists. Once the "exports" is removed, Require.js works correctly during the minification.
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"]
}
}