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 :(
Related
I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.
I'm trying to use the select input tool for ReactJS (https://react-select.com/home#getting-started) so I can have a filter/search bar on my website. I copied and pasted the code from the link above into a new file in my src folder. At this point I had no errors, but when I import this filter file into my App.js file and run it, I get the following error:
Module not found: You attempted to import ../data which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Here are the imports for the filter file:
import React, { Component, Fragment } from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
import { Note } from '../styled-components';
The rest of the code is in the link above (I used the Single search, the first one that comes up). I've looked up several things and can't seem to figure out how to get rid of this error!
[EDIT] I don't even know where this data file is in my project or my computer. I've searched for it and I have a million data files, so I'm unsure of what to bring into my src folder. I'm also having the same problem with the styled-components import. When I search for that on my computer, nothing comes up.
import { colourOptions } from '../data';
The above import seems to be incorrect. You might have want to import the from the data.js which is in the same directory as of your App.js.
import { colourOptions } from './data';
This can help you solve the error. Also make sure the data.js file is in the same directory as of App.js.
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.
I am using Gatsby and importing jquery.
When I run Gatsby build I get the following error:
WebpackError: jQuery requires a window with a document.
This is due to Gatsby doing server side rendering.
I have read through a number of issues on GitHub (this one being the best one I could find).
My code looks like the following:
import React, { Component } from 'react'
import Link from 'gatsby-link'
import LandingScreen from '../components/LandingScreen'
import $ from 'jquery'
import 'fullpage.js/dist/jquery.fullPage.js'
import 'fullpage.js/dist/jquery.fullpage.css'
class TestPage extends Component {
componentDidMount() {
$('#fullpage').fullpage({
verticalCentered: false
});
}
render(){
return (
<main id="fullpage">
<LandingScreen />
</main>
)
}
}
export default TestPage
This is breaking so I tried the following based on the GitHub thread above, but this also fails:
if (typeof window !== 'undefined') {
import $ from 'jquery'
}
Can anyone advise how to import jquery?
Gatsby's components will run on both Node (no window object there) in order to produce static HTML and on the client's browser as React components. This is why you get this error.
The plugin you are trying to use needs to run only on the client because it needs the actual viewport dimensions to operate. Gatsby has a special API for this that you can use to run the plugin only on client side. A quick solution would be to load jQuery there and initialize your plugin on onClientEntry.
I would also suggest you find a more lightweight plugin that does the same thing without the jQuery dependency. It's a pity to use jQuery in a React stack. Maybe somebody else can recommend one.
Peter, I recently reported this to jQuery maintainers, but they politely told me... well... to kick rocks. Would be good, if you could badger them about this a bit, too.
Currently jquery absolutely requires window object, so it won't work on Node.js as a dependency. (with one exception: if you don't need a global jquery object, but just a local instance in one module, you can manually initialise it with JSDom, but that's probably not your use case)
Your way around this whole problem is that you don't actually have to import jQuery or its plugins on server side. So my approach was to create 2 separate entry point files - app.jsx and server.jsx - for client bundle and server-side bundle respectively and Layout.jsx as a shared root component.
app.jsx and server.jsx are entry points for client-side bundle and server-side bundle respectively, while Layout.jsx contains shared code with html.
I import jquery only in app.jsx bundle, so on client side it is present. On server side it is never imported and not included in server bundle.
You can take a look at my blog's code, how I set up Webpack in it and how do server rendering.
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.