I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
Related
I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.
I found a weird behaviour on importing files in React and can't figure out why the two different environments behave differently. Has someone an explanation on where I should start digging here?
Basically I want to load a test.yaml file in my React app (just React, no node.js) which works with an import statement in CodeSandbox:
import test from "./test.yaml";
Content of test is the text of the yaml file, which is what I want.
Here is the sandbox: https://codesandbox.io/s/goofy-clarke-6f16w?file=/src/index.js
When I copy all the files locally onto my computer and use npm install and npm start the behaviour changes and the content of test after the import is the file name with a hash but not the content. I can easily fetch the content of the file later with get-command. I just can't explain why on all the local envs that I tried i have this behaviour.
test.yaml as String: /static/media/test.438607f4.yaml
test.yaml as Object /static/media/test.438607f4.yaml
Any ideas?
I'm creating a utility project that will supply React components and resources to my other projects.
I'd like it to include a set of images (mostly .png files for icons) that can then be imported by the child projects.
I can't figure out how to make this work.
I can export the images from the library, and I can see them, name-mangled, in the node_modules of the child project. So, all good so far.
But, import {imgName} from "myLib" does not include the file in the child project's bundle.
It looks to me like my problem is explained by a clue in https://create-react-app.dev/docs/adding-images-fonts-and-files/:
You can import a file right in a JavaScript module. This tells
webpack to include that file in the bundle.
Presumably, CRA is not triggering this webpack behavior in my case, since I'm importing from another module, not from a file.
How can I get things working?
Assume:
I have complete ownership of the library and child projects, so I can change this solution in whatever way works. I just want to have a single common resource for the images.
I don't want to eject my child projects
Ideally, any complexity should be in the library project. The child projects should have minimal complex tooling. (My intent is for this library to be used by a team of other developers, who will want to focus on their own tasks; not on tooling details)
EDIT (ADDED LATER)
Per the comments in the first answer below, I've created a simple example of my problem. See:
Library repo: github.com/deg/media-file-bug-library
Library package: npmjs.com/package/media-file-bug-library
Client repo: github.com/deg/media-file-bug-client
Just pull the client repo and do yarn install and yarn start. This will bring up a little web page that shows the problem:
SCREEN SNAPSHOT:
The Problem is Not in CRA Trigger. Importing Png File like JavaScript Hides a Magic. Here you are importing a Image and Exporting it which then get Processed by bundler and The Bundled Index Actually Exports The name of the Processed Image File Which in Your Case is corss~nAalnlvj.png. That's Why Your Image is Broken but you are able to render name of File, The Case is Same for microbundle or parcel.
How You Can solve it is by separating your assets and components By Placing Images on separate assets folder and place your images there and then add assets to files in your files in package.json
{
.
.
"files": [ "dist", "assets"],
}
And Then Import Image & Using Like This
import React from 'react'
import ico_cross from 'media-file-bug-library-fix/assets/cross.png'
function App() {
return (
<div className="App">
<img src={ico_cross} alt="im"/>
</div>
);
}
For Further Reference Checkout
Here
A Npm Library For Your Fix I Published Npm media-file-bug-library-fix
enter image description here
hey David I found the solution please do check the above screenshot
as in you package just change in index.modern.js
// WebPack doesnt listen as a path it listen
// var cross = "cross~nAalnlvj.png";
// use import rather than simple name as it generate a full absolute path at parent level so that in child level it can be accessible as an Image
import cross from "./cross~nAalnlvj.png"
I want to boost my website performance. I recently see an error on unused javascript from lighthouse.
I checked the bundle and apparently those unused javascript are actually being used from other modules and node packages which I have been download.
For example, #sentry/node is what I'm using, but report shows unused javascript from #sentry/hub. But I only did install on #sentry/node but not the whole #sentry package. Further more, #sentry/node is using #sentry/hub, but I'm not importing #sentry/hub anywhere in my code (which I assume that causes the problem)
I have included "sideEffects": false to my package.json file but nothing seems to work
You could try destructuring, target only the object (or function) you are using.
e.g.
import { Component } from 'react';
Therefore, for you...
import { yourFunction } from `#sentry/node`;
Or simply take the code #sentry/node that you are using. 🤷♂️
Otherwise, show your code:
package.json
webpack.config.js
your "index" file (where you import your scripts and other files)
the file you import #sentry/node in
I'm using Firefox 75.0. My file structure looks like this:
A at top of my index.js file, I have :
import "./styles.css";
import ScrollBooster from "scrollbooster";
// go ahead and change some library source code!
// import ScrollBooster from "../libs/scrollbooster";
When I try to open index.html, it logs an error saying: SyntaxError: import declarations may only appear at top level of a module, pointing to the CSS import. If I remove the CSS import, then it throws the same error, this time pointing to ScrollBooster from "scrollbooster";
Why is this happening?
PS : Here's the whole code: https://codesandbox.io/s/scrollbooster-examples-2nn7h?file=/src/index.js
I looked at the code in sand box and dont see any import issues as mentioned in the console
If you're having trouble running it on your local machine I would double check your import path.
By the looks of that sandbox code it's importing based on a path specified for their website. When you import on your local machine just ensure that it's taking the correct path to the files that you've downloaded.
Just like the ./styles.css import is based off of the working folder for your project. The import ScrollBooster from "scrollbooster" could be the problem. When hovering it shows module "/sandbox/node_modules/#types/scrollbooster/index" as the path. Try changing it to an import similar to the styles.css one potentially.
I did not see any errors, like Ajay Reddy, when I checked that code on the link.
The HTML file is a part of npm package. In order to run the server, you would need to start the server through npm.
First, to install all dependencies (required only once), run:
npm install
Then to start the server, run:
npm start
Then from your browser, visit http://localhost:1234