I tried running expo from a file other than App.js but anytime i tried, the default App.js was executed instead of the secondary file.
Take a look at your package.json. Inside the config object you'll find the ''main'' key, that's the key responsible for saying what the first file to run is!
Usually you'll find another path that leads to node_modules/expo/AppEntry.js (see, it's expo, not node_modules/#expo).
Inside node_modules/expo/AppEntry.js you'll see an import like this: import App from '../../App';
That's where you can choose any other file to be the first to run!
More info at https://docs.expo.io/versions/latest/sdk/register-root-component/
Related
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.
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?
SHORT: Renaming a service or component is no problem, but can you also move it to another folder?
LONG: This is the service I generated at the wrong directory with the ng new service data command:
When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: ENOENT: no such file or directory ...\data.service.ts
So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_compiler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;
TL;DR: Auto updating imports doesn't seem to work for nested Angular component folders and the error is useless. Check that those imports were updated correctly (anything in the _components folder in the poster's example).
I just ran into this same issue. I'm using the "Move TS" VSCode Extension, and it doesn't appear to update imports in components that are grouped by folders. For example, consider the following folder structure:
> Component 1
> Component 2
> Forms
> Name Component
> Email Component
> Services
api.service.ts
When I moved api.service.ts from its current location into the Services folder, the extension updated the imports in Component 1 and Component 2 correctly. However, it failed to update the imports in the Name Component and the Email Component correctly. I would guess the native VS Code "Update Imports" option has the same defect. So I would check your _components folder to ensure the imports were updated correctly.
We can move the services and components to desired folder. In Visual Studio Code after moving the component or service you would have to manually remove the initial imports and add than do Auto import from Source Action then it would update the dependencies correctly
Visual Studio Code does not seems to auto update the imports in this case.
The only way I think is to move the files in to desired location using any code editor(used vscode) and manually update the imports. VS code also takes care of GIT. If we do it from the folder structure I think we need to delete and add the file.
In VS code, you can simply rename the component to include the folder you want to use as a container and everything will be updated automatically.
Let's say you have some like:
And you want to move the component named 'single-value-card' to the 'visualization' folder.
Then all you have to do is to rename the component folder as shown:
And voilá:
Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again
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
I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.
I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.