I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.
Related
I'm trying to implement the Bootstrap 5 version of the Table Editor plugin of MDBootstrap, but the error that I get, has nothing to do with them, at least, not directly. This is my first time working with modules so bear with me. What I'm trying to achieve, is simple. This is the header of my importer js file:
import FocusTrap from './mdb/util/focusTrap';
import PerfectScrollbar from './mdb/perfect-scrollbar';
import { getjQuery, typeCheckConfig, onDOMContentLoaded } from './mdb/util/index';
import Data from './mdb/dom/data';
import EventHandler from './mdb/dom/event-handler';
import Manipulator from './mdb/dom/manipulator';
import SelectorEngine from './mdb/dom/selector-engine';
import tableTemplate from './table/html/table'; //eslint-disable-line
import { getModalContent, getModal } from './table/html/modal';
import {
search,
sort,
paginate,
getCSSValue,
formatRows,
formatColumns,
getRowIndex,
} from './table/util';
Great. Well, this code produces the browser error:
So of course, my JS plugin doesn't work because the browser doesn't find the imports. I suspects is because I'm not using the ~ at the start of the path to indicate that they resides under the wwwroot folder. However writing the ~ in front of the path, causes yet another error by the browser, saying, that's incorrect syntax.
So I'm stuck!!!
In case you are wondering, this is how my wwwroot looks right now:
And the Table Editor js file, which is the one that does the import, is right there alongside those folders:
What should I do in this situation?
Help :(
I'm using a library vtk.js. VTK has a special design of classes (https://kitware.github.io/vtk-js/docs/develop_class.html). When I write a class I need to import macro.js module which exposes several base methods such as getters/setters/newInstance etc (https://github.com/Kitware/vtk-js/blob/master/Sources/macro.js).
Looks like CRA uses some special loader for macro.js files. I get an error when trying to import such a file (SyntaxError: Cannot use import statement outside a module). If I copy an original file macro.js from #kitware/vtk.js to my local source folder I still get an error. Even if I remove all the contents of macro.js file I get an error (The macro imported from "../macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros". Please refer to the documentation to see how to do this properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#writing-a-macro). However, when I rename macro.js to macro2.js the error is gone.
Is there some way how can I disable this macro loader?
I have a React app with dozens of files and I don't use any import / export statements. I have a _references.js file that helps intellisense reference components to each other.
I'm looking for a WYSIWYG component to use in my app but all examples show import statements like this:
import { Editor } from 'react-draft-wysiwyg';
When I type this in my JSX file I get:
JSX illegal import declaration
Do I have to configure Visual Studio (2015) differently in order to use this? What is the deal with this syntax and what are the rules around using it?
I am using react for .net so I assume this is what prevents imports from working... but if that is true, then what is the workaround?
I have a files structure issue that I am trying to fix when referencing components into other components as imports.
The current files setup I have looks like this...
I am working on the file called security_passphrase.vue and within that file I reference 2 files to import as I need to use them there.
import dropdown from '../components/vue_form/dropdown.vue'
import formbutton from '../components/vue_form/form_button.vue'
The compiler cannot find the modules I am trying to load.
Error: Cannot find module '../../components/vue_form/dropdown.vue' from 'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
Error: Cannot find module '../../components/vue_form/form_button.vue'
from
'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
I have tried different ways to make this work but no success. The files I am trying to import are outside of the folder where the file is I am working with.
/concertina_form/security_passphrase.vue /vue_form/form_button.vue
/vue_form/dropdown.vue
Help will be great :)
import dropdown from '../dropdown.vue'
import formbutton from '../form_button.vue'
Should be the correct way to import these files, using ../ goes down one directory which will take you from the concertina_form directory to the vue_form directory.
Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.