External Dependencies not working in Nav.svelte - javascript

I am trying to load sv-bootstrap-dropdown module in nav.svelte component but I am getting the error <Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. After that I tried to install that as devDependency but than I was getting the error that Cannot read property remove of undefined. This gets generated itself in the server js file under the sapper folder

When working with svelte and sapper you to have think about 2 types of rendering : client side rendering (sveltjs, js) and server side rendering (SSR), it's sapper (nodejs or expressjs), there are a few ways to handle this, but according to the document of dependency you are using :
for SSR you consider to import like this:
import {
Carousel,
CarouselControl,
CarouselIndicators,
CarouselItem,
CarouselCaption
} from 'sveltestrap/src';
solve it by importing from the src folder of the package.

Related

Ember Quickstart: Build Error when adding JS file to component

I just started using Ember. The next step in the Ember Quickstart tutorial is adding a JS file to a component:
In addition to the template, a component can also have a JavaScript
file [...]. Go ahead and create a .js file with the same name and in
the same directory as our template (app/components/people-list.js),
and paste in the following content:
I did that, but now I get a build error:
Build Error (broccoli-persistent-filter:TemplateCompiler)
EEXIST: file already exists, symlink '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-131-broccoli_merge_trees_templates/ember-quickstart/templates/components/people-list.js' -> '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-132-broccoli_persistent_filter_template_compiler/ember-quickstart/templates/components/people-list.js'
How do I get rid of this?
If I'm reading the error message correctly both you people-list.hbs and people-list.js files are in app/templates/components. In Ember Octane both files should be moved to app/components which is a new feature called component template colocation.
If that isn't the issue you may just need to restart the local ember server (though I haven't had to do that when adding a new js file for a component in the past.

"Uncaught SyntaxError: Cannot use import statement outside a module" when trying to import vue.js inside js file in Django app

I'm starting out using vue.js in a real django project, but I'm already encountering an issue.
I've installed npm in the venv environment, and installed the vue package.
I now want to create a Vue object inside a js file, so I use :
import Vue from 'vue'
But in the console I get this error
Uncaught SyntaxError: Cannot use import statement outside a module
I've searched for this issue but couldn't find a good answer for my specific case.
How to proceed to use vue js via the npm package then ?
I'm pretty sure the better, but much harder approach is getting webpack and babel involved. However, for my small project, that seemed overkill. I made the node_modules directory visible to staticfiles finder:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "node_modules"),
)
Now I had to access them thru the STATIC_URL (for me it is "/static/").
import Vue from 'static/dist/vue/vue.js'

Unexpected token '<' Error (npx create-react-app)

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';

in a reactjs application made with create-react-app, how do I import js module in a file outside of project directory structure?

I am working with the following directory structure:
/sharedlib
/apps/create-react-reactjs-app-A
/apps/create-react-reactjs-app-B
create-react-reactjs-app-A and create-react-reactjs-app-B are both applications made with create-react-app. I would like both applications to be able to use javascript modules defined in files in a third folder, sharedlib. How do I configure my applications to allow them to import modules like this? When I attempt to do so, I get the following exception:
SyntaxError: export declarations may only appear at top level of a module

How can I configure Webpack 4 to automatically import split chunks when a bundle is requested via script tag?

I have been pulling my hair out for 3 weeks trying to get this to work, and I can't figure out where the gap in my understanding is.
I am building a library of components for an authorable CMS. My vision is to have a set of n thin entrypoints, all of which will have statically imported dependencies that are requested when the entrypoint is run via script tag.
Per my understanding, webpack can chunk shared dependencies together via splitChunks plugin, and those dependencies can be automatically loaded via the bundle-loader plugin.
However, when I call an entrypoint bundle via script tag, the automatic dependency import does not occur - only when I use dynamic import() syntax within my source files does dynamic import occur - but that's because import() itself is dynamic.
How can I configure webpack to pull in statically dependent chunks?
Check out Paragons (see section: Code Splitting). Then take a look at CodeSplitPage which is wrapped in a Loadable using a dynamic import.
The HtmlWebpackPlugin is what you're looking for. You can configure it to generate entry.html output files in your dist folder, which you can then use in an Express application, or import into your non-Node server rendering to get the full list of <script> tag.

Categories