some component like button and panel is working right but some other like rating and fielset not showing completely
i think it's because of missing font-awsome
you can see some rectangle insted of star icon:
npm install primeng --save
npm install primeicons --save
npm install #angular/animations --save
already added BrowserAnimationsModule to app.module
and this lines of code to angular.json
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
//...
],
added to import section of target page module:
import {PanelModule} from 'primeng/panel';
finlay in page.html:
<p-rating [(ngModel)]="val"></p-rating>
finlay i found the problem
first stop running ionic project. and then add primeng css after variable.scss and global.scss block like this:
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
Related
I just create my application from npm command, when i run the start script the application throws me that error.
Please provide more context. If you're using typescript on your react project. You need to upgrade both react and react-dom declaration. npm install #types/react#latest and npm install #types/react-dom#latest
If you've recently updated past npm 8.5+ and using workspaces, you have two options.
Option A) If possible, just remove your package.json declaring your "workspaces" (and the package-lock.json). I had only 1 workspace so that was the easiest fix.
Option B) Update Jest so it can find your modules. I've observed NPM 8.11 will create a node_modules in the workspaces folder and in each project.
Specifically look at the moduleDirectories key below.
{
verbose: true,
testEnvironment: "jsdom",
moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
moduleDirectories: [
// Look in current directory node_modules
path.resolve(__dirname, "node_modules"),
// Look in parent workspace node_modules
path.resolve(__dirname, "../node_modules"),
],
moduleNameMapper: {
...moduleNameMapper,
"\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
'\\.svg$': '<rootDir>/__mocks__/svgrMock.tsx',
"\\.(css)$": "identity-obj-proxy"
},
transform: {
"^.+\\.tsx?$": "ts-jest"
},
};
I've updated to React 17+ and am now getting a React is not defined issue when removing
import React from 'react' statements from typescript TSX and JSX files.
How can I fix this?
I've identified the problem is the version of a few babel plugins that are outdated that Parcel (version 2.0.0-beta.3.1 at time of writing) is using.
Here's my solution:
Add these two packages to you package.json file:
yarn add --dev #babel/core #babel/plugin-transform-react-jsx
or
npm i -D #babel/core #babel/plugin-transform-react-jsx
update your babel config or create a new .babelrc file:
{
"plugins": [
[
"#babel/plugin-transform-react-jsx",
{
"runtime": "automatic"
}
]
]
}
I am following the Working with images in markdown posts and pages tutorial for gatsby and installed the following plugins
gatsby-image
gatsby-transformer-sharp
gatsby-plugin-sharp
My images are in the same directory as my Markdown files in src/content. But my posts are still without images. I suspect I have to change something in my src/templates/blog-post.js to show the images but am unsure of the next step. Can someone tell me what changes I need to make?
Github
In order to embed images in markdown you also need gatsby-remark-images. Run yarn add gatsby-remark-images or npm install --save gatsby-remark-images.
Add this to your gatsby-config.js:
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
],
},
},
I'm trying to create an NPM module with great pain: react-smallgrid
import React from 'react';
import _ from 'lodash';
export default class SmallGrid extends React.Component{
Compiled with:
browserify: {
options: {
transform: [
['babelify', {
presets: ['react', 'es2015']
}]
]
},
jsx: {
files: {
'./dist/js/smallgrid.js': [
'./src/smallgrid.jsx',
]
}
},
When I import the js file in another project/jsx and try to browserify that, it gives the error:
Error: Cannot find module './ReactMount' from '/Users/me/code/react-smallgrid/dist/js'
I thought it's already compiled for use? I don't understand this.
Meanwhile
I've tried building it with webpack, which gives the following output:
> webpack -p
Hash: 00fd87c95d39230bd485
Version: webpack 1.12.11
Time: 14002ms
Asset Size Chunks Chunk Names
smallgrid.js 248 kB 0 [emitted] smallgrid
+ 160 hidden modules
WARNING in smallgrid.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
Still does not work.
You need to make React libs available to your code.
Run this to add browserify-shim:
npm i browserify-shim -D
Add this to your package.json:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"react": "./node_modules/react/dist/react.js",
"react-dom": "./node_modules/react-dom/dist/react-dom.js",
"lodash": "./node_modules/lodash"
},
"browserify-shim": {
"./node_modules/react/dist/react.js": "React",
"./node_modules/react-dom/dist/react-dom.js": "ReactDOM",
"./node_modules/lodash": "lodash"
}
By the way, you can also use browserify externals in your config to further reduce the resulting package. It's best to not include for example: React in your bundle.
Note:
I also sent you a PR in Github for the solution.
Your problem appears to be that you are providing the transpiled code as your library. The transpiled code includes ReactMount internally. You should be providing the source code for use as a library. Then it will transpile correctly with browserify. Look at any other npm libraries and I think you will see they provide the source to use in your imports.
As you indicated in your comment. #madox2 in Cannot import ES2015 module replied with;
"scripts": {
"compile": "babel --presets es2015,stage-0 -d dist/js/ src/"
}
So, npm install -g babel babel-preset-es2015 babel-preset-stage-0. Then npm run compile. That should put your transpiled code into dist/js.
I don't know why, but I have a problem with a little Yeoman project with Bower and Gulp.
Little question:
I installed a component with this command.
bower install angular-bootstrap-show-errors -S
That's works great.
But if I look in the gulpfile.js of my project it looks like.
vendor: {
js: [
'./bower_components/angular/angular.js',
'./bower_components/angular-route/angular-route.js',
'./bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js'
],
fonts: [
'./bower_components/font-awesome/fonts/fontawesome-webfont.*'
]
},
But the installed component is missing.
I've tried to search with google but I can't find any solution.
If I try to add config.vendor.js.push('.bower_components/angular-bootstrap-show-errors/src/showErrors.js'); to config.js it wouldn't work, too. (After bower install and gulp build)
How I can add a installed bower component to gulp?
Thanks in advance for any idea!
Bower's only responsibility is to update the bower.json file. You can just add it to your gulpfile
vendor: {
js: [
'./bower_components/angular/angular.js',
'./bower_components/angular-route/angular-route.js',
'./bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js',
'./bower_components/angular-bootstrap-show-errors/src/showErrors.js'
],
fonts: [
'./bower_components/font-awesome/fonts/fontawesome-webfont.*'
]
},
Edit:
For angular-mobile-ui, instead of altering the gulpfile, add
config.js:
config.vendor.js.push('.bower_components/angular-bootstrap-show-errors/src/showErrors.js');
and 'ui.bootstrap.showErrors' to your app's dependencies:
/src/js/app.js:
angular.module('MyApp', [
'ngRoute',
'mobile-angular-ui',
'ui.bootstrap.showErrors',
'MyApp.controllers.Main'
])
This works because in the gulpfile the settings in config.js are loaded by:
if (require('fs').existsSync('./config.js')) {
var configFn = require('./config');
configFn(config);
}