I am using Netlify CMS. I want to import all the slides for a carousel into my component. I made a collection called slider and added a few slides. That created two markdown files (one for each slide) in public/content/slider/. I would like to import them all into an iteratable object so I can build the carousel.
Because I have a webpack loader set up for markdown files, I can import a single markdown file no problem, like this:
import post from '../public/content/posts/[post name].md
But when I try to use require.context, require-context, or import fs, it's no good. So I decide to try requiring those libs from within getStaticProps. But __dirname in getStaticProps is /, the root of my computer's filesystem.
All the getStaticProps examples use data fetching. I'm missing some info. How can I import all the markdown files in the /slides/ folder?
This is a known issue in Next.js (see related discussion #32236), __dirname incorrectly resolves to / - you should use process.cwd() instead.
From the Next.js Reading files documentation:
Files can be read directly from the filesystem in getStaticProps.
In order to do so you have to get the full path to a file.
Since Next.js compiles your code into a separate directory you can't
use __dirname as the path it will return will be different from the
pages directory.
Instead you can use process.cwd() which gives you the directory where
Next.js is being executed.
Related
I am using Netlify CMS. I want to import all the slides for a carousel into my component. I made a collection called slider and added a few slides. That created two markdown files (one for each slide) in public/content/slider/. I would like to import them all into an iteratable object so I can build the carousel.
Because I have a webpack loader set up for markdown files, I can import a single markdown file no problem, like this:
import post from '../public/content/posts/[post name].md
But when I try to use require.context, require-context, or import fs, it's no good. So I decide to try requiring those libs from within getStaticProps. But __dirname in getStaticProps is /, the root of my computer's filesystem.
All the getStaticProps examples use data fetching. I'm missing some info. How can I import all the markdown files in the /slides/ folder?
This is a known issue in Next.js (see related discussion #32236), __dirname incorrectly resolves to / - you should use process.cwd() instead.
From the Next.js Reading files documentation:
Files can be read directly from the filesystem in getStaticProps.
In order to do so you have to get the full path to a file.
Since Next.js compiles your code into a separate directory you can't
use __dirname as the path it will return will be different from the
pages directory.
Instead you can use process.cwd() which gives you the directory where
Next.js is being executed.
I have these import:
import {Input, InputTxtCenter} from '../../../components/forms/input/input.js';
import {ButtonRed} from '../../../components/buttons/';
import {TxtCenter} from '../../../components/misc/texts/texts.js';
and I want to transform these routes into something similar to this
import {ButtonRed, ButtonWarning} from 'buttons';
import {TxtCenter} from 'misc/text';
import {TxtCenter} from 'forms/input';
that is, that the system knows that importing will always be from the "components" folder
Is it possible to do this?
Without having to create the component in node_modules?
I think this less of a React question, and more of a module resolution/aliasing one.
I assume that you are using some tool like babel, in which you can try babel-plugin-module-resolver.
The main idea is to define aliases in your .babelrc file so that you can avoid keeping track of relative directory structure when importing.
You can create .env file containing NODE_PATH=src if you're using create-react-app.
I recommend you to start any project using CRA with possible eject option if you really require customization.
I'm trying to use the react-draft-wysiwyg module, but the imported styles associated with the module aren't being utilized. I think this is due to the imported css being loaded into a hash whereas the class attributes of the elements in the module are not.
That being the case, can I either:
Convert the classes in react-draft-wysiwyg to hashes class names, or
Have the style loader ignore the react-draft-wysiwyg css file?
Some of the things I've tried include:
import draftcss from 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
...
export default withStyles(s, draftcss)(Layout);
Inside the main imported css file:
#import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
Importing react-draft-wysiwyg.css from the parent route's index.js file
There is an issue raised in Github about this problem.
The only solution stated there that worked is to copy all css content of the plugin to an local .css file and import into main css file.
You can find css content of the plugin in node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css
I am creating a REACT NODEJS Application using Create-React-App
I'm copying from a premade REACT site which imports images like this:
import Logo from '../../img/logo.png'
but when I do the same in my application, I get the error
Can not find module
My Folder stucture is:
\src\views\home\layout\layout.tsx \\this is the problem file
\src\views\img\logo.png \\this definitely exists
When I use require directly in my JSX it works fine, however I don't want to start off on the wrong foot doing things differently
<img src={require("../../img/logo.png")} alt="" /></a> //Works
From your folder structure your import statement should look like
import Logo from '../../../imgs/logo.png'
Edited and corrected after #zerkms pointed out my folly of counting one extra folder in the path.
Here is how I set up flask-assets for scss:
def configure_extensions(app):
# Web Assets
from app.extensions import assets
scss = Bundle(
'scss/all.scss',
filters='scss',
output='scss_all.css'
)
assets.register('scss_all', scss)
assets.init_app(app)
In my config, I set ASSETS_DEBUG = True
This works, and generates the file app/static/scss_all.scss and the folder app/static/.webassets.cache. The styles appear on the site as intended.
The problem, though, is if I want to regenerate the scss style sheet, I must delete the files mentioned above. This is tedious when playing around with scss.
Is there a way to regenerate these files automatically with the reloader when app.debug is set to True?
(aside: I'm using the dev version of flask)
This should ideally work. But incase you are using #imports to import other scss files within the main file then you need to add the depends option. Something like;
mycss = Bundle(
'app.scss',
filters='pyscss,cssprefixer', depends=('/path/to/scss/files/**/*.scss'), output='generated/css/app.css')
assets.register('mycss)
The answer by Joe should be accepted. I also implemented it in a similar way:
scss = Bundle('css/main.scss',
filters='libsass',
depends='css/*',
output='gen/home%(version)s.css')
app = Flask(__name__)
assets = Environment(app)
assets.register('scss_all', scss)
all scss files are in the css directory. The main.scss imports the others. Now any change to any file in that directory will force a refresh.