I have pretty fresh rails application and I'm trying to add uppy file uploader to it. Unfortunately when requiring #uppy/core file I am presented with Cannot assign to read only property 'exports' of object '#<Object>' error.
This error is caused by having both Ecma's import and CommonJS' module.exports = in a single file. I have checked uppy source code in node_modules to find that the offending file does not have import - however it is present in a version received by the browser, just under "use_strict":
import _regeneratorRuntime from "#babel/runtime/regenerator";
This suggests that babel plugin decided to inject import statement into a CommonJS file, making it impossible to load that file.
Removing the #babel/plugin-transform-runtime' from babel.config.js resolved the issue - but it also broke #babel/preset-env which expects global regenerationRuntime object.
I have created a minimal reproduction application here: https://github.com/BroiSatse/babel-issue. It is a fresh installation of rails, no js config changes except for #uppy/core dependency with single route to dummy action and import Uppy from '#uppy/core' in webpack/packs/application.js`.
Any help appreciated, I don't even know where to raise that issue on github.
Related
I have a few css libraries in my rails 7 app, like bootstrap & flatpicker. In development they both load fine, but in production only bootstrap is loading.
I get a "Failed to load resource: the server responded witha status of 404" error in reference to slimselect in the js console. When I look at resources, I can see the file in the path, but the file is empty.
In the Sources tab, I can see bootstrap in the generic css file assets/application-{long-hash}.css, where as slimselect is in assets/slim-select/dist/slimselect.min.css (but no code)
Here is some of my code
app/assets/stylesheets/application.sass.scss
#import 'bootstrap/scss/bootstrap';
#import "slim-select/dist/slimselect.min.css";
I tried removing the file extension from slim select, which fixed it.
But I am curious why and if there is some way to be able to import it the way I originally did but adjusting something else.
I was able to fix this by removing the file extension, which loaded slimselect the same way bootstrap was being loaded.
This was just a random problem and I'm happy to share my solution, but also curious for any other information of why this worked.
#import 'bootstrap/scss/bootstrap';
#import "slim-select/dist/slimselect";
I'm having a error once import a component, react native says me that the file path is wrong, but it's not!
My main component where I'm trying to import a component and my file structure:
I'm on pages/Main/index and wanna import a file from components/Header/index, I'm sure about the path, I'm I think this is because of some react native project config, something like this
(I'm a windwos user and tryed to use /index in the path too)
The error:
Try passing '../components/Header'
Please let me know if it works. Thanks
Your .'./components/Header' path is right..
In your Header component folder there is no any styles.js but you are importing in index.js which is in Header folder.. The above error is regarding path to styles.js in header folders Index.js
Read the error carefully. They have mentioned original Path and target path.
Hope you get it.
I'm developing a vscode webview extension based on the CatCoding example.
I'm trying to import an external node_module from cdn using the tag. The package is loaded and I can use it, but in some of the imported functions there is an export of module and I get the following error: Uncaught ReferenceError: exports is not defined
I found out that someone has solved it by using the following "hack":
<script>var exports = {};</script>
So I tried it, and now I get kind of the same error about 'require':
Uncaught ReferenceError: require is not defined
I'm just trying to do simple packages import, not sure why it happens, probably because it runs as a webview, maybe because of electron?
Any idea how can I solve it?
The JavaScript package you are loading is using a module system, likely commonJS. The webview is just a normal webpage so you need to bring your own module support.
For this, you could use a bundler such as webpack or include a module loader such as RequireJs directly.
I have created a service and placed it in a new folder 'service' under app folder.
When I am trying to import the service in component its showing error as follows:
But, the same is getting imported in app module.
Someone please help me out...
Here is my project structure below
My alert service is in service folder.
And trying to import it in home.component which is in home folder
I figured it out.
Need to mention
import {AlertService} from '../service/alert.service';
I have an AngularJS project that I am thinking of migrating to Dart. I do not want to migrate the whole project in a big-bang, so I am looking for ways to run the two apps side-by-side.
The dart app will run on the root as index.html. The js app will run on a separate path, say '/jsApp'.
When I build a test project, it seems that the /build directory includes a lot of unnecessary files. Would I need to deploy the complete contents of the /build/web directory?
What is it that actually gets loaded? Do html files still get loaded at runtime or are they bundled into the main file?
Do I need main.dart.js as well as main.dart.precompiled.js? It seems that they are very large files for a trivial app. Is that to be expected?
It is still unclear to me how all these things hang together.
If you want to keep the generated files as small as possible, you should:
Make sure your pubspec.yaml includes the angular transformer, as explained here: Angulardart. Creating your first app
Your pubspec.yaml should look like this:
name: angular_dart_demo
version: 0.0.1
dependencies:
angular: 0.12.0
[...]
transformers:
- angular
html_files:
- web/my_html_template.html
- web/another_html_template.html
Build from the command line with pub build
This way you will get 800KB js, instead of 5MB js ;)
That's because Angular Dart uses mirrors and, as a result, the generated js code can get very big if you don't use the angular transformer.
I think html templates are copied to the build directory and will be requested at runtime.
You will have to merge the contents you get from "pub build" with your existing js application somehow.
I am using AngularJS with Dart controllers mixed in. You do not have to adapt your current project structure to use the pub build. Just use dart2js to compile the individual dart files and include the ".js" files in your page. You do not have to add the native dart script tag or include the dart bootstrap in your code. Just include a script tag for the generated js file (the only file you need) and it will do what you expect. I plan to write up a brief overview of this soon.
Normally the entire build directory needs to be deployed and there are normally no unnecessary files.
The *.precompiled.js files are not generated anymore in recent Dart builds (this was for CSP compliance).
What Dart version are you using?
If you build in debug mode also the source map files are generated in the build directory.
The browser loads the HTML file the user requests and then loads the script files references in <script> tags in this HTML and all other resources (img, css, ...)
I don't know if the build output of an Angular component with an external HTML-template file is inlined in the index.html or if they are copied as they are.