Build fails when loading react components from a `js` file
See original GitHub issuemdx-bundler
version: ^3.4.0node
version: v15.14.0npm
version: 7.7.6
Relevant code or config
What you did: Use mdx-bundler to use react components to mdx within a Next aplication
What happened:
I get the following error when using components with a .js
extension. It seems to work fine if I change the files under /components/shared/*
to be .jsx
Server Error
Error: Build failed with 1 error:
__mdx_bundler_fake_dir__/demo.js:3:4: error: Unexpected "<"
I tried using the esbuildOptions
and specify a loader for .js
files but does not seem to make a difference.
const result = await bundleMDX(post, {
files: components,
esbuildOptions: (options) => {
options.loader = {
...options.loader,
'.js': 'jsx',
};
return options;
},
});
Reproduction repository: next-mdx-simple-blog
Problem description: Build fails when loading react components from a js
file
Suggested solution: -
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
unable to load a local js file in react component ( Using React ...
What i am trying to do: Adding vidyoConnector.js script to a react component in order to create a WebRTC instance with vidyo.
Read more >Declaratively loading JavaScript - Fullstack React
If two components require the same js source, the ScriptCache won't load another instance on the page, it will just keep working. Let's...
Read more >Code-Splitting - React
Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included...
Read more >Integrating with Other Libraries - React
This guide will examine some of the more common use cases, focusing on integration with jQuery and Backbone, but the same ideas can...
Read more >Add React to a Website
The third one will load your component code. Step 3: Create a React Component. Create a file called like_button.js next to your HTML...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ve opened a PR to fix your initial issue. You where correct, setting a loader in esbuild should have fixed your problem but mdx-bundler was ignoring it. Personally I’d go with
cwd
as you have the files on disk but once this PR is merged your original code should work.@ozyxdev
files
provides the files as strings that you read in. Extra overheads for you as you need to usefs.readdir
to find them andfs.readfile
to get the contents.With
cwd
esbuild knows where you are running your mdx so it can resolve imports itself and read the files in without you doing anything.You could drop the
fiiles
option all together from your options there and it would work as well. It’s working now because esbuild’s own resolution takes precedence, so it resolved ‘./demo’ and never asked ourinMemory
plugin for an answer.