I've had issues with my react project and as such i've just made a new reactapp and updated all the packages in my package.json. However, Either the updated react version, react dependancies or node-sass is not allowing the project to be compiled. It installs without any vulnerabilities which is great, but the sass compiler doesn't want to play ball.
Folder structures as follows
--src
--api
--assets
--fonts
--images
--components
--pages
--scss
--_variables.scss
--_media.scss
--_mavigation.scss
--App.scss
--App.js
--index.js
seems to break whenever i'm referring to background-images in css, i can't seem to get the right path to work, despite the same paths working in an older version of reactjs.
I get the following error
Failed to compile.
./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
Module not found: Can't resolve './scss/assets/images/camera.png' in 'xxxproject/src'
The css this is erroring on is as follows;
background-image: url('./assets/images/camera.png');
Anyone got any ideas?
Problem is like
Background url is like
'./assets/images/camera.png'
Node sass tring to resolve it at
'./scss/assets/images/camera.png'' ///scss causing problem
Solution : use ../ in background-image
background-image: url('../assets/images/camera.png'); // as per your folder structur
Related
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any
I'm trying to import in Typescript some SVG icons, but I'm facing some problems.
At the first time I tried to import them, Typescript wasn't able to recognize the file extension.
I solved this issue by creating, as suggested in other Stack Overflow and Github topics, a custom.d.ts file with this rule inside:
declare module "*.svg" {
const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
But the problems seem to not finish here, even if the compilation seems going fine.
The current project I'm working on, is structured this way:
Typescript + React package (with SVG icons files) (SDK)
React Internal Sample page (package) to use the SDK
other internal packages...
For our development phase, we build through Webpack all the packages through different loaders and see the result through the Sample page.
But the final product flow to production is quite different: I export the SDK as CommonJS to an internal NPM Registry so another company can use it in a React project (the equivalent of the Sample page but for production) and push to production the final Webpack bundles with both projects inside.
So, to load in the Sample application the SVG icons, I'm using #svgr/webpack loader, which converts the files.
But when I have to export the SDK through npx tsc, I see that the exported folder, does not contain the folders with svg files.
I've tried to include them in tsconfig.json/files, but got this error:
TS6054: File '<path>/*.svg' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
So, to attempt exporting them I converted my exporting script to use #svgr/cli to export the files to React files from SVGs before compiling to typescript:
// package.json
scripts: {
"build-ts": "rm -rf ./lib; yarn convert-svg-to-react; npx tsc",
"convert-svg-to-react": "npx #svgr/cli -d src src --typescript",
}
In this way, I get the new Typescript files mixed with the SVGs inside the package (so I'll have to remove them later) and I can see them in the exported folder lib.
But watching inside the Typescript exported code, I can see this line (for each svg import):
var close_svg_1 = __importDefault(require("./icons/close.svg"));
Leaving out the Typescript function for Babel __importDefault, you can see that it still requires the file svg, but what I have at this point, are the React components that replaces those files.
During development it works fine because #svgr/webpack loader, resolves the svg files.
But requiring svg files that do not exist, should make the application above it crash.
So, I'm stuck and I need some clues to get out of this situation.
Some clues that I got (but wasn't able to find how to do that), were:
[Best] Find how I can export raw svg files as they are during Typescript compilation without doing that manually, as they are not all in one folder but divided per components areas in the package tree. Doing this, I would tell the other company to add #svgr/webpack to its own building process.
Find how can I tell Typescript to import svg files without specify the extension (currently, removing .svg probably makes it fallback to .ts/tsx and therefore it cannot find the file with that name). In this way, the require would keep requiring the same file name but I could convert SVG to React Components without occurring in problems. But this would also require Typescript to export the file
Otherwise, I should convert all the SVGs in React components and directly use them instead of making them being compiled by #svgr/webpack, but I'm not sure this would have some other side-effects.
Any other clues or any way to achieve the ideas I got? Thank you everybody.
I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}
I am using parcel with typescript and out the box everything just works,
Now when I try to include svg it didn't work,
This is because I needed to change in typescript
declare module "*.svg"
This allows me to now compile my typescript.
Now the other thing that doesn't work is now I want to import my SVG component
and just use it like create-react-app 2
Import Icon from "./icon.svg"
function DisplayIcon(){
return <Icon/>
}
So this looked straightforward
https://www.npmjs.com/package/#svgr/parcel-plugin-svgr
yarn install and I get Can't resolve
<Typescript file>:<Line>:<Column>: Cannot resolve dependency './icon.svg' at '<Icon Location>'
So I think maybe it's the plugin and I try to use
https://www.npmjs.com/package/parcel-plugin-inlinesvg
I get the same issue.
What is it that I am missing?
I see some people have .babelrc files but the plugins should just work out the box atleast that is what the documentation says.
Using plugins in Parcel could not be any simpler. All you need to do
is install and save them in your package.json. Plugins should be named
with the prefix parcel-plugin- or #your-scope/parcel-plugin-, e.g.
parcel-plugin-foo or #your-scope/parcel-plugin-foo. Any dependencies
listed in package.json with these prefixes will automatically be
loaded during initialization.
It seems like the plugins boot, but nothing works.
Without the plugins I get the file in my public path with a string to it in my JavaScript runtime.
What am I missing and what am I doing wrong?