jescalan / babel-plugin-import-glob-array Goto Github PK
View Code? Open in Web Editor NEWAllows import paths to expand globs and import into an array
Allows import paths to expand globs and import into an array
This is a super useful plugin, however I wish it supported export from
clauses!
These two modules should be equivalent to an importer:
export { resource } from "source/*"
import { resource } from "source/*"
export { resource }
However because this plugin only looks for import
declarations and not also export
declarations, this ends up not being true.
Hello @jescalan. First of all thanks for making such a superb tool. I was looking for something like this to collect data from MDX blog posts in my Next.js blog and this solves the problem in a really neat way.
I ran into an issue however when I tried using babel module alias in the module import path. Next.js supports it via jsconfig.json.
Am I doing something wrong here? You can see my exact steps in this PR-
Hi, do you plan to support **
imports like babel-plugin-import-glob
?
Hello, thanks for creating this package (and thx for next-mdx-enhanced
too) :D
I wanted to set up a Next.js blog using next-mdx-enhanced
- and it worked fine locally (both next build
and next dev
).
But when I try to deploy it on Vercel - it breaks. It says that it cannot find an .mdx-data
folder.
Failed to compile.
./pages/blog/index.tsx
Module not found: Can't resolve '/vercel/fe67864/.mdx-data/115651746382137e132aae2ef68bd767.json' in '/vercel/fe67864/pages/blog'
21:41:05.450
> Build error occurred
Error: > Build failed because of webpack errors
at build (/vercel/fe67864/node_modules/next/dist/build/index.js:13:917)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
Here is my .babelrc
:
{
"presets": [
[
"next/babel",
{
"preset-env": {
"useBuiltIns": "entry",
"corejs": 3
}
}
],
"@emotion/babel-preset-css-prop"
],
"plugins": ["import-glob-array", "emotion"]
}
And next.config.js
:
const withImages = require('next-images')
const withFonts = require('next-fonts')
const withOptimizedImages = require('next-optimized-images')
const withMDX = require('next-mdx-enhanced')({
remarkPlugins: [require('remark-emoji'), require('remark-twemoji'), require('remark-images')],
rehypePlugins: [ require('rehype-slug'), require('rehype-autolink-headings')],
defaultLayout: 'index.tsx'
})
module.exports = withMDX(
withFonts(
withOptimizedImages(
withImages({
handleImages: ['jpeg', 'svg', 'webp', 'gif'],
pageExtensions: ['md', 'mdx', 'tsx', 'ts']
})
)
)
)
I have a post list in pages/blog/index.tsx
:
import React from 'react'
import { NextPage } from 'next'
import Link from 'next/link'
import 'isomorphic-unfetch'
import { frontMatter, MDXPost } from './*.mdx'
const formatPath = (p: string) => p.replace(/\.mdx$/, '')
const PageList: NextPage = () => {
const posts = (frontMatter as MDXPost[]) || []
return (
<section>
<h1>My Blog</h1>
<div>
{posts?.map((post) => (
<Link key={post.title} href={formatPath(post.__resourcePath)}>
<a href={formatPath(post.__resourcePath)}>
<figure key={post.title}>
<img src={post.image} alt="" />
<figcaption>
<h2>{post.title}</h2>
<span>{post.date}</span>
</figcaption>
</figure>
</a>
</Link>
))}
</div>
</section>
)
}
export default PageList
and a list of .mdx
posts:
โโโ 2020-bundlers-review.mdx
โโโ basis-universal-setup.mdx
โโโ being-a-teen-developer.mdx
โโโ index.tsx
โโโ lets-write-frontend-in-go.mdx
โโโ my-new-website.mdx
โโโ tsc-cjs-esm.mdx
Repo: https://github.com/talentlessguy/v1rtl_site
Versions:
vercel
cli: 19.0.1next
: 9.4.4next-mdx-enhanced
: 3.0.0babel-plugin-import-glob-array
: 0.2.0A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.