I just started using nuxt for vue. I added a component in the /components folder and I am trying to use it in one of my pages.
Unfortunately, I get this warning, upon compilation:
"export 'AddPlaceModal' was not found in '~/components/AddPlaceModal.vue'
I am trying to use it via:
<script>
import {mapActions, mapGetters} from 'vuex';
import {AddPlaceModal} from '~/components/AddPlaceModal.vue';
export default {
components: {
'add-place-modal': AddPlaceModal
},
...
The component itself looks like:
<script>
export default {
data() {
googleLocation: null;
},
...
Any ideas why this may be?
You need to import from default export, not a named export
import AddPlaceModal from '~/components/AddPlaceModal.vue';
you have to remove the curly brackets
do this:
instead of:
Related
i have shared components folder when i created some components and i want to export all of them to index.js file and then export all of them from that file. thats how it looks from one of the components file:
export default ToggleSwitch;
now in the index file i try to export them again, it looks like this:
export { default as ToggleSwitch } from './ToggleSwitch';
export { default as Input } from './TextField';
export { default as Button } from './Button';
when i try to import one of the components if i import like this:
import Button from '../../shared/components';
i get this error saying that '../../shared/components' does not contain a default export
and when i try to import it like this,
import { Button } from '../../shared/components';
i get error saying Button is not exported from '../../shared/components'.
what am i doing wrong here?
Have you tried importing as import { Button } from 'shared/components';?
For reference, the current codebase I work with has a similar structure for stores (flux stores) and this pattern works.
An example from the codebase: import { ClickStore } from 'stores';.
In the root of my module dependency I have a file called form.js:
module.exports = require("./dist/bundle.js").form;
In my project I have:
import { someComponent } from 'my-dependency/form';
Yet someComponent will be undefined.
If I do this:
import form from 'my-dependency/form';
console.log(form.someComponent);
It will output something that looks like this in the console:
ƒ Rr(e){var t=e.component,n=void 0===t?"input":t,r=e.rend[....]
Yet, if I do this, it will work:
import form from 'my-dependency/form';
const { someComponent } = form;
What am I doing wrong here and how might I achieve what I want?
Inside of my src/form.js file I have:
import someComponent from "./someComponent";
export default {
someComponent
};
Inside of src/index.js, I have:
import * as form from "./form";
export default {
form
};
Probable root cause but not sure how to fix?...
It looks like the problem caused by exporting with CommonJS and importing using the ES6 syntax.
Here is someone with a similar issue but from 4 years ago:
https://github.com/google/traceur-compiler/issues/1483
and, from 2 years ago:
https://github.com/Microsoft/TypeScript/issues/11179
I've tried explicitly setting code like so but this did not seem to achieve what I want (creates a module with a default property):
Object.defineProperty(module.exports, "__esModule", {
value: true
});
It looks like reading online people will do import * as whatever from '..' but shouldn't destructuring work too?...
Two ways, either:
export const someComponent
Then:
import { someComponent } from 'my-dependency/form'
Or:
export default {
someComponent
}
Then:
import someComponent from 'my-dependency/form'
I have a Vue 2 project, and I've written a simple function for translating months in dates, which I would like to import in one of my components, but I'm getting an error:
export 'default' (imported as 'translateDate') was not found in '#/utils/date-translation'
The relative file path from the src folder is correct, and I am exporting the function like this:
export function translateDate(date) {
// my code
}
And then I am importing it in the component like this:
import translateDate from '#/utils/date-translation'
What am I doing wrong?
You have to specify default explicitly:
export default function translateDate(date) {
..
}
Either specify default as mentioned above, or if you're trying to export multiple items from the same file you need to import them with curly brackets.
So you would have:
export function doWork(){}
export const myVariable = true;
And then you'd import them in a separate file as:
import { doWork, myVariable} from "./myES6Module"
In my case I had to remove '{' and '}' arround the imported component :
import { CustomComponent } from './CustomComponent';
with
import CustomComponent from './CustomComponent';
Maybe you have two files with the same name.For example, "test.vue" and "test.js"
You need to set symlink setting in vue.config.js
config.resolve.symlinks(false);
Rather than using
export function translateDate(date) {
// my code
}
use
function translateDate(date){
//code
}
export default translateDate;
it worked for me...
I'm using react-komposer to wrap React components with a data fetching wrapper.
It is very basic and I'd want to wrap multiple components in Meteor. But I can't figure out what the export pattern is?
Here is what I have (and gives me an "Unexpected Token" error - probably obvious if you understand this well!):
// myContainer.jsx
import Component1 from './Component1.jsx';
import Component2 from './Component2.jsx';
function composer(props, onData) {
if (Meteor.subscribe('SingleTodoLists').ready()) {
const todoList = todoLists.find({}).fetch();
onData(null, { todoList });
}
}
export composeWithTracker(composer, Loading)(Component1);
export composeWithTracker(composer, Loading)(Component2);
And I'd like to import them like this:
import { Component1, Component2 } from './myContainer.jsx';
This wrapper syntax is not really clear for me, so I'm unsure about what to try. Playing with export default and other variations yielded no result so far.
If you don't use default exports, you need to name the things you export:
export const TrackedComponent1 = composeWithTracker(composer, Loading)(Component1);
export const TrackedComponent2 = composeWithTracker(composer, Loading)(Component2);
If you use default export instead you can omit the name, e.g.
export default composeWithTracker(composer, Loading)(Component1);
But you can only define one default export per module
See the documentation for the ES6 export syntax: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
Update:
If you want to keep the original export names:
import _Component1 from './Component1.jsx';
import _Component2 from './Component2.jsx';
//... you code here
export composeWithTracker(composer, Loading)(_Component1);
export composeWithTracker(composer, Loading)(_Component2);
Because Component1.jsx uses a default exports, when you import it you can rename it as you want (e.g. _Component1, UntrackedComponent1, ...). Without a default export, you could have used import { Component1 } as _Component1 instead.
In ES6, is it possible to shorten the following code. I have an App.js file and an index.js.
index.js
import App from './App';
export default App;
Something like this
index.js
export default App from './App.js'
If you use proposal-export-default-from Babel plugin (which is a part of stage-1 preset), you'll be able to re-export default using the following code:
export default from "./App.js"
For more information see the ECMAScript proposal.
Another way (without this plugin) is:
export { default as App } from "./App.js"
The above is a very common practice when separate files, each with its own export, have all something in common, for example, utils, so if, for example, one would want to import 3 utility functions, instead of having to write multiple imports:
import util_a from 'utils/util_a'
import util_b from 'utils/util_b'
import util_c from 'utils/util_c'
One could import any of the utilities in a single-line:
import { util_a, util_b , util_c } from 'utils'
By creating an index.js file in the /utils folder and import all the defaults of all the utilities there and re-export, so the index file will serve as the "gateway" for all imports related to that folder.
This is a bit of repetition from the previous answers, but to clarify the difference in two options:
1. Default export
(This appears to be what OP wants)
// index.ts
export { default } from './App'
Then, in a different file:
import App from './index'
2. Named export
export { default as App } from './App'
Then, in another file:
import { App } from './index'
Bonus: named → default export
If ./App uses a named export, but you want to re-export it as a default export, you can do that too:
export { App as default } from './App'
Then, in another file:
import App from './index'
These will work with react as vsync's answer states.
Bonus #2: export everything
Say you have a file that exports multiple items:
// App.ts
export const first = 1
export const second = 2
const final = 3
export default final
You can then re-export them directly:
// index.ts
export * from './App'
You can now import these easily:
import final, { first, second } from './index'
Bonus #3: * import
You can import all variables exported by another file as a single variable.
// index.ts
import * as App from './App'
App.first === 1 // true
import App from './App';
export default App;
⬇
Babel 7 (with #babel/preset-react) can transform the below:
export { default as App } from './App.js';
Related discussions:
TC39 proposal:
https://github.com/tc39/proposal-export-default-from#common-concerns
The only working solution is :
import App from './App';
export default App;
If you export your module like this
export { default as App } from './App.js';
Then it's not a default export anymore and you'll get an error if you try to import it as a default import.
import App from './App';
export default (App);
This work for me in default 'create-react-app' application