In my .vue file script area, I have this:
<script>
import get from 'lodash.get';
...
</script>
I'm trying to import lodash.get, but I get ReferenceError: get is not defined.
In my entry file(app.js which is a normal js file) it works and I could do
import get from 'lodash.get';
window.get = get;
But it would be better to have imports in each component.
Is there a way to import packages(lodash.get in my example) inside a
vue component?
My folder structure:
node_modules
..lodash.get
....index.js
resources
..assets
....js
......components
........ComponentWhereINeedImport.vue
....app.js
None of these work:
import { get } from 'lodash/get';
import { get } from 'lodash.get';
import get from 'lodash/get';
import get from 'lodash.get';
require('../../../../node_modules/lodash.get/index.js');
require('../../../../node_modules/lodash.get/index');
require('../../../../node_modules/lodash.get');
Just write
<script>
import lodash from 'lodash';
....
Related
I'm new to react and confused about how to import, export, and render components. I have a fakeData.json file located in the same src/components folder as the component I'm trying to render. Here is the index.html
<body>
<div id="root"></div>
</body>
Here is the index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Here is the app.js
import './App.css';
import './components/WatchlistTable.js';
import 'rsuite/lib/styles/index.less';
function App() {
return <WatchlistTable />
}
export default App;
Here is where I get confused in src/components/WatchlistTable.js. It is a rsuite table. I try to import the fakeData.json file, which is located in the same components folder, like this:
import fakeData from 'fakeData.json';
But it gives error like "Module not found: Can't resolve fakeData.json". So I try another way.
import {fakeData} from 'fakeData.json';
But it gives same error. In the Visual Studio Code editor I notice message like: "there is no fakeData.json in the public folder."
So I make a copy and put it there. Now VSC error disappears but other error remains.
The fakeData.json file looks like this:
[
{
"id": 1,
"avartar": "url/128.jpg",
blah blah blah...
},
]
So I try another way. I change fakeData.json in components folder to fakeData.js and add
const fakeData = [
But same error. So I try:
const fakeData = require('fakeData.js');
But same error. Suggestions?
EDIT: Per Ridik, I now have this in WatchlistTable.js
import React from 'react';
import fakeData from 'fakeData';
And I have
export default fakeData;
at the end of the fakeData.js file. But still getting same error:
./src/components/WatchlistTable.js
Module not found: Can't resolve 'fakeData' in
'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\components'
You can not directly import your json array from the JSON file in react. To achieve that you must store your JSON array in a variable and then export default your JSON array. By Doing this you can easily import it in your component.
FakeData.js
const fakeData = [
{
"id": 1,
"avartar": "url/128.jpg",
blah blah blah...
},
]
export default fakeData // you must export it to use in another file.
Then in any component use it like
import fakeData from './Destination_of_file/fakeData.js'
or
Way 2 // recomended
import fakeData from './Destination_of_file/fakeData'
In your import statement you have to provide the relative path of the file. Otherwise it looks into public directory in your project. And also instead of using named import syntax use default import syntax. i.e., in your case use below statement to import that json file in your component.
import jsonFile from "./fakeData.json";
In my jest tests, I need to import everything that the tested component needs to work (which I do in my application's main.js). Since I have multiple test files, I need to "re-import" it in each file. Is there a way to import it all in a single file, and then import only this file?
import Component from '#/views/input-something'
import {mount, shallowMount} from '#vue/test-utils'
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome'
import {library} from '#fortawesome/fontawesome-svg-core'
import {fas} from '#fortawesome/free-solid-svg-icons'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'
import BootstrapVue from 'bootstrap-vue'
import 'vue-select/dist/vue-select.css'
import Vuelidate from 'vuelidate'
import Vue from 'vue'
import './helpers/multi-ref-test-runner'
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(BootstrapVue)
Vue.use(Vuelidate)
library.add(fas)
// I wish to write everything above in a single file
window.confirm = function() { return false; }
describe('input-something', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Component, {...});
});
it('it renders', () => {});
});
I expect to import everything I need in a file, like helper.js
Then in my test file I'd just do something like
import 'test-helpers/helper';
describe('input-something', () => {...})
EDIT 1
After a while I was able to import all I needed this way
/* imports.js */
import Component from '#/components/something'
import { mount } from '#vue/test-utils'
export { Component, mount }
/* my-test.js */
import { Component, mount } from './imports.js'
And adding this line to my .babelrc (to be able to work with jest)
"plugins": ["#babel/plugin-syntax-dynamic-import"]
And then I could use all the properties I imported.
Although it's working this way, I wanted to use these properties (Component, mount...) without having to implicitly import each one.
Is there a way to do it?
create a separate js file
import components or plugins or anything you want there
import that file in main.js file
For example:
this is my separate reuseableComponets.js
// I include components and plugins here
...
import Component from '#/views/input-something'
import {mount, shallowMount} from '#vue/test-utils'
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome'
...
Now in app.js
import('path to reuseableComponets.js')
That's it.
Use setupFilesAfterEnv in your jest.config.js to point to a script that sets up your tests. This file would be automatically invoked before your tests, so you wouldn't have to import it.
For example, you could move the setup code you had mentioned into a file named my-setup.js, and then configure Jest as follows:
// jest.config.js
module.exports = {
setupFilesAfterEnv: ['./my-setup.js'],
}
Instead of writing the following code in every reactnative's ".js" file, is it possible to write it in a single file and the export it so that i can use it in other js files just by importing this one file (containing all the component that I need to use)
import React from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
Now instead of writing the above code in page1.js, page2.js, page3.js, how do i write it in a single file called "comp.js" and export it from there so that i only have to import comp.js in the page1.js, page2.js and page3.js file
It is possible but I recommend using index.js for that folder instead of that comp.js
In a folder you can create index.js and import all related js in that folder so you can import very easy
For example: I have my folder called Components
Create index.js in the folder Components
Import and export files
import comp1 from './comp1'
import comp2 from './comp2'
import comp3 from './comp3'
export { comp1, comp2, comp3 }
Import folder instead of each file and select only needed files import { comp1, comp2 } from '../Components'
I got this error in my browser
Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src
This is what I got in my editor
import {TodoForm, TodoList} from './components/todo'
http://imgur.com/a/8YLod
I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.
Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:
import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'
As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.
In order to just import all files from the directory you must have an index.js file that exports everything from the directory
Which in your case the index.js file would look like this
Export * from 'TodoForm'
Export * from 'TodoList'
Note if the export statement doesn't work see this answer to fix the import / export statement
Do you think, when you wrote import {TodoForm, TodoList} from './components/todo', in TodoForm should be value than you exported from file TodoForm.js, and similarly with TodoList? It's don't works.
You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:
export * from './TodoForm.js';
export * from './TodoList.js';
it's will work.
So the thing is that when you do
import {TodoForm, TodoList} from './components/todo'
What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to
So if in index.js you add something like
export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';
Your approach will work.
I'm trying to obtain the file where a named import is loaded in ES6. Let's say i have
import React, {Component} from 'react';
const dummy = () => (
<div>
Hello!
</div>
);
export default dummy;
I'm processing this file and trying to find out from which file the Component import is loaded. As far as i research, i can use require.resolve(), but it only tells me the index file from a module. What i want to know is from which file a named import is loaded... Any idea?