I am trying to load an image using React using the following code:
const DogImage = require("../../public/dog.jpg");
console.log(DogImage);
...
<img src={DogImage} width="100px"/>
but I am getting the error:
the console log statement gives:
Please let me know if you have any suggestions or if I can provide more info!
EDIT: The file listed in the console.log (dist/8ce0...) exists when built
The path is going into the default property, which is a special property used by the import syntax. Try:
import DogImage from '../../public/dog.jpg';
OR
const DogImage = require('../../public/dog.jpg').default;
Anything else would require digging into the webpack config.
Related
Im getting this error
./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
Module parse failed: Unexpected token (26:4)
You may need an appropriate loader to handle this file type.
|
| return (
| <React.Fragment>
| {finalData && render(finalData)}
| {!finalData && <div>Loading (StaticQuery)</div>}
gatsby-browswer-entry.js only has this inside of it:
import './src/styles/tailwind.css'
None of my .js files are failing to import the 'Link' component
Sometimes, depending on Gatsby's version and its dependencies, you need to import the component from gatsby-link rather than gatsby, so:
// import { Link } from "gatsby" // error
import Link from "gatsby-link" // not error
I had a similar issue, and was only exposed when running tests in cypress. I had used gatsby's navigate function in a non-jsx javascript helper file. I think the error is indicative of a bundling / webpack issue and you have to look at the stack trace to see the actual culprit file.
I try to use the cheeseburger-menu for react app : https://www.npmjs.com/package/cheeseburger-menu
When I include it in a component (just the import) I get this error:
./node_modules/cheeseburger-menu/dist/index.js
Module not found: [CaseSensitivePathsPlugin]
`D:\MyProjet\ClientApp\node_modules\React\index.js` does not match the corresponding path on disk `react`.`
Have you got any idea how to solve it ?
I'm following the howtographql + React tutorial right now. I'm currently at the beginning of the tutorial when I have to define my queries, mutation and stuff in my schema.graphql. But according to the tutorial, I have to import prisma.graphql from the generatedfolder by writing the following line :
# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"
I indeed generated the serverfolder which contains everything except this file that is supposed to be generated as well I guess.
Apparently, I should be able to run the server using yarn startbut when I'm doing so, I have this message :
Error: Cannot find module './generated/prisma.graphql'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
at resolveFileName (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:43:9)
at module.exports (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:46:41)
at resolveModuleFilePath (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:150:24)
at /Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:187:30
at Array.forEach (<anonymous>)
at collectDefinitions (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:185:16)
at Object.importSchema (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:73:14)
at mergeTypeDefs (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-yoga/dist/index.js:412:37)
I don't understand what I'm doing wrong...
Do you guys have any idea ?
I am trying to load a CSV file in my js class and I am unable to do so in react native. This file is available locally. Not downloaded. Whenever I give a path to the CSV file, I get an error that says The module could not be found. No such module exists. I have tried placing the CSV in various folders and also at my project root level. It does not work. I noticed images do not face the same problem.
I have even tried doing this.
https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/
Again it works for images but strangely not for CSVs.
I have tried the import statement, require statement and even relative path for the files. Same error every time.
I am new to react maybe I am missing some step?
EDIT: Two of the ways I tried
import RNFS from 'react-native-fs';
import Papa from 'papaparse';
import CSVData from './CSVData.csv';
function loadAllCSV()
{
console.log('Loading CSV');
var path = './CSVData.csv';
console.log(path);
const fileContents = RNFS.read(path);
console.log('File Data ' + fileContents);
Papa.parse(CSVData, {
download: true,
delimiter: '\t',
complete: function(results) {
console.log('ZOMBIIIIEEEE');
console.log(results);
}
});
}
Error:
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module ./CSVData.csv from /Users/abc/xyz/SearchPage.js: The module ./CSVData.csv could not be found from /Users/abc/xyz/SearchPage.js. Indeed, none of these files exist:
/Users/abc/xyz/CSVData.csv(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
/Users/abc/xyz/CSVData.csv/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json) (null))
Adding the .CSV files to the project assets bundle in iOS fixed this problem for me.
Use Xcode to place the files in the project in the Project Settings under the Build Phases Tab check if the Assets are included in the Copy Bundle Resources Section. Add the files to the list here incase they are missing.
I'm using React and ES6 using babel and webpack. I am very new to this ecosystem.
I am trying to import some common utility functions into my jsx file but react is unable to find the file
homepage.jsx
var pathToRoot = './../..';
import path from 'path';
import React from 'react';
import ReactDOM from 'react-dom';
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
//some react/JSX code
utils.js
var nextWrappedIndex = function(dataArray) {
//some plain js code
return newIndex;
}
exports.nextWrappedIndex = nextWrappedIndex;
Directory structure is as follows:
src
|--app.js
|--components
| |--homepage
| |--homepage.jsx
|
|--lib
| |--utils.js
I am on a windows 10 machine and was facing issues during compilation providing the path by any other means. Using path.join solved compilation issue but the browser while rendering throws this error
Uncaught Error: Cannot find module '../../lib/utils.js'.
How do I accomplish this?
Also, is this the best way to do it(if altogether it is way it is supposed to be done in such ecosystem)?
One of the best and easiest way I have found in such a setup is to use Webpack aliases.
Webpack aliases will simply associate an absolute path to a name that you can use to import the aliased module from anywhere. No need to count "../" anymore.
How to create an alias?
Let's imagine that your Webpack config is in the parent folder of your src folder.
You would add the following resolve section in your config.
const SRC_FOLDER = path.join(__dirname, 'src')
resolve: {
alias: {
'my-utils': path.join(SRC_FOLDER, 'lib', 'utils')
}
}
Now, anywhere in your app, in any of your modules or React component you can do the following:
import utils from 'my-utils'
class MyComponent extends React.component {
render () {
utils.doSomething()
}
}
Small note about this method. If you run unit tests with a tool like enzyme and you don't run the component tested through Webpack, you will need to use the babel-plugin-webpack-alias.
More info on Webpack website: Webpack aliases
I solved this by replacing
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
with
import nextWrappedIndex from './../../lib/utils.js';
I tried to reproduce your code and Webpack printed me the following error:
WARNING in ./app/components/homepage/homepage.jsx
Critical dependencies:
50:0-45 the request of a dependency is an expression
# ./app/components/homepage/homepage.jsx 50:0-45
It means that Webpack couldn't recognize your require() expression because it works only with static paths. So, it discourages the way you are doing.
If you would like to avoid long relative paths in your import, I'd recommend you to set up Webpack.
First, you can set up aliases per Amida's answer.
Also, you can set up an extra module root via resolve.modules to make webpack look into your src folder, when you are importing something absolute, like lib/utils.js