I use mapbox-gl, specifically mapbox-gl-leaflet, in React to create a map:
import Leaflet from 'leaflet'
import 'mapbox-gl/dist/mapbox-gl.css'
import {} from 'mapbox-gl-leaflet'
import 'leaflet/dist/leaflet.css'
const Map = () => {
const map = useRef(null)
useEffect(() => {
Leaflet.mapboxGL({
accessToken: token,
style: 'mapbox://styles/mapbox/outdoors-v11',
}).addTo(map.current)
})
}
In the test it already fails when I try to mount <Map /> with this error:
Failed to initialize WebGL.
There are also two other Error messages:
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) ...
This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.
But as you can see I import the CSS file. I think the problem is that in Jest there is no WebGL available. I also installed the canvas npm package, but it didn't seem to help.
Is it possible to somehow mock WebGL? I already tried it with jest-canvas-mock. I importet it in the test file: import {} from 'jest-canvas-mock'. But I still get the Error: Not implemented: HTMLCanvasElement.prototype.getContext ... error.
Related
I am writing a component that makes use of another component, so I've written
import { Text } from "../Text/Text"
in the file /src/stories/TextArea/TextArea.tsx.
However, this gives the error
Module not found: Can't resolve '../Text/Text' in '/Users/username/project/src/stories/TextArea'
Changing the import statement to
import { Text } from "../Text/Text.tsx"
makes it work just fine. Instead, the linter complains:
An import path cannot end with a '.tsx' extension. Consider importing '../Text/Text.js' instead.ts(2691)
As I understand it, .tsx endings are forbidden in TypeScript so reconfiguring the linter doesn't seem to be the best option.
Obviously, importing Text.js instead doesn't work as it doesn't exist. Storybook is supposed to work out of the box with TypeScript, so I'm unsure of what I have to do.
In the .mdx files I am using as stories (like Text.stories.mdx), imports including .tsx are accepted without linter complaints. Removing the extension produces a similar Module not found error.
The project was created with create-react-app and is running Storybook 6.5.15.
your import import { Text } from "../Text/Text" should work fine.
Make sure you are using the latest version of Storybook - 6.5.15.
...
I tried to reproduce your issue and failed to do so. I did not get the same error and the import worked just fine. Let me describe what steps I took:
I installed Storybook in my project using npx storybook init --type react. This installed Storybook 6.5.15 for React.
I created a simple component in ./project/src/Button.tsx
import React from 'react'
export const Button = () => {
return <div>MY BUTTON</div>
}
I created a simple story in ./project/stories/Button.stories.jsx like this:
import React from 'react';
import { Button } from '../src/Button';
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
title: 'Example/Button',
component: Button,
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: {
backgroundColor: { control: 'color' },
},
};
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
primary: true,
label: 'Button',
};
And there are no issues. The import works as it should. If this does not help you, tell us more about your project setup (e.g. are you using Create-react-app), etc. So this issue is easier to reproduce.
I am trying to import components from a published npm package dynamically using react-loadable. The import is successful with components located in the src/ folder. However any components that I try to import from node_modules produces the following error:
Loadable error:
Error: Cannot find module '#material-ui/core/Button'
at |groupOptions: {}|namespace object:1074:1
Code:
const Component = Loadable({
loader: () => import('#material-ui/core/Button'),
loading: () => <div>Loading...</div>,
});
Some context:
The main goal is to be able to pass a import path (in src/ or node_modules) string to loadable and have loadable import the component (and do code splitting).
If this is not possible with react-loadable, any suggestions are welcome. Thanks in advance.
I am trying to render a HighCharts Sankey chart using HighCharts React and NextJS. I've followed HighChart's documentation on how to add the Sankey module, but the page fails with this error:
TypeError: Cannot read property 'Core/Series/Point.js' of undefined
The error seems to occur at the addSankeyModule, before the chart is actually initialized. Below is my module code:
import React from "react"
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import addSankeyModule from "highcharts/modules/sankey"
addSankeyModule(Highcharts)
const options = {
// omitted for brevity
}
const DependenciesChart: React.FC = () => (
<HighchartsReact highcharts={Highcharts} options={options} />
)
export default DependenciesChart
NextJS runs your code twice: first on the server and then later in the browser of the client. This error occurs in the prior situation, where Sankey is trying to initialize itself on the server but fails because it expects a real browser.
To fix this, you can use the following check to conditionally add the module only within the browser:
if (typeof Highcharts === "object") {
addSankeyModule(Highcharts)
}
I'm using NextJS version 12.0.3 with framer motion for animations. Putting the functionality of the framer-motion library aside, when I tag any html element in my component, I get an error
error - SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react';
const { createContext } = pkg;
The file (Login.jsx) causing the error:
import { motion } from "framer-motion";
const Login: React.FC = () => {
return (
<motion.div
className=""
>
</motion.div>
);
};
export default Login;
Oddly enough, when I am routed TO the logo page from a different page, the page loads fine. But when I REFRESH the page, I'm faced with this error.
When I keep the import statement for framer-motion, BUT remove the motion. tags on my div element, the error does not persist when I refresh.
Is this a common issue with Next JS 12.0.3?
Should I just roll back to previous versions?
Thanks for your time!!
I had the same errors by importing framer-motion.
I solved this problem change import by require:
const { motion } = require("framer-motion");
I think the problem is from the latest update.
This works for me yarn add framer-motion#6.5.1
I was also facing the same issue and looking at the upgrade guide
of next js I found that the I was using nodejs version < 12.22.0 which caused this issue. Upgrading it to nodejs 12.22.0 fixed the issue for me.
I created a very simple Next.js project, that contains only one page, index.js, that looks like:
import React, { useState } from 'react';
const MyComponent = () => {
const [instance, setInstance] = useState()
return (
<></>
);
};
const Home = () => <>
<MyComponent />
</>;
export default Home;
When I run it in development mode, there is no error and everything is working fine.
But when I run next build, I get:
Error occurred prerendering page "/": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
> Build error occurred
It looks like a problem with hooks, but I don't get what is wrong with my implementation. If I remove the line const [instance, setInstance] = useState(), the build is successful.
I am using next ^9.1.4, react ^16.12.0 and react-dom ^16.12.0.
Could you help me with this please? :)
I just copy your code to pages/index.js and run npm run build (it has next build in it, and it works.
next 9.1.4
react, react-dom 16.12.0
My best guess... you have another next install globally? and next build use that next instead?
Or it could be the lib you installed, what package you have in your package.json?