I'm trying to use qrcode-generator in my app but no success with my settings even though it's working in plunker, in my app I'm using angular-cli and angular 2.rc-1.
Steps to reproduce:
ng new newAppName
cd newAppName
ng serve
it works, then.
npm i qrcode-generator // (note this is missing the svg support).
ng serve // still work
then change the configurations in 2 files.
angular-cli-build.js:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'qrcode-generator/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)'
]
});
};
and system-config.ts:
/**********************************************************************************
* User Configuration.
*********************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'qrcode-generator': 'vendor/qrcode-generator'
};
const packages: any = {
'vendor/qrcode-generator': {
main: 'qrcode',
defaultExtension: 'js'
}
};
// ... the rest is the same
edit new-app-name.component.ts and import the qrcode-geenerator in it like this
// vscode underline the qrcode-generator string and complai about not finding it
import * as qrcode from 'qrcode-generator';
then ng serve which is still running errors out with this message:
/path/to/project/newAppName/tmp/broccoli_type_script_compiler-input_base_path-jscpZEq5.tmp/0/src/app/new-app-name.component.ts
(3, 25): Cannot find module 'qrcode-generator'.
I tried installing the typings for it by adding this to the typings.json file:
"globalDependencies": {
"qrcode-generator": "registry:dt/qrcode-generator#0.0.0+20160412152159"
}
then running:
typings i
install successful, but still the same error.
angular-cli version:
angular-cli: 1.0.0-beta.5
node: 6.2.0
os: linux x64
Am I missing something?
Is there other configuration I'm missing?
I was able to import this finally thanks to #JavascriptMick from angular-cli's gitter I did the following, first make the format global:
'vendor/qrcode-generator': {
format: 'global',
main: 'qrcode.js'
}
then when importing do it this way:
import 'qrcode-generator';
declare let qrcode;
Hope this help.
I am not sure about the specific requirements you have, but here is an AngularJS (Version 1) app that features a QR-Code generator:
http://quir.li/qr.html
You can
enter the text
select the error code level
select a size
View/Copy/download the QR code from the screen
I am the author of said page, but the QR generator is jsqrencode by tz#execpc.com
My source code is at https://github.com/suterma/quirli/blob/master/website/qr.html
Related
I am trying to run cypress test cases headless using cmd command
npx cypress run
But it gives me below error -
Do I need to install any dependency for this to load.
Even css files are not getting loaded.
Note : I haven't installed webpack or any other dependency. Only cypress is installed additionally.
Yes, you will need to extend the webpack configuration used by cypress to handle the files you would like to load. You can find an example here
Below I've modified the example to work with cypress 10.
// cypress.config.ts
import { defineConfig } from 'cypress';
import findWebpack from 'find-webpack';
import webpackPreprocessor from '#cypress/webpack-preprocessor';
const webpackOptions = findWebpack.getWebpackOptions();
const options = {
webpackOptions,
watchOptions: {},
};
export default defineConfig({
e2e: {
setupNodeEvents(on) {
// implement node event listeners here
// on('file:preprocessor', webpack(options));
// use a module that carefully removes only plugins
// that we found to be breaking the bundling
// https://github.com/bahmutov/find-webpack
const cleanOptions = {
reactScripts: true,
};
findWebpack.cleanForCypress(cleanOptions, webpackOptions);
on('file:preprocessor', webpackPreprocessor(options));
},
specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
},
});
I have an expo app .. all the mode modules are js ones. Now I am trying to add #react-three/fiber which I think is written in typescript. So, i feel the module is not working as expo is not compiling the ts or tsx files as it does with the js files. Can someone tell me how to make expo to build ts files also alongside the existing js files and node modules. Is expo capable of handling both js and ts in same project ? Below is the exception i am getting on opening the App
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Android Bundling failed 1083ms
While trying to resolve module `#react-three/fiber` from file `/<projectpath>/src/screens/spinner/spinner-3d-60deg.js`, the package `/<projectpath>/node_modules/#react-three/fiber/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/mnt/57b4f320-a355-468b-a1f5-2d4d156e25e8/projects/external/PickABoo/node_modules/#react-three/fiber/dist/native.js`. Indeed, none of these files exist:
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
You need to configure metro to compile typescript files.
Edit metro.config.js (located in your project's root folder) and make sure you have the following sourceExts: ['jsx', 'js', 'ts', 'tsx'] within your resolver options.
See relevant documentation here: https://facebook.github.io/metro/docs/configuration/#sourceexts
If you don't already have a metro.config.js file in your root folder, you can create one and enter the code below:
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'], // this line compiles typescript
},
};
I am trying to migrate a CRA react application to NX, following steps on the official site
When I hit nx serve
I am facing the following error:
ERROR in C:/dev/nx-dev/scandy/node_modules/#react-pdf/png-js/dist/png-js.browser.es.js
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules#react-pdf\png-js\dist'
ERROR in C:/dev/nx-dev/scandy/node_modules/#react-pdf/pdfkit/dist/pdfkit.browser.es.js
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules#react-pdf\pdfkit\dist'
Knowing that: before I start migration my project worked fine.
npm version: 6.14.11
node version: 14.16.0
I've tried to hit npm install zlib yet I get
Cannot find module './zlib_bindings'
For some reason, VSCode inserted import e from 'express' at the top of my file in react
import { response } from 'express';
I delete the above import line and then the problem is resolved, all the errors are gone after the above change.
It's about Webpack 5 and its default config you use for React app. I followed an advice from here: https://github.com/nrwl/nx/issues/4817#issuecomment-824316899 and React NX docs for how to use custom webpack config.
Create a custom webpack config, say, in /apps/myapp/webpack.config.js and reference it in workspace.json instead of "webpackConfig": "#nrwl/react/plugins/webpack". It should be "webpackConfig": "apps/myapp/webpack.config.js".
Content for webpack.config.js:
const nrwlConfig = require("#nrwl/react/plugins/webpack.js");
module.exports = (config, context) => {
// first call it so that #nrwl/react plugin adds its configs
nrwlConfig(config);
return {
...config,
node: undefined
};
};
So, this config change makes webpack correctly understand what polyfills are needed.
Alternatively, you can do the following:
const nrwlConfig = require("#nrwl/react/plugins/webpack.js");
module.exports = (config, context) => {
// first call it so that #nrwl/react plugin adds its configs
nrwlConfig(config);
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
stream: require.resolve('stream-browserify'),
zlib: require.resolve('browserify-zlib'),
}
}
};
};
For me it was the code:
import { response } from 'express'
This was entered automatically by VSCode at the beginning of the file.
Deleting it solved the problem.
In my case was because I tried to type 'Text' and suddenly, the autocomplete added me this line on top:
import { text } from 'express';
Just deleted it and it worked fine.
Go Search Icon in VSCode search "express" you may get things like
import { text } from 'express'
import { Router } from 'express'
import { X,Y,Z } from 'express'
delete this line your app will work fine
I am trying to set up Storybook in a project. My project is runing on react#^16, and I'm using typescript, with a custom babel and webpack setup for development and build. To set up storybook, I did
npx sb init
This installs everything needed. It puts a .storybook folder in the root folder, and a stories folder in my src folder with some prefab components and stories in tsx format (which is what I want):
The .storybook/main.js file seems fine:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
]
}
And the average .stories.js file automatically installed by npx sb init also seems fine:
import React from 'react';
// also exported from '#storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '#storybook/react/types-6-0';
import { Header, HeaderProps } from './Header';
export default {
title: 'Example/Header',
component: Header,
} as Meta;
const Template: Story<HeaderProps> = (args) => <Header {...args} />;
export const LoggedIn = Template.bind({});
LoggedIn.args = {
user: {},
};
export const LoggedOut = Template.bind({});
LoggedOut.args = {};
But when I run npm run storybook, the storybook landing page has no stories. Even though it had installed some default stories to start playing with. It says:
Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.
As requested, here is a link to the repo so you can dig a bit deeper into the structure, weback config, etc. Note I have not committed the npx sb init changes yet, so you won't see the files there, only my starting point just before running the sb init.
I haven't had any issues getting npx sb init to work with a standard create-react-app, but with my custom webpack build and typescript, its just empty. What's going wrong?
Edit: Additional detail
I realize that just running npx sb init, then npm run storybook throws this error:
ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.filter'
Based on this thread, installing core-js#3 solves the problem and storybook runs, though with no stories.
It seems like the babel plugin transform-es2015-modules-amd doesn't fit right with storybook since sb still uses your babel configuration.
You might need to remove it then it would work:
{
"plugins": [
// "transform-es2015-modules-amd", // Remove this plugin
]
}
If you want to have a special babel configuration for storybook, place it .storybook/.babelrc so the configuration would be simple like this:
.storybook/.babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react", "#babel/preset-typescript"]
}
NOTE: You might miss to forget install #babel/preset-typescript to help you transform your typescript code.
Maybe you have problems with the stories path, try to save only "../src/**/*.stories.js" in your config to see if its the reason
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
]
In case of dealing with arcgis-js-api in sb, you have to declare #arcgis/webpack-plugin in storybook's webpack configuration by adding to its config.
Here are a few steps you have to do:
Add webpackFinal property in .storybook/main.js with following content:
const ArcGISPlugin = require('#arcgis/webpack-plugin');
module.exports = {
// ...
webpackFinal: (config) => {
// Add your plugin
config.plugins.push(
new ArcGISPlugin(),
);
// Since this package has used some node's API so you might have to stop using it as client side
config.node = {
...config.node,
process: false,
fs: "empty"
};
return config;
}
};
One more thing to be aware of, some components are importing scss files, so you might need to support it by adding a scss addon '#storybook/preset-scss'
// Install
npm i -D #storybook/preset-scss css-loader sass-loader style-loader
// Add to your current addons
{
addons: ['#storybook/addon-links', '#storybook/addon-essentials', '#storybook/preset-scss'],
}
Like a tmhao2005 say. Storybook still uses your babel configuration. And this is the intended behavior. This thread at github also describes how the fix similar issue.
Updated your config .storybook/main.js.
If you use .babelrc:
babel: async options => ({ ...options, babelrc: false })
Or .babel.config.js:
babel: async options => ({ ...options, configFile: false })
trying Neutrino for the first time to jumpstart a react project. Want to add google fonts to it; tried passing google URLS in as a links array in config/html but no joy. suggestions?
There are two ways you could load Google fonts into your Web-based Neutrino project.
The easiest would probably be to install the font you would like from npm, such as Works Sans:
npm install --save typeface-work-sans
Which you can then import into your project with:
import 'typeface-work-sans';
The second method would involve the links way you mentioned, by adding an external stylesheet to your local Web-based .neutrinorc.js (using react for this example):
// .neutrinorc.js
module.exports = {
use: [
['#neutrinojs/react', {
html: {
links: [
{
href: 'https://fonts.googleapis.com/css?family=Work+Sans',
rel: 'stylesheet'
}
]
}
}]
]
};