Related
I just started learning React and NextJS and I ran into this problem when trying to install a npm package. "Module parse failed: Unexpected token (52:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file". The package I tried installing was React Baraja-JS, https://www.npmjs.com/package/react-baraja-js.
Error message:
error - ./node_modules/react-baraja-js/src/react-baraja.js
Module parse failed: Unexpected token (52:6)
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
| render() {
| return (
> <ul id={this.props.id} className="baraja-container" ref="wrapper">
| {this.props.children.map((Child, index) => {
| return <li key={index}>{Child}</li>;
cardMenuNav.js
import React from 'react';
import BarajaJS from 'react-baraja-js'; // or '../dist/react-baraja-js';
const cards = [
{
imageSrc: 'path/to/image1.png',
title: 'card 1',
details: 'this is card 1'
},
{
imageSrc: 'path/to/image2.png',
title: 'card 2',
details: 'this is card 2'
},
{
imageSrc: 'path/to/image3.png',
title: 'card 3',
details: 'this is card 3'
},
{
imageSrc: 'path/to/image4.png',
title: 'card 4',
details: 'this is card 4'
},
// add more cards ...
]
export default class Demo extends React.Component {
constructor() {
super();
this.state = {
fan: {}
};
}
// Fan right
fanEvent() {
this.setState({
fan: {
direction: 'right',
easing: 'ease-out',
origin: {
x: 25,
y: 100
},
speed: 500,
range: 90,
center: true
}
});
}
render() {
return (
<React.Fragment>
<button id="fan-button" onClick={() => this.fanEvent()}>Fan right</button>
</React.Fragment>
);
}
};
index.js
import Image from 'next/image'
import CardMenuNav from '../components/cardMenuNav';
const Home = () => {
return (
<div>
<CardMenuNav />
</div>
);
}
export default Home;
package.json
{
"name": "Alcohol-Business-Website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"antd": "^4.22.8",
"bootstrap": "^5.2.0",
"next": "12.2.5",
"react": "18.2.0",
"react-baraja-js": "^1.0.7",
"react-bootstrap": "^2.5.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.23.0",
"eslint-config-next": "12.2.5"
}
}
These are the codes that I am working with. I'm not too sure what is wrong but I did some research and it said that I had a duplicate package or something is wrong with my webpack.
I finally managed to get SB working with mui4, but after upgrading the mui5, i can't get it going.
installed with Npx sb init —builder webpack5
updated sb main.js as per
Complained that "compressible' module couldn't be found so installed that.
Ran npm i core-js#3.8.2 as gives out about es-weak-map + others not found.
Added web pack 5 as a dev dependency npm install webpack#5 --save-dev
npx sb#next upgrade --prerelease.
plus literally every other suggestion i came across online, which you can see in these files (leaving some comments in so you can see what else i tried in some cases)
.storybook>main.js
const path = require('path');
const toPath = filePath => path.join(process.cwd(), filePath);
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
// 'storybook-addon-designs',
// 'storybook-anima',
// '#storybook/addon-actions',
{
name: '#storybook/addon-docs',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
transcludeMarkdown: true,
},
},
'#storybook/builder-webpack5',
],
framework: '#storybook/react',
core: {
// builder: '#storybook/builder-webpack5',
builder: 'webpack5',
},
typescript: { reactDocgen: false },
features: {
emotionAlias: false,
modernInlineRendering: true,
},
webpackFinal: async (config, { configType }) => {
config.resolve.modules = [path.resolve(__dirname, '..', '.'), 'node_modules'];
config.resolve.alias = {
...config.resolve.alias,
'#emotion/core': toPath('node_modules/#emotion/react'),
'emotion-theming': toPath('node_modules/#emotion/react'),
// 'core-js/modules/es.weak-map.js': toPath('core-js/modules/es6.weak-map.js'),
};
return config;
// return {
// ...config,
// resolve: {
// ...config.resolve,
// alias: {
// ...config.resolve.alias,
// '#emotion/core': toPath('node_modules/#emotion/react'),
// 'emotion-theming': toPath('node_modules/#emotion/react'),
// },
// },
// };
},
};
.package.json
{ "dependencies": {
"#auth0/nextjs-auth0": "^1.7.0",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.0",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/icons-material": "^5.5.1",
"#mui/lab": "^5.0.0-alpha.75",
"#mui/material": "^5.5.3",
"#mui/styles": "^5.5.3",
"core-js": "^3.8.2",
"cors": "^2.8.5",
"next": "^12.1.4",
"react": "latest",
},
"devDependencies": {
"#storybook/addon-actions": "^6.5.0-alpha.59",
"#storybook/addon-essentials": "^6.5.0-alpha.59",
"#storybook/addon-interactions": "^6.5.0-alpha.59",
"#storybook/addon-links": "^6.5.0-alpha.59",
"#storybook/builder-webpack5": "^6.5.0-alpha.59",
"#storybook/manager-webpack5": "^6.5.0-alpha.59",
"#storybook/node-logger": "^6.5.0-alpha.59",
"#storybook/preset-create-react-app": "^4.1.0",
"#storybook/react": "^6.5.0-alpha.59",
"#storybook/testing-library": "^0.0.9",
"#svgr/webpack": "^6.2.1",
"compressible": "^2.0.18",
"webpack": "^5.72.0"
},
"eslintConfig": {
"overrides": [
{"files": ["**/*.stories.*"],
"rules": {"import/no-anonymous-default-export": "off"}
}]
},
"resolutions": {"#storybook/{app}/webpack": "^5"}
}
my Story
// import { ThemeProvider } from '#mui/styles';
import { ThemeProvider as MUIThemeProvider, createTheme } from '#mui/material/styles';
import { ThemeProvider } from 'emotion-theming';
import React from 'react';
//import theme from 'src/themes/theme.js';
// import DuplicateComponent from 'src/components/helpers/DuplicateComponent';
// import TickerTicket from 'src/components/modules/dashboard/TickerTicket';
import DataLanes from '.';
export default {
title: 'components/common/dataDisplay/DataLanes',
component: DataLanes,
};
export const Bare = () => (
// <MUIThemeProvider theme={theme}>
// <ThemeProvider theme={theme}>
<DataLanes borderBottom>
<div>1</div>
<div>2</div>
<div>3</div>
</DataLanes>
// </ThemeProvider>
// </MUIThemeProvider>
);
My Component
import { Box } from '#mui/material';
import clsx from 'clsx';
import React from 'react';
import PropTypes from 'prop-types';
import useStyles from './styles';
export default function DataLanes(props) {
const classes = useStyles();
const { borderBottom, borderTop, className, children, ...others } = props;
return (
<Box
className={clsx(classes.dataLanes, className, {
borderBottom: borderBottom,
borderTop: borderTop,
})}
{...others}
>
{children}
</Box>
);
}
its styling
import makeStyles from '#mui/styles/makeStyles';
const useStyles = makeStyles(theme => ({
dataLanes: {
width: '100%',
background: theme.palette.background.paper,
display: 'flex',
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
overflowY: 'auto',
'& > * ': {
flexGrow: 1,
borderRight: `1px solid ${theme.palette.grey[300]}`,
},
'&.borderBottom': {
borderBottom: `1px solid ${theme.palette.grey[300]}`,
},
'&.borderTop': {
borderTop: `1px solid ${theme.palette.grey[300]}`,
},
},
}));
export default useStyles;
Any thoughts? It seems like it's the background: theme.palette.background.paper,
in the style.js.
For similar issues I encountered with MUI and storybook this change at the preview.js in the .storybook folder solved it.
.storybook>preview.js
import React from 'react';
import { addDecorator } from '#storybook/react';
import { ThemeProvider } from '#mui/material/styles';
import { theme } from '../src/Theme'; //. Please replace the path for the theme with yours.
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);
I am making a style guide with a CMS and running into a few issues.
This is my webpack config
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
plugins: [
new WebpackNotifierPlugin({
skipFirstNotification: true,
}),
],
resolve: {
// Enable absolute import paths
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.tsx'],
},
})
}
This is my package.json
"#babel/core": "^7.2.2",
"#material-ui/core": "^4.9.1",
"#material-ui/icons": "^4.9.1",
"#mdx-js/mdx": "^0.16.8",
"#mdx-js/tag": "^0.16.6",
"#reach/router": "^1.2.1",
"#typescript-eslint/parser": "^2.19.0",
"d3-ease": "^1.0.5",
"docz-utils": "^0.13.6",
"gatsby": "^2.0.76",
"gatsby-image": "^2.0.20",
"gatsby-link": "^2.2.29",
"gatsby-mdx": "^0.3.4",
"gatsby-plugin-catch-links": "^2.0.9",
"gatsby-plugin-manifest": "^2.0.9",
"gatsby-plugin-mdx": "^1.0.67",
"gatsby-plugin-netlify-cms": "4.1.40",
"gatsby-plugin-offline": "^2.0.16",
"gatsby-plugin-sharp": "^2.0.14",
"gatsby-react-router-scroll": "^2.1.21",
"gatsby-source-filesystem": "^2.0.16",
"gatsby-transformer-sharp": "^2.1.8",
"hast-util-to-string": "^1.0.1",
"jss": "^10.0.4",
"jsx-to-string": "^1.4.0",
"lodash": "^4.17.11",
"marked": "^0.6.0",
"netlify-cms-app": "2.9.1",
"netlify-cms-widget-mdx": "^0.4.3",
"netlify-identity-widget": "^1.5.6",
"prismjs": "^1.15.0",
"prop-types": "^15.6.2",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-head": "^3.0.2",
"react-highlight": "^0.12.0",
"react-powerplug": "^1.0.0",
"styled-system": "^3.2.1",
"unstated": "^2.1.1",
"write": "^1.0.3"
This is my component:
interface IButtons {
children: React.ReactElement;
}
const useStyles = makeStyles({
root: {
},
button: {
display: 'flex',
justifyContent: 'space-between' as 'space-between',
padding: `16px 8px`,
paddingRight: '50px',
background: `#F7F9FE`,
position: 'relative' as 'relative'
},
expand: {
position: 'absolute' as 'absolute',
top: 0,
right: 0,
cursor: 'pointer'
},
code: {
padding: `16px`,
fontSize: `14px`
}
});
const Buttons = (props: IButtons) => {
const classes = useStyles();
const [isCodeOpen, setCode] = useState(false)
const children = React.Children.toArray(props.children)
const stringChildren = useMemo(() => {
let stringed: string[] | string = []
for (let i = 0; i < React.Children.count(children); i++) {
stringed
.push(jsxToString(props.children[i])
.replace('WithStyles(ForwardRef(Button))', 'Button')
.replace('/WithStyles(ForwardRef(Button))', '/Button'))
}
return stringed.join("\n\n")
}, [props.children])
return (
<section className={classes.root}>
<div className={classes.button}>
<CodeIcon className={classes.expand} fontSize='small' onClick={() => setCode(!isCodeOpen)}></CodeIcon>
{props.children}
</div>
{isCodeOpen &&
<Highlight language="javascript" className={classes.code}>
{stringChildren}
</Highlight>}
</section>
)
}
And these are my UI components
export const UIComponents = {
...UI,
DeleteIcon,
Buttons,
// TODO: include additional custom components here, eg:
Janky: props => <UI.TextField {...props} placeholder={'janky'} />
}
And my query
{
resolve: "gatsby-mdx",
options: {
extensions: [".mdx", ".md"],
defaultLayouts: {
default: require.resolve("./src/components/Layout/index.tsx"),
},
globalScope: `
import { UIComponents } from 'Theme'
export default {
...UIComponents
}
`,
// mdPlugins: [],
// gatsbyRemarkPlugins: [{}],
},
},
The first issue I am encountering when starting the app is I get this error message. I am not sure what loaders I need to put.
Module parse failed: The keyword 'interface' is reserved (8:0)
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
| import jsxToString from 'jsx-to-string';
|
> interface IButtons {
| children: React.ReactElement;
| }
# ./src/Theme.jsx 32:0-43 123:11-18
# ./src/cms/cms.jsx
# multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./src/cms/cms
The second issue is that in my netlify cms preview I get:
Invalid MDX:
ReferenceError: Buttons is not defined
Even though in the App itself the Buttons component renders, in the preview it does not.
Gatsby does not ship with Typescript support out of the box, but you can add it easily with the gatsby-plugin-typescript plugin.
Install
npm install gatsby-plugin-typescript
How to use
Include the plugin in your gatsby-config.js file.
Write your components in TSX or TypeScript.
You’re good to go.
gatsby-config.js
module.exports = {
// ...,
plugins: [`gatsby-plugin-typescript`],
}
I'm integrating graphQL into my gatsby site. I am getting an error that says "only absolute urls are supported" and then points to some code in the node-fetch library. There isn't an obvious path to how I'm getting that code to execute though, so I'm not sure what the source of my issue is. I have done several days worth of searching, and while I have found several threads about this error, it's never been in the context of gatsby-source-graphql. Any help would be appreciated.
package.json
{
.
.
.
"dependencies": {
"ajv": "^6.9.2",
"core-js": "^2.6.5",
"fullcalendar": "^3.9.0",
"fullcalendar-reactwrapper": "^1.0.7",
"gatsby": "^2.12.0",
"gatsby-cli": "^2.7.20",
"gatsby-plugin-manifest": "^2.0.2",
"gatsby-plugin-netlify-cms": "^4.0.1",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-sass": "^2.0.1",
"gatsby-source-filesystem": "^2.1.6",
"gatsby-source-graphql": "^2.1.3",
"gatsby-transformer-remark": "^2.6.9",
"graphql": "^14.1.1",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"netlify-cms-app": "^2.9.1",
"node-sass": "^4.9.3",
"react": "^16.5.1",
"react-calendar": "^2.17.5",
"react-dom": "^16.6.3",
"react-helmet": "^5.2.0",
"react-native-calendars": "^1.21.0"
},
.
.
.
"devDependencies": {
"#material-ui/core": "^3.9.2",
"#material-ui/icons": "^3.0.2",
"material-icons-react": "^1.0.4",
"prettier": "^1.14.2",
"react-tooltip": "^3.9.2",
"surge": "^0.20.1"
},
.
.
.
}
UpcomingScheduleChanges.js
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Cancellations from './Cancellations';
class UpcomingScheduleChanges extends React.Component {
render() {
console.log(this.props.cancellations)
return (
<div className="col-6">
<header className="major">
<h2>Upcoming Schedule Changes</h2>
</header>
{this.props.cancellations ? (
<Cancellations cancellations={this.props.cancellations}></Cancellations>
) : (
<p>There are no upcomimng schedule changes!</p>
)}
</div>
)
}
}
export default () => (
<StaticQuery
query={graphql`
query ScheduleChanges {
allMarkdownRemark {
edges {
node {
frontmatter {
cancellation {
date(formatString: "MMMM DD")
day
location
type
}
}
}
}
}
}
`}
render={(data) => <UpcomingScheduleChanges cancellations={data.allMarkdownRemark.edges[0].node.frontmatter.cancellation} />}
/>
);
index.js
import React from "react";
import Helmet from "react-helmet";
import Layout from "../components/layout";
import ReactTooltip from "react-tooltip";
import ContactForm from "../components/ContactForm";
import Schedule from '../components/Schedule';
import Welcome from "../components/Welcome";
import Administrators from "../components/Administrators";
import MailingList from "../components/MailingList";
class Homepage extends React.Component {
handleClick(url) {
window.open(url, "_blank");
}
render() {
const siteTitle = "...";
return (
<Layout>
<Helmet title={siteTitle}>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</Helmet>
<Welcome></Welcome>
<Schedule></Schedule>
<Administrators></Administrators>
<MailingList></MailingList>
<ContactForm></ContactForm>
<ReactTooltip />
<script>
{`if (window.netlifyIdentity) {
window.netlifyIdentity.on("init", user => {
if (!user) {
window.netlifyIdentity.on("login", () => {
document.location.href = "/admin/";
});
}
});
}`}
</script>
</Layout>
);
}
}
export default Homepage;
gatsby-config.js
module.exports = {
siteMetadata: {
title: "...",
author: "...",
description: "..."
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-manifest`,
options: {
name: '...',
short_name: '...',
start_url: '/',
background_color: '#FFFFFF',
theme_color: '#FFFFFF',
display: 'minimal-ui',
icon: 'src/assets/images/banner_small.png', // This path is relative to the root of the site.
},
},
'gatsby-plugin-sass',
'gatsby-transformer-remark',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/content`,
name: 'content'
}
},
{
resolve: "gatsby-source-graphql",
options: {
typeName: "cancellations",
fieldName: "cancellations",
url: `${__dirname}/static/content/cancellations.md`
}
},
'gatsby-plugin-offline',
'gatsby-plugin-netlify-cms'
],
}
config.yml
backend:
name: git-gateway
branch: master #branch to update (optional; defaults to master)
publish_mode: editorial_workflow #allows for a drafting, reviewing, and approving process for changes
media_folder: "src/assets/images/uploads"
public_folder: "/images"
#collections
collections:
- label: "Upcoming Schedule Changes"
name: "upcoming schedule changes"
files:
- label: "Cancellations"
name: "cancellations"
file: "static/content/cancellations.md"
fields:
- label: "Cancellations"
name: "cancellations"
create: true
widget: "list"
fields:
- {label: "Date", name: "date", widget: "date"}
- {label: "Day", name: "day", widget: "select", options: ["Thursday", "Friday", "Sunday"]}
- {label: "Location", name: "location", widget: "select", options: ["Location1", "Location2", "Location3"]}
- {label: "Type", name: "type", widget: "select", options: ["Cancelled", "Delayed", "Relocated"]}
I know this question may have been asked but am just frustrated. Reactjs marks = at the line of code below as unexpected token error
handleChange1 = {(selectedOption) => {
All the required dependency has been installed.
below is the entire code
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Hello from './Hello';
import Select from 'react-select'
//import './style.css';
import 'react-select/dist/react-select.css';
class Plans extends Component {
constructor() {
super();
this.state = {
name: 'React',
selectedOption: {},
selectedOption2: {}
};
}
handleChange1 = {(selectedOption) => {
this.setState({selectedOption});
}
};
handleChange2 = (selectedOption) => {
this.setState({selectedOption2: selectedOption})
}
render() {
const options1 = [
{value: 'one', label: 'One'},
{value: 'two', label: 'Two'}
];
const options2 = [
{value: 'one-a', label: 'One A', link: 'one'},
{value: 'one-b', label: 'One B', link: 'one'},
{value: 'two-a', label: 'Two A', link: 'two'},
{value: 'two-b', label: 'Two B', link: 'two'}
];
const filteredOptions = options2.filter((o) => o.link === this.state.selectedOption.value)
return (
<div>
<p>Select one first</p>
<Select
name="form-field-name"
value={this.state.selectedOption.value}
onChange={this.handleChange1}
options={options1}
/>
<p>Then the other</p>
<Select
name="form-field-name"
value={this.state.selectedOption2.value}
onChange={this.handleChange2}
options={filteredOptions}
/>
</div>
);
}
}
//render(<Plans />, document.getElementById('app'));
function mapStateToProps(state) {
}
const connectedPlans = connect(mapStateToProps)(Plans);
export { connectedPlans as Plans };
Here is my package.json
{
"name": "example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open"
},
"dependencies": {
"history": "^4.6.3",
"node-sass": "^4.9.4",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"react-select": "^2.1.1",
"react-toastify": "^4.4.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^2.26.0",
"path": "^0.12.7",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
}
}
Updates
App.jsx
import React from 'react';
import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { history } from '../_helpers';
import { alertActions } from '../_actions';
import { PrivateRoute } from '../_components';
import { Plans } from '../Plans';
class App extends React.Component {
constructor(props) {
super(props);
const { dispatch } = this.props;
history.listen((location, action) => {
// clear alert on location change
dispatch(alertActions.clear());
});
}
render() {
const { alert } = this.props;
return (
<div className="jumbotron">
<div className="container">
<div className="col-sm-8 col-sm-offset-2">
{alert.message &&
<div className={`alert ${alert.type}`}>{alert.message}</div>
}
<Router history={history}>
<div>
<Route path="/plans" component={Plans} />
</div>
</Router>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
const { alert } = state;
return {
alert
};
}
const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };
How I solve the problem. First I implemented the solution powered by Dacre in the comments above. I then discovered that react-select.css' files is not in the node_modules so I re-install it again so as to enable me to import it..
I added this line of code below
render(<Plans />, document.getElementById('app'));
and then remove the code below
function mapStateToProps(state) {
}
const connectedPlans = connect(mapStateToProps)(Plans);
export { connectedPlans as Plans };