My file.js has some functions that I would like to reuse in several vue projects, specifically within App.vue
the file structure is:
-- projec1
---- src
------ App.vue
-- project2
---- src
------ App.vue
-- myfile.js
I can't import it directly like that
import * as alias from '../../myfile.js'
because the file path is not found during the production build
ERROR Failed to compile with 1 error3: 21: 38 PM
This relative module was not found: ../../myfile.js
Is there a simple way to do this? Something in package.json like
{
myLocalDependency: path/to/myFile.js
}
and in App.vue to be able to do
<script>
import myLocalDependency from '...'
export default {
mounted: {
myLocalDependency.myPreciousFunction()
}
}
</script>
if your file.js is not very complicated you can use Adding Instance Properties to your Vue.js application. for example in your main.js file you should do something like this:
function converter(){}
Vue.prototype.$converter = converter();
And then you can use it anywhere in your vue project just like this.$converter
Related
I published an npm package. The directory structure is something like the following:
my-package
└── js/script.js
└── index.js
The js/script.js file contains an object that is the name of my library, lets say elephant. Something like this:
var elephant = {
function_1: function() {
...
},
function_2: function() {
...
}
}
In my index.js file, I am exporting this like so:
import { elephant } from "./js/script.js";
module.exports = elephant;
Once I published and installed my package, I tried to pull it in my project using the following line of code:
const elephant = require('my-package');
elephant.function_1();
elephant.function_2();
However, unfortunately when I run my server (in a Vue project), I get the following error:
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
I assume this is referring to the third line in the index.js file. How can I fix this issue? How do I export my object variable and use it in my node project? Thanks for any help!
You can't mix import and module.exports
use export default elephant instead of module.exports = elephant;
I have a parent repository developed with React, and I have a child Sub Module inside of it(which is developed by react too):
The project folder structure is something like below:
parent
/.git
/nodemodule
/src
/subModules/childProject
/.git
/src
/js
/x.jsx // i want this file from parent project
/...
/...
I want to access and use the x.jsx component from parent project. I imported it like blow in my parent project:
import X from '../subModules/childProject/src/js/x.jsx'
but it gives me unexpected token!
7 | return (
> 8 | <article className="center">
| ^
9 | this is test global component with in child Project
10 | </article>
11 | )
it looks like that it cannot transform it because I wrote just a test function in old JavaScript way like:
export default function test(x) {
return x * 2
}
It imported without any error and works but when I wrote function in arrow style like below:
export default function test(x) => x * 2
it does not work. It seems like it's just a runtime error of transpiling modules, how can I transpile and import react components from child submodule in to parent repository?
The problem was that Babel does not know that there is a submodule project in the root of the project, just by changing my .babelrc file to babel.config.js and configuring it by babelrcRoots I would be able to solve the issue:
Now my babel.config.js file looks like this:
module.exports = {
"presets": [
"#babel/preset-react",
"#babel/preset-env"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread"
],
"babelrcRoots": [ "./", "./subModules/someFolder" ]
}
Now I can import any react component and JS modules from sub-repository in side my parent project and it works correctly.
.
Hi currently i m working in a monorepo application in react.
What i need is to extract some of its 'components' & 'styling' and create separate modules/packages that live outside of the main project, and import them into package.json like normal modules.
initial file structure and future proposal structure:
myMainproject:
\src
\components
component-styles.scss
\button
\label
\list
\item
.......
\modules
\calendar
\header
\footer
\support
.....
package.json
....
// I extract calendar, footer modules
calendarService:
\src
\components
component-styles.scss
\button
\label
\list
\item
.......
\modules
\calendar
.....
package.json
....
footerService:
\src
\components
component-styles.scss
\button
\label
\list
\item
.......
\modules
\footer
.....
package.json
....
// Extract style and create a separate service
styleService
\src
\styles
.....
package.json
....
final 'package.json' of 'myMainproject':
......
"dependencies": {
"calendarService": ...,
"footerService": .... ,
"styleService": ...,
.....
}
Do you have any ideas, not only technical but architectural also, or any doc to achieve that ?
Try to use Yarn workspaces, docs here
As per the design, for each of the React Module (Calendar, footer and style) that you want to create you'll also need to add an index.js file to the structure. You can name the file whatever you want. This is the file that will get executed when your module will get required.
You'll just have to export your components from the index.js file. In the package.json file of the separate React modules, you'll have to indicate the JS file that you want to execute when that module is required or imported. You do this by providing the name of the file for the main field in package.json
I've been using Python for my ML/DL projects. However, I recently started a project in JavaScript to visualize my works.
I would like to import modules (.js files) from the main.js for conciseness. (I had already checked [1], [2], [3] but couldn't get the right answer for my case.)
I have JS files like below which should be imported like this to put all the helper functions in util.js
main.js --> tree.js, polygon.js, graph.js, ... --> util.js
Currently, I am able to import the models from main.js like below. However, I am not able to import util.js module from the imported modules (tree.js, ...).
index.html
<script type="module" defer src="main.js"></script>
main.js
import Tree from './tree.js';
var tree = new Tree(...);
...
tree.js [QUESTION!]
import * as util from './util.js'; <-- ("This is not properly working")
util.helperFunc();
...
export default Tree;
util.js
function helperFunc() { ... }
export {helperFunc, ...};
1) Is the above structure violates the JavaScript / TypeScript convention? (It looks right to me as a Python user.)
2) How can I import util.js from tree.js (tree.js is imported from main.js)?
3) I saw a lot of answers which use node.js, is it not recommended to just use a simple server like below?
python3 -m http.server 8080
I am using Next.js for React. I like how Arc (other react boilerplate) dynamically imports components without requiring developer to specify path.
import { Input, Label, Field, HomePage, PageTemplate } from 'components'
Folder structure may look somewhat like this:
components
|_ index.js
|_ atoms
|_ Input
|__ index.js
|_ molecules
|_ organisms
|_ templates
and I'd like to import it like:
import { Input } from 'components'
Code that is used for dynamic import: components/index.js
const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/)
req.keys().forEach((key) => {
const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1')
module.exports[componentName] = req(key).default
})
However it doesn't work. The error I get:
Module not found: Error: Cannot resolve module 'components'...
The issue is that require.context is not available on serverside.
I suppose I need to specify this path to be imported like this in loader config. Can anybody share a hint on how is this done properly?
I don't think there is a simple and reliable way to do what you want with Next.js
The standard/"correct" answer is to use a relative path to import your local components. It is a bit more boilerplate, but I think you'll ultimately find it to be less work than fighting with Next.js to make it do things the Arc way.
To followup on #Robsonsjre's suggestion:
Why dont you make your /components/index.js export all components in the folder?
I think there is an implied "you write that index.js file". For your example, it would look something like this:
export {default as Input } from './atoms/Input';
export {default as Foo } from './molecules/Foo';
// etc
The catch is that you'd have to remember to update this file every time you add or remove a component. It's probably possible to automate that, but I'm not aware of any system to do it off the top of my head.
This way is not exactly what you want, but works similar, well for performance because its only object pointers to imported components
//Input.js
class Input extends Component {
render() {
return <div>'input'</div>
}
}
export default Input
//index.js
export { default as Input } from './Input/Input'
//otherComponent.js
import { Input } from './components' //path to folder components