I try to install react-markdown to my nextjs project, but getting instantly following error when I try to use it.
My Code:
import React from 'react'
import ReactMarkdown from 'react-markdown'
export function Markdown({ markdown }: { markdown: string }) {
return (
<article className="prose-sm">
<ReactMarkdown>{markdown}</ReactMarkdown>
</article>
)
}
The error message:
Error: Must use import to load ES Module: /Users/username/Projects/mono/node_modules/react-markdown/index.js
require() of ES modules is not supported.
require() of /Users/username/Projects/mono/node_modules/react-markdown/index.js from /Users/username/Projects/mono/dist/apps/webapp/.next/server/pages/_app.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/username/Projects/mono/node_modules/react-markdown/package.json
I am using following Versions:
Node on v14.17.5 and yarn 1.22.11 and my current Nextjs version is ^12.6.2
I found following solution on Github. Here
You need to add next-transpile-modules to your next.config.js like following.
// next.config.js
const withTM = require('next-transpile-modules')(['react-markdown']);
module.exports = withTM({
...
})
and you need to import react-markdown like:
import ReactMarkdown from 'react-markdown/react-markdown.min';
Related
I have a local node module, #em/inVis in my company whose index.d.ts file looks as follows:
import UWeb from "./UWeb";
import UWebParams from "./UWebParams";
export { UWeb, UWebParams };
elsewhere within the app, it's used as follows in typescript files
import { UWeb, UWebParams } from "#em/inVis";
when I try to do that in my TS file, I get the node error:
SyntaxError: Named export 'UWeb' not found. The requested module '#em/inVis' is a CommonJS module, which may not support all
module.exports as named exports. CommonJS modules can always be
imported via the default export, for example using:
import pkg from '#em/inVis'; const { UWeb, UWebParams } = pkg;
so when I try using that approach suggested above, I am getting the node error:
SyntaxError: Cannot use import statement outside a module not sure
what I am doing wrong.
I am trying to import a module named blink-detection in my project. The library does not have any type definition. So, I have created a file named types/blink-detection.d.ts in project root. I have also changed my tsconfig.json
"include": [
"src",
"types"
]
My blink-detection.d.ts:
declare module 'blink-detection';
But, I am getting an error message: export 'default' (imported as 'blink') was not found in 'blink-detection' (module has no exports). But, the index.js of blink-detection has default export:
const blink = {
loadModel: loadModel,
setUpCamera: setUpCamera,
stopPrediction: stopPrediction,
getBlinkPrediction: renderPrediction,
};
export default blink;
My typescript version: 4.5.3, react version is 17.0.2 and webpack version is 5.0.66.
I was working with Storybook version 5 and I could have either main.js and config.js files and pass some global styles and other config rules to config.js file, now I want to use Storybook in new project and I have there version 6 already. In version 6 I can't have both config and main files. How to pass config rules in new version of Storybook?
Error: You have both a "main" and a "config". Please remove the "config" file from your configDir
Old config in version 5
import './sass-loader.sass';
import '#fortawesome/fontawesome-free/css/all.min.css';
import '#storybook/addon-console';
import {addDecorator} from '#storybook/react';
import {withConsole} from '#storybook/addon-console';
import {addParameters} from '#storybook/react';
import {INITIAL_VIEWPORTS} from '#storybook/addon-viewport';
addDecorator((storyFn, context) => withConsole()(storyFn)(context));
addParameters({
viewport: {
viewports: INITIAL_VIEWPORTS, // newViewports would be an ViewportMap. (see below for examples)
defaultViewport: 'someDefault',
},
});
This file now exists as preview.js
https://www.learnstorybook.com/design-systems-for-developers/react/en/build/
I have followed every guide out there for turning on tree shaking in webpack 4 but webpack still bundles code from a NPM module that I have set up to be treeshaken. How can I enable treeshaking and not include particular code in my web app?
Full source code in GitHub repo
I have a CRA (create-react-app) that imports a NPM module I created to test it that looks like this:
package
index.mjs
dist
esm
components
image
index.js
index.js
index.js
with package.json like this:
"main": "index",
"module": "index.jsm",
"sideEffects": false,
that transpiles using babel with babelrc like:
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
}
],
"#babel/react",
"#babel/flow"
]
}
I have 3 React components: image, avatar (that imports image) and login-button that has this es6 code:
import React from 'react'
document.body.innerHTML = document.body.innerHTML + "<div>This is a side effect and should never have happened</div>"
export default () => <button>Login</button>
The index file for the NPM es6 module:
import * as lib from './dist/esm'
export default lib
In the CRA's app.js I have:
import TreeshakingTestModule from 'treeshaking-test-module'
function App() {
return (
<div className="App">
<TreeshakingTestModule.Avatar />
</div>
);
}
When I npm start it builds and renders the avatar but I also see the message.
Note that login-button is never used however the default export of my NPM package which does export the component is imported, however I read tutorials that explained that even default exports and re-exports should still work with tree shaking if what is exported is never used.
What is happening? What am I doing wrong?
Full source code in GitHub repo
As far as I know, webpack three shakes by analysing imports statically, not by reading your code. You cannot expect webpack to realize you're only using Avatar from TreeshakingTestModule.
So you need to declare what you want to use at import level, by using named imports and exports:
import {Avatar} from 'treeshaking-test-module'
function App() {
return (
<div className="App">
<Avatar />
</div>
);
}
So webpack knows you're only using the Avatar export.
This means that Avatar needs to be a named export in your treeshaking-test-module module.
I'm trying to display a pdf on a react application and i get the following warning:
/node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Vscode tells me this under the import function.
Could not find a declaration file for module 'react-pdf'
Already tried running npm install, npm install react-pdf and reinstalling the package
import React, { Component } from 'react';
import { Document } from 'react-pdf';
import sample from 'file location'
export default class viewer extends Component {
render() {
return (
<div>
<Document
file={sample}
onLoadSuccess={this.onDocumentLoadSuccess}
>
</Document>
</div>
);
}
}
Displays:
"Failed to load PDF file" in the browser
This code will display your pdf file, but issue will display in IDE console.
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
In my case I'm using webpack 4 and it's not supportted yet.
If you build project it will work fine.
My full workaround.
Create a file at the root called config-overrides.js and it should contain the following:
module.exports = function override(config) {
config.module.rules[0].parser.requireEnsure = true
return config
};
After that npm i react-app-rewired to you app and change your build function in package.json to read react-app-rewired build/react-app-rewired start.
That should do it for now.