I feel a bit silly asking this, but I'm having trouble with resolving a relative path in my React app.
Where I want to import the css:
src/components/pages/mypage.js
Where my css file is located:
src/custom_styles/sidebar.css
How I'm trying to import sidebar.css in mypage.js:
import '.../custom_styles/sidebar.css'
This is resulting in Module not found: Can't resolve '.../custom_styles/sidebar.css' in the console when compiling. What am I doing wrong?
import '../../custom_styles/sidebar.css'; in your mypage.js file.
../ means that you're going one level up from your current file. In your case you have to move two ups.
import '../../../custom_styles/sidebar.css'
Each time you want o get to the parent folder add ../ so if you want to get to 3 folders above use ../../../ , not .../
Related
enter image description hereI have a React app with node backend
I get this error:
Failed to compile
Module not found: Can't resolve 'assets/css/bootstrap.min.css'
My index.js is as follows:
import "assets/css/bootstrap.min.css";
In case of import, you must first go to the previous directory. For this you must use "./".
Try this if the file is in the same directory: './assets/css/bootstrap.min.css'
if not, go to the correct directory using "../" instead of "./"
It's a path related issue:
make sure the path is correct (if assets in the root do something like /assetts/css ..)
make sure the file bootstrap.min.css exists
make sure you don't uppercase or lowercase some letters
I am trying to learn Node and React and I ran into an interesting problem where - in the import statement like below, I need to explicitly type the file format (.jsx) otherwise, the compiler borks up and complains that it cannot find App.js file.
import App from './App.jsx';
Note - App is a jsx file and saved as App.jsx. I used create-react-app for boilerplate code.
Also, I found some more information on GitHub on the lines of "The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore."
https://github.com/facebook/create-react-app/issues/87
So, it looks like a non-issue as long as save it as .js and I have babel to compile ES6.. Thanks everyone!
Here your assumption is incorrect.
If I am right then you are assuming that if your file is .jsx, then you don't need to specify the file extension in the import statement to import .jsx file.
But its the other way round.
If you don't specify the extension of the file then compiler assumes that it is a .js file. So, there is nothing wrong with the behavior that you are seeing.
OR
If you don't want to include extensions in the import statement then just create .js files. Compiler will automatically detect the jsx written inside it. This is the easiest way to fool import statement.
Any javascript react snippets will not show up in a plain .js file only a .jsx file
I suggest that closing the running project on Browser
(ctrl + c / command + c on terminal to finish running project) and do
'yarn start' or 'npm start' again. then it would work!
React sometimes shows errors when you add new files like jsx, js, etc..
and I also had the same problem with you.
(I changed App.js to App.jsx and webppack error was occured).
In these case re-starting project would be the solution!
finally you don't need to specify file extension (like the other answers suggestion).
I am using typescript with node. I can write this without any problems:
import * as $ from "jquery";
The definition file for jquery is in node_modules/#types/jquery. However, neither of the following works with the definition file for decimal.js being in node_modules/decimal.js:
import { Decimal } from "decimal";
import { Decimal } from "decimal.js";
If I however include the file with its absolute path it works like a charm:
import { Decimal } from "/path/to/project/node_modules/decimal.js/decimal";
I'm using the latest version available in npm and these command line parameters:
--removeComments --inlineSourceMap --inlineSources --allowSyntheticDefaultImports --charset UTF-8 --module amd --target ES6 --newLine LF --moduleResolution classic
Considering that your module is in node_modules, you want to use the node style of module resolution. Replace --moduleResolution classic with --moduleResolution Node.
See here
However, resolution for a non-relative module name is performed differently. Node will look for your modules in special folders named node_modules. A node_modules folder can be on the same level as the current file, or higher up in the directory chain. Node will walk up the directory chain, looking through each node_modules until it finds the module you tried to load.
The classic style resolves modules differently. According to the linked source:
This used to be TypeScript’s default resolution strategy. Nowadays, this strategy is mainly present for backward compatibility.
I am using webpack with react, I have Index.js file in Administrator folder
I can import without includes Index in path in Mac and windows
import Admin from '../components/Administrator/'
but when I call webpack in Linux ,it can't resolve file, but after I change it to
import Admin from '../components/Administrator/Index'
and it works.
I would like to fix this issue without adding Index in path as our colleges use Mac and Windows. if they forgot to add that, the code will broken in production, Does any one know what's the reason?
I'm finding it pretty hard to wrap my head around the jspm/systemjs ecosystem sometimes, but today I found a workaround to the following problem.
I needed to be able to do something like this:
import 'bootstrap'
import 'ifightcrime/bootstrap-growl'
Problem is that when I do jspm install -y github/ifightcrime/bootstrap-growl#1.1.0 only the folder (and files inside of course) jspm_packages/ifightcrime/bootstrap-growl#1.1.0 is created, but the bootstrap-growl#1.1.0.js which is responsisble for the module.exports is missing.
So when I manually add that in jspm_packages/ifightcrime/ like this:
// bootstrap-growl#1.1.0.js
module.exports = require("github:ifightcrime/bootstrap-growl#1.1.0/jquery.bootstrap-growl");
I can do the import in my code.
But how would I make sure this file is created automatically when other people do a jspm-install? This file was created manually by me, so it wouldn't be working for them, without also doing this.