I created a brand new app using creat-react-app. got it running. My company has a custom library of components in an npm repository.
I pull that in, and import one of the components. I get a failure immediately.
The error I'm getting is:
./node_modules/the module in question/index.js
Module parse failed: Unexpected token (1:7)
When I look at the index.js file of this node module, the only line there is:
export * from './src';
The ./src/index.js file exports all the components individually.
It's clear this is choking webpack or something. I haven't really seen things exported like this.
Related
Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks
The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.
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.
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'
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 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