Can you see why this is failing?
In my ./app.js file:
import Howdy from ('./app/Howdy');
Get this error:
SyntaxError: /Users/elk/testapp/app.js: Unexpected token (6:18) while parsing file: /Users/carlf/Documents/dev/reactjs/FlyTweet/app.js
/app/Howdy.js
import React from 'react';
export default class Howdy extends React.Component {
render() {
return (
<div>Howdy {this.props.name}</div>
);
}
}
If I change to using var Howdy = require('./app/Howdy') in app.js and React.createClass() in Howdy.js it works even when keep import React from 'react' in Howdy.js
The syntax should be:
import defaultMember from "module-name";
Get rid of the parenthesis:
import Howdy from ('./app/Howdy');
should be:
import Howdy from './app/Howdy';
Check out the MDN docs on import, they are pretty comprehensive:
MDN IMPORT
Related
I have been working on a shopping list application in React but have ran into a problem with exporting a regular JavaScript function from a file called webscrape.js into my react App.js I have tried multiple different ways of exporting but I keep getting this error.
Thanks to any help in advance.
Module not found: Can't resolve 'readline' in
'C:\Users\USERNAME\Desktop\Programming-Projects\Counter
App\counter-app\node_modules\puppeteer\lib\cjs\puppeteer\node'
This is the end of my webscrape file where I export a test function
function testExport(){
console.log("Test Export");
}
function testExport2(){
console.log("Test Export 2");
}
export {testExport, testExport2}
This is the start of my App.js where I import and try using the function
import NavBar from "./components/navbar";
import PriceBar from "./components/pricebar";
import "./App.css";
import Counters from "./components/counters";
import fs from 'fs';
import data from "./shoppingData.json";
import {testExport, testExport2} from "./webscrape.js";
//test export
testExport();
You should use export default {testExport, testExport2}.
But, looking throught your errors, seems like the error it's related to puppeter. Do you have puppteer added to your node_modules? Did you make a npm i?
Try:
export const testExport = () => {
console.log("Test Export");
}
export const testExport2 = () => {
console.log("Test Export 2");
}
Hello i have a problem for import a component in a exercice on vue.js.
Here is the architecture of my files
I am in the CarPage.vue and i want to import CarList.vue and CarDetails.vue.
Here is the part of code with my import:
<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
i have this error:
Failed to compile.
./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'
Your CarPage.vue is sitting in the same components file. So you need to import as such :
<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
I have compiled the below code it's getting me the Parsing error: Unexpected token, expected "..."
Error Don't know why.
import React,{Component} from 'react';
import EditableContetnt from './Fuck';
import Mymenu from './Mymenu';
import 'react-contexify/dist/ReactContexify.min.css';
import { MenuProvider } from 'react-contexify';
class App extends Component
{
constructor()
{
super();
this.state={name:'Hello World'};
}
render()
{
const {name}=this.state;
console.log(name);
return(
<div>
<MenuProvider id="menu_id">
<EditableContetnt {name}/>
</MenuProvider>
<Mymenu/>
</div>
)
}
}
export default App;
when i run the module it shows Parsing error: Unexpected token, expected "..."
Try to pass your name variable to MenuProvider component different way. Like this:
<EditableContetnt name={name} />
try to change: import 'react-contexify/dist/ReactContexify.min.css';
to
import './react-contexify/dist/ReactContexify.min.css';
(if it's in the same directory)
I am creating a helper class in react. The image below shows my setup:
In my App.js, I have:
import Helpers from './Helpers.js'
I have also tried:
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import {Helpers} from './components/Helpers.js'
import {Helpers} from 'src/components/Helpers.js'
and I have also tried, in my Helpers.js:
export default Helpers
export default Helpers();
However, I receive an error message:
'./Helpers.js' does not contain an export named 'Helpers'.
It seems as though App.js can not find and locate this class. How can I import it, so i can just call the functions, like:
Helpers.helperFunctionHere();
thanks.
Option 1: Export each function individually
In Helpers.js
export function helperFunctionHere() {
console.log("hello there");
}
In App.js
import {helperFunctionHere} from "./Helpers";
render() {
helperFunctionHere();
}
Option 2: Static properties on the class
In Helpers.js
class Helpers {
static helperFunctionHere() {
console.log("hi");
}
}
export default Helpers
In App.js
import Helpers from "./Helpers";
render() {
Helpers.helperFunctionHere();
}
Should be export default Helpers. Am also assuming that your bundler is setup correctly.
I needed to refactor my stateless functional component to a class. When I did so though, I keep getting an error where it looks like React itself is undefined.
import React from 'react';
import { Cell } from 'fixed-data-table';
const DataCell = ({rowIndex, columnKey, data, onMessageClicked, ...props}) => {
return (
<Cell {...props} onClick={onMessageClicked(data[rowIndex].Id)}>
{data[rowIndex][columnKey]}
</Cell>
);
};
export default DataCell;
to
import { React, Component } from 'react';
import { Cell } from 'fixed-data-table';
class DataCell extends Component {
onCellClicked() {
this.props.onMessageClicked(this.props.data[this.props.rowIndex].Id);
}
render() {
const {rowIndex, columnKey, data, ...props} = this.props;
return (
<Cell {...props} onClick={onCellClicked}>
{data[rowIndex][columnKey]}
</Cell>
);
}
}
export default DataCell;
bundle.js:43248 Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)
and when I go to that line I see
return _react.React.createElement(
I don't get it. How do I debug/fix this?
My full code for this app is here in case the code I'm posting is not related somehow.
Thanks!
Oh...
import { React, Component } from 'react';
needs to be
import React, { Component } from 'react';
:)
The OP has answered the question it self but with no reason so here's the reason!
{Directly quoting from https://github.com/facebook/react/issues/2607#issuecomment-225911048" }
import { React, Component } from 'react';
is incorrect, should be
import React, { Component } from 'react';
There is no named export named React. It is confusing because React is a CommonJS module, and since you’re using ES6 imports, Babel tries to map the semantics but they don’t match exactly. { Component } actually grabs Component from React itself so you might just:
import React from 'react'
and use React.Component instead if it’s less confusing.
For me in TypeScript the solution was:
import * as React from 'react';