happiness#1.0.0 start C:\Users\Schrute\Documents\GitHub\happiness
node server.js
Server running at :http://localhost:5000
Debug: internal, implementation, error
SyntaxError: C:/Users/Schrute/Documents/GitHub/happiness/node_src/views/wiam.jpg: Unexpected character '?' (1:0)
1 | ???? ►JFIF ☺☻ ☺ ☺ ?? ?Photoshop 3.0 8BIM♦♦ ?∟☻g ¶uH7kKKuGKb3aEebAxn9b∟☻( bFBMD01000abe030000bc2d000015570000
5e590000395d0000ea75000056c2000021cd000030d400009bdb0000f8680100??☻∟ICC_PROFILE ☺☺ ☻♀lcms☻► mntrRGB XYZ ? ☺ ↓ ♥ ) 9acs
pAPPL ?? ☺ ?-lcms
| ^
2 | desc ? ^cprt ☺\ ♂wtpt ☺h ¶bkpt ☺| ¶rXYZ ☺? ¶gXYZ ☺? ¶bXYZ ☺? ¶rTRC ☺? #gTRC ☺? #bTRC
☺? #desc ♥c2 text FB XYZ
?? ☺ ?-XYZ ♥▬ ♥3 ☻?XYZ o? 8? ♥?XYZ b? ?? ↑?XYZ $? ☼? ??curv → ?☺?♥c♣k♂?►?
§Q4!?)?2↑;?F♣Qw]?kpz♣???|?i?}???0???? C ♠♦♣♠♣♦♠♠♣♠♠
3 | ►
4 |
at Parser.pp$5.raise (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:4454:13)
at Parser.getTokenFromCode (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:1147:10)
at Parser.readToken (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:776:19)
at Parser. (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:7214:20)
at Parser.readToken (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:6011:22)
at Parser.nextToken (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:766:19)
at Parser.parse (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:1672:10)
at parse (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:7246:37)
at File.parse (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babel-core\lib\transformation\file\index.js:
517:15)
at File.parseCode (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babel-core\lib\transformation\file\index
.js:602:20)
Here's the faulty snippet of code.
'use strict';
import React, { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {GridList, GridTile} from 'material-ui/GridList';
import wiam from './wiam.jpg';
injectTapEventPlugin();
class App extends Component {
render(){
return (
<div className="App">
<MuiThemeProvider>
<div>
<GridList cellHeight={100}>
{this.props.data.map((cat) => (
<GridTile key={cat.photo} title={cat.title}>
{console.log(cat.photo)}
<img src={cat.photo} alt={cat.photo}/>
</GridTile>))}
<GridTile key="wiam.jpg" title={process.env.PUBLIC_URL}>
<img src={wiam} />
</GridTile>
</GridList>
</div>
</MuiThemeProvider>
</div>
);
}
}
module.exports = App;
Note that I use React views throught routes with the Vision engine ( https://www.npmjs.com/package/hapi-react )
I am guessing the problem is happening due to this line: import wiam from './wiam.jpg';.
Node does not know how to import image files. In fact, it can only import JS modules. Not to be confused with bundled client side code which can be configured to deal with such import statements - i.e with webpack's file-loader.
In any case, in the following statement - <img src={wiam} /> - src attribute expects a string - either a URL that points to an image file or a base64 encoded image.
Related
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.
I have a React project where I want to start using Storybook. The initial basic configuration works correctly, even using JSX in the stories, but when I try to add a global decorator using JSX I get the following syntax error:
// .storybook/preview.js
import React from 'react';
export const decorators = [
(Story) => (
<div style={{ margin: '3em' }}>
<Story />
</div>
),
];
ERROR in ./.storybook/preview.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/user/Documents/react-test/.storybook/preview.jsx: Unexpected token, expected "," (5:11)
3 | export const decorators = [
4 | (Story) => (
> 5 | <div style={{ margin: '3em' }}>
| ^
6 | <Story />
7 | </div>
8 | ),
at Object._raise (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:776:17)
at Object.raiseWithData (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:769:17)
at Object.raise (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:737:17)
at Object.unexpected (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:9735:16)
at Object.expect (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:9721:28)
at Object.tsParseDelimitedListWorker (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:5557:14)
at Object.tsParseDelimitedList (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:5529:25)
at Object.tsParseBracketedList (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:5575:25)
at Object.tsParseTypeParameters (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:5684:24)
at /home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:7391:29
at Object.tryParse (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:9762:20)
at Object.parseMaybeAssign (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:7388:24)
at /home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:10427:39
at Object.allowInAnd (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:12104:12)
at Object.parseMaybeAssignAllowIn (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:10427:17)
at Object.parseParenAndDistinguishExpression (/home/user/Documents/react-test/node_modules/#babel/core/node_modules/#babel/parser/lib/index.js:11308:28)
# ./.storybook/preview.jsx-generated-config-entry.js 9:37-128
# multi ./node_modules/#storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/#storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/storybook-addon-gatsby/dist/preview.mjs-generated-other-entry.js ./node_modules/#storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/#storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.jsx-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
What is missing here? I would be happy to provide more config files if needed.
I am facing the below issue in my test (enzyme test file) . I wanted to create test file for the below component. When i import it to my test file , throwed an error.
Error
Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of `FormElement`.
10 | }
11 | it("render the formelement",()=>{
> 12 | mount(<FormElement {...props}/>)
| ^
13 | })
14 | })
My FormElement component
import React from "react";
import '../Styles/Form.scss';
function FormElement({ component: headerComponent, headerName }) {
return (
<section className="form_section">
<div style={{ display: "flex", alignItems: "center" }}>
<h3 style={{ paddingLeft: "15px" }}>{headerName}</h3>
</div>
{headerComponent}
</section>
);
}
export default FormElement;
My test file FormElement.test.js
import React from "react";
import {mount} from "enzyme";
import FormElement from "./FormElement";
describe("FormElement component",()=> {
const props = {
headerName: "test",
component : null
}
it("render the formelement",()=>{
mount(<FormElement {...props}/>)
})
})
My project directory would be like
ui/src/Components/Forms/Common/FormElement.js
ui/src/Components/Forms/Common/FormElement.test.js
I tried couple of ways like change FormElement component in to const like
const FormElement = () =>{
.....,
}
export default FormElement;
then in test file
import FormElement from "./FormElement"
But nothing is working i am not sure what is missing my end , could anyone please suggest .
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've created a new React project in Webstorm. I've installed draft-js and draft-js-plugins-editor, along with the plugins draft-js-hashtag-plugin and draft-js-mathjax-plugin (Using node).
I've following their 'getting started' on their Github, however the example doesn't work for me. As soon as I write
import Editor from 'draft-js-plugins-editor';
I get an TypeError: Cannot read property 'object' of undefined error.
./node_modules/draft-js-plugins-editor/lib/Editor/index.js
node_modules/draft-js-plugins-editor/lib/Editor/index.js:177
174 | }(_react.Component);
175 |
176 | PluginEditor.propTypes = {
> 177 | editorState: _react2.default.PropTypes.object.isRequired,
178 | onChange: _react2.default.PropTypes.func.isRequired,
179 | plugins: _react2.default.PropTypes.array,
180 | defaultKeyBindings: _react2.default.PropTypes.bool,
My minimal example code:
import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor'; // Error upon doing this
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import { EditorState } from 'draft-js';
const hashtagPlugin = createHashtagPlugin();
const plugins = [
hashtagPlugin,
];
export default class MyEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>
);
}
}
This error appears because of you use the latest (16th) version of React.js. In this blog post (announce of React.js version 16) you can read:
The deprecations introduced in 15.x have been removed from the core
package. React.createClass is now available as create-react-class,
React.PropTypes as prop-types...
All old packages which still accessed React.PropTypes will be broke if you use these with React 16.
If you want to use draft-js-plugins-editor you must downgrade your react version to version 15. For example, for npm use this command
npm install react#15.4.2 --save
or this for yarn:
yarn add react#15.4.2