According to the documentation in the latest NextJS I can use a style sheet (bootstrap) by doing the following:
pages/_app.js
import '../static/bootstrap.min.css'
// this default export is required in a enw file
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Then I can run my project and utilize bootstrap.
When I do the above I get the following error:
[ error ] ./static/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/postcss-loader/src??__nextjs_postcss!./static/bootstrap.min.css)
Module not found: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Volumes/OGX/Code/itsyoo/static'
Any idea how I can resolve this?
It says that fonts can't be found in the directory. You can put fonts there or use npm package.
I suggest to install Bootstrap with npm.
npm i bootstrap
Include it in the _app.js like import 'bootstrap/dist/css/bootstrap.min.css'.
Related
I am running Next.js 13.0.5 with Yarn 3.2.1 and Lerna 5.6.1.
It seems like the main problem here is the build tool, because when I run the Next.js server itself (yarn dev) everything works perfectly.
What error am I getting?
Type error: Cannot find module 'next/app' or its corresponding type declarations.
which happens here right at the start of the program
import type { AppProps } from 'next/app'
^
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
After looking around I tried some experimental features like swcFileReading : false
but it doesn't seem to have any effect.
try:
yarn dlx #yarnpkg/sdks vscode
Then you don't need to fallback to nodeLinker: node-modules as other StackOverflow suggestions to this problem. It resolved for me!
for more info check the yarn/ts issue: https://github.com/yarnpkg/berry/issues/4872#issuecomment-1284318301
I have a React project served using Ruby on Rails 7. It's set up using this tutorial (source code available here); I'm at the part where you add React Router so you can add a second page to the app.
I ran yarn add #fullcalendar/react #fullcalendar/daygrid and created a new component:
import React from 'react';
import FullCalendar from '#fullcalendar/react';
import dayGridPlugin from '#fullcalendar/daygrid';
const Hoard = () => {
return <div>
<FullCalendar
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth"
/>
</div>
}
export default Hoard;
Then when I run ./bin/dev and load the page, I get this error:
It seems that FullCalendar's CSS is somehow breaking Rails' asset pipeline. That doesn't make sense to me; FullCalendar doesn't have a file named application.css. Rails is creating app/assets/builds/application.css and then complaining that its filename conflicts with app/assets/stylesheets/application.css. This seems like a Rails problem instead of a FullCalendar problem, but it didn't come up until I added FullCalendar to the project. I can fix the problem by uninstalling FullCalendar, deleting my #node_modules folder, running rake assets:clobber and then rake assets:precompile.
Is this a FullCalendar problem or a Rails problem?
Here is my situation :
Web site powered by Angular 4
Initialised with Angular Starter Kit
Using Semantic UI as CSS framework
Here is my issue :
Adding Semantic UI to webpack has no effect.
Here is what I tried :
(I followed the official Angular documentation for webpack)
Add semantic-ui to package.json from terminal
npm install semantic-ui-css --save
Add vendor bundle to the entry property in webpack.common.js
[...]
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'vendor': './src/vendor.ts'
},
[...]
Create the src/vendor.ts file and set its content to :
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// My CSS framework
import 'semantic-ui-css';
What I got :
Webpack build without error, the vendor bundle is created :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor
And webpack inject the bundle script in the HTML page :
<script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body>
But the visual doesn't change (but should I check it with CDN) and I don't see the vendor.bundle.js file in the dist folder.
I probably miss something, what is it ?
Below statement only imports semantic.js as package.json is pointing
to that file.
import 'semantic-ui-css';
To import CSS, you can add the below:
// To import CSS
import 'semantic-ui-css/semantic.css';
OR in src/styles/styles.scss
#import '../../node_modules/semantic-ui-css/semantic.css';
I'm using ASP.NET Core Template Pack (Angular 2 , Net core ,webpack) (plugin website)
Now I need to use a css file that is not located in mycomponents folder.
My folder structure :
screenshot
Component
import { Component } from '#angular/core';
#Component({
selector: 'app',
template: require('./app.component.html'),
styles: [require('./mystyle.css')]
})
export class AppComponent {
}
and I ran the command :
webpack --config webpack.config.vendor.js
I still get the error
Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "./mystyle.css"
Can someone help me ?
Thanks
Your css file is located in different folder.
Path to your custom css should be [require('../../../assets/css/mystyle.css')]
Please note it that there is already created css file for app.component by default.
I would like to know how to use React components from npm in Meteor 1.3 using import.
I am trying to use react-gravatar in my project. I did npm install --save react-gravatar. And in my component, I required it:
import React from 'react';
import Gravatar from 'react-gravatar';
export default React.createClass({
render() {
...
}
});
But I get:
Uncaught Error: Cannot find module 'querystring'
I think this is because querystring is not available in client side, and I need to use browserify-reactify of some sort. But how can I do so in Meteor 1.3?