I'm trying to start a project in Rails 7 using import maps to handle Javascript. I'm able to import jQuery and jquery-ui, but I'm having trouble importing my own custom file. My directory structure looks like this:
app
└── javascript
├── application.js
└── things
└── main.js
importmap.rb
pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery#3.6.3/dist/jquery.js"
pin "jquery-ui", to: "https://ga.jspm.io/npm:jquery-ui#1.13.2/ui/widget.js"
pin "application" #, preload: true
pin_all_from "app/javascript/things"
bin/importmap json
{
"imports": {
"jquery": "https://cdn.jsdelivr.net/npm/jquery#3.6.3/dist/jquery.js",
"jquery-ui": "https://ga.jspm.io/npm:jquery-ui#1.13.2/ui/widget.js",
"application": "/assets/application-96f4674148ca000af60a0849c2131544545b3b328a53205668f7e25bc48703b7.js",
"main": "/main.js"
}
}
application.js:
import "jquery";
import "jquery-ui";
console.log('hello');
import "main";
main.js:
console.log('hello again');
When I comment out the import "main" line in application.js, I see the debug statement "hello" in the console. But when I uncomment it, I get nothing, no error message either. I can't make my JS any simpler, but I have no idea what's causing it to fail. Also is there a way to get any more info about the failure? (error messages, logs, etc)
It looks like you're trying to import your custom main.js file in your application.js file, but it's not working. One potential issue could be that your import map is not correctly linking to the correct location of the main.js file.
You have the following pin in your importmap.rb:
pin_all_from "app/javascript/things"
This will create an import for all files in the app/javascript/things directory, but you should ensure that this directory actually exist, otherwise it will not work.
Another issue could be that the import of 'main' is not correctly referenced in your application.js file. Try importing './things/main' instead of 'main'
You can also try to debug it by checking the browser's developer console, it should output any error messages that are preventing the import from working correctly.
Related
Exporting from one file index.js like this: export const categoriesObj = new Object(); and trying to import from another index.js file like this: import { categoriesObj } from "../app/index.js";, but I get an Uncaught ReferenceError: (variable from the other file) is not defined because instead of just importing the categoriesObj, I think is importing the whole file.
Currently I'm using webpack and babel. Both index.js files have separate bundle files. The folder structure looks like this:
dist
bundle1.js
bundle2.js
src
app
index.js
history
index.js
What I have tried is:
Add "type": "module" in package.json file.
Added babel-loader. Thought it was some problem with ES6 modules.
renamed ../app/index.js to index.mjs.
What I'm trying to do is to import an object which is generated in another file so I can use it on this other file.
Hope this makes sense. I've been stuck in this for days. Thanks for reading!
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've setup a new react app using npx create-react-app my-app.
In the index.html file I want to import a javascript file in the head like so
<script src="/src/.../file.js"></script>
However, I keep getting Unexpected token '<' error. I can't do an import as it creates loads of errors and I want to be able to use some functionality in these scripts across the site.
Any ideas how to reference this file? Previously in other projects we use webpack but this config doesn't seem available in this project.
If your js files are located in the /public/ folder then you can import it like this:
<script src="%PUBLIC_URL%/.../file.js"></script>
If it is located in /src/ folder, you can simply import it to your index.js file, and it will be available across your React application. Remember that order of imports matters here.
import './.../file.js';
I'm currently developing a package, and inside my package repository I have the following structure:
src
- Requests.js
- Constants.js
package.json
Inside my package.json, I have the following:
{
"name": "package-name",
"version": "1.0.0",
"main": "src/Requests"
}
Then inside my project, I do the following to retrieve my module:
import Requests from 'package-name';
Now what I'm trying to achieve is to import the Constants class from the package. However, when I do the following, I get a compiled error that it cannot locate the class.
import Constants from 'package-name/Constants';
To get it working, I have to do but I don't want to have the /src in the import path.
import Constants from 'package-name/src/Constants';
I've tried to change the main in my package.json to the directory, but it's still not working:
"main": "src/"
Right, this is not a bug, just how node imports are handled by your bundler. There are many solutions to this problem, here are a couple:
The most user friendly is to have your publish command copy those components to the root directory and then publish. That way you'll be able to import like you say, import Constants from 'package-name/Constants'. It's only slightly inconvenient for you as a developer but a script should be able to clean up after the publish command succeeds.
An alternate solution is to have a third file, maybe call it index.js that looks somewhat like this:
import Requests from './Requests';
import Constants from './Constants';
export default {
Requests,
Constants,
};
This will allow you to import like this (don't forget to change your package.json to have "main": "src/index.js"):
import { Requests, Constants } from 'package-name';
The only reason I would shy away from this approach is that when this import statement is handled by the bundler, ALL components are imported, even if you only need one of them. It could make your bundle larger if your library contains many different components.
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.