I have used pdf-viewer-reactjs into my Next.js project. But getting following error.
error - ./node_modules/pdfjs-dist/build/pdf.js 2094:26
Module parse failed: Unexpected token (2094:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| async destroy() {
| this.destroyed = true;
> await this._transport?.destroy();
| this._transport = null;
|
So far I've tried following both ways but nothing worked for me!
How to use this npm into my project without any errors?
The code (Way 1):
import React from 'react';
import StudentPortalLayout from "../../../components/Layout/StudentLayout";
import dynamic from "next/dynamic";
const PDFViewer = dynamic(() => import("pdf-viewer-reactjs"), {
ssr: false
});
function PDFView() {
return (
<StudentPortalLayout hideSidebar={true}>
<PDFViewer
document={{
url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
}}
/>
</StudentPortalLayout>
)
}
export default PDFView;
The code (Way 2):
import React from 'react';
import StudentPortalLayout from "../../../components/Layout/StudentLayout";
import PDFViewer from 'pdf-viewer-reactjs'
function PDFView() {
return (
<StudentPortalLayout hideSidebar={true}>
<PDFViewer
document={{
url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
}}
/>
</StudentPortalLayout>
)
}
export default PDFView;
I was able to run the following code successfully, however it requires additional steps
Install the babel runtime - yarn add #babel/runtime - courtesy this post.
Material UI icon gives an error, so similarly add the material UI dependencies
Assuming this is what you want:
Stackblitz - https://stackblitz.com/edit/nextjs-utkd32?file=pages%2Findex.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import PDFViewer from 'pdf-viewer-reactjs';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
</Head>
<main className={styles.main}>
<PDFViewer
document={{
url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
}}
/>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
</a>
</footer>
</div>
);
}
Dynamic Imports
If you want to do a dynamic import as you were trying to do above, the export of the individual module maybe need to linked to - potentially pdf-viewer-reactjs/pdf-viewer-reactjs - This needs more to be looked into.
Related
I created a basic NextJS app using create-next-app then added Jest for testing. However, I am getting the error "An update to Image inside a test was not wrapped in act(...)" in my Jest test. It seems to be something to do with the Image component of NextJS updating after render, but I'm not quite sure what's the best way to test with it. I've included the Jest test and the problematic part of the component here:
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</main>
</div>
)
}
export default Home
import React from 'react'
import { render, act } from '#testing-library/react'
import { axe } from 'jest-axe'
import Home from '#/pages/index'
it('should demonstrate this matcher`s usage with react testing library', async () => {
const { container } = render(<Home/>)
const results = await axe(container)
expect(results).toHaveNoViolations()
})
The error message also points to code at node_modules/next/client/image.tsx:353:3 being problematic, and looking at the source, that part seems to be a useLayoutEffect hook in the Image component...
Figured it out. Followed the solution mentioned at this article and it worked.
Install react-intersection-observer
In the Jest config (jest.config.js):
Add react-intersection-observer/test-utils' to the setupFilesAfterEnv
Create a jest.setupFiles.js and add to setupFiles in the in the customJestConfig
{
...
setupFiles: ['<rootDir>/jest.setupFiles.js'],
setupFilesAfterEnv: [
'<rootDir>/jest.setup.js',
'react-intersection-observer/test-utils',
],
...
}
In jest.setupFiles add:
import { defaultFallbackInView } from 'react-intersection-observer'
global.IntersectionObserver = jest.fn()
defaultFallbackInView(false)
And the error should go away. :)
I am new to Nuxt, and am attempting to turn the Vue plugin vue3-markdown-it into a Nuxt 3 plugin, but am receiving the following error:
[Vue warn]: Failed to resolve component: Markdown If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
What am I doing incorrectly?
Nuxt 3 Plugin Documentation
// md-plugin.client.ts
import Markdown from 'vue3-markdown-it'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(Markdown)
})
// index.vue
<template>
<main>
<ClientOnly>
<Markdown :source="content" />
</ClientOnly>
</main>
</template>
<script lang="ts" setup>
const { find } = useStrapi4()
const {
data: {
attributes: { content },
},
} = await find('homepage')
</script>
I had a similar problem on different plugin. I solved the problem by using component instead of plugin.
Create a new file under the components folder (Markdown.vue).
Add Markdown codes in this file:
<template>
<Markdown :source="content" />
</template>
<script lang="ts" setup>
import { defineProps } from "vue";
import Markdown from 'vue3-markdown-it';
defineProps({
content: { type: any }
});
</script>
You can customize this code.
Delete plugin file (md-plugin.client.ts)
Now <Markdown :source="content" /> will see our generated Markdown component. It worked me.
can anyone show me how to properly apply drag and drop functionality (from local file browser to chonky file browser). I'm using React Typescript with Chonky.io library.
import React, { useMemo, useState } from 'react';
import {
FileBrowser,
FileContextMenu,
FileList,
FileNavbar,
FileToolbar,
} from 'chonky';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';
const FileBrowser = ({
darkMode = false,
i18n = 'defaultLocale',
disableDragAndDrop = true,
}: IFileRepositoryProps) => {
return <DndProvider backend={HTML5Backend}>
<FileBrowser
files={files}
folderChain={folderChain}
darkMode={darkMode}
i18n={i18n}
disableDefaultFileActions={true} //to remove default file actions and replace with customized ones
fileActions={fileActions}
onFileAction={handleFileCallback}
iconComponent={customChonkyIcon}
disableDragAndDrop={disableDragAndDrop}
>
<ThemeProvider theme={overrideStyles}>
<FileNavbar />
<FileToolbar />
<FileList />
<FileContextMenu />
</ThemeProvider>
</FileBrowser>
</DndProvider>
}
This is the portion of code I've come up with but now the drag and drop within the chonky file browser is not working anymore. Would really appreciate your help with this. Thank you.
How can I dynamically import a file containing JSX and have it be transpiled like a regular import?
I'm trying to dynamically import() this React component:
import React from 'react';
export default () => {
return (
<div>Test</div>
);
}
from a service in my application:
import('./test').then(({default: Component}) => {
callback(Component);
});
but it appears the dynamic import doesn't transpile the JSX:
SyntaxError: /path/to/test.js: Unexpected token (5:4)
3 | export default () => {
4 | return (
5 | <div>Test</div>
| ^
6 | );
7 | }
8 |
I have plenty of regular imports which work fine:
import OtherComponent from './OtherComponent';
export default () => (
<OtherComponent />
);
so Babel is definitely transpiling those... just not the dynamic ones.
Looking at the build output from yarn build, I can see a chunk is created but it simply contains this error (implying the file cannot be transpiled at build time ?!?):
(window["webpackJsonptest-app"]=window["webpackJsonptest-app"]||[]).push([[0],{272:function(m,e){throw new Error('Module build failed (from ./node_modules/babel-loader/lib/index.js):\nSyntaxError: /path/to/build/test.js: Unexpected token (12:2) ... etc
I have a React application that uses vega-lite for data visualizations. I tried to use the official tooltip addon for vega (https://github.com/vega/vega-tooltip), however I have no idea how to do it in a React component.
This is the component I have:
import React from 'react';
import PropTypes from 'prop-types';
import VegaLite from 'react-vega-lite';
const VegaChart = ({data, spec}) => {
return(
<div className="vega-chart-wrapper">
<VegaLite spec={spec} data={data} />
</div>
)
}
VegaChart.propTypes = {
data: PropTypes.object.isRequired,
spec: PropTypes.object.isRequired
}
export default VegaChart;
From the documentation of vega-tooltip, it says that I can install the module and then I have to do this:
<!-- Placeholder for my scatter plot -->
<div id="vis-scatter"></div>
var opt = {
mode: "vega-lite",
};
vega.embed("#vis-scatter", vlSpec, opt, function(error, result) {
// result.view is the Vega View, vlSpec is the original Vega-Lite specification
vegaTooltip.vegaLite(result.view, vlSpec);
});
This looks like the standard way to integrate in a jQuery application, but this is not gonna work in a React component. Any ideas?
Your react-vega-lite must already include vega-lite. So
import * as vega from 'vega-lite';
And put the rest in componentDidMount of your VegaChart