I'm trying to import js library to use it in a Vue component.
From CDNs all js imports are working. But i can't use CDN for production.
if i use the way to import it globally i can see that my js file is replaced with html content... i guess it is because of a bad webpack config.
I also used the require('') way directly in my component but no success.
the only JS that is imported is app.js, but i can't find any config file that is calling this js or any webpack config that tells to merge js files in it...
i have a vue.config.js file like this i can't find any other config file for webpack in my project
module.exports = {
// proxy API requests to Valet during development
devServer: {
//proxy: 'http://api.mtm'
},
indexPath: 'public/index.html',
}
to import js file i've tried like this directly in my Vue component just after the export default {..
require('../../public/timer.js');
the error i have looks like that : TypeError: t is undefined
Related
How can I import an external file (config.js) from within a webpack bundle?
I have the following file-structure for local dev:
/dist/
/index.html
/plugin.js
/src/
/index.ts
/config.js # This config is only for local dev, will be different in prod
/ ...
The plugin.js will be moved to and executed by a third-party website.
I want to import the config.js (which will in production be provided by the third-party website) inside my plugin.js.
I import the config.js in index.ts like this:
import config from "../config.js";
I have managed to exclude the config.js from plugin.js by specifing it in the externals-field in the webpack.config.js which is working so far:
module.exports = {
...
externals: [
"../config.js"
]
}
When I open index.html however, the import statement from ../config.js is not getting an error but the config-object file is undefined.
The file structure of the third-party server in prod looks like this:
/ ... /
/plugins/
/other-plugin/... # A bunch of other plugins. Each has its own folder in plugins
/my-plugin/
plugin.js # This is my plugin
/config.js # This is the global config file of the server for all plugins
index.ts:
import config from "../config.js";
console.log(config);
config.js:
module.exports = {
foo: "bar"
}
The externals implies that whatever that was exported by config.js file would be available at runtime. So for browser, that means, you have probably already injected it via script tag or for Node.js, it is already imported via globalThis or some equivalent. Your import line - import config from "../config.js"; is simply gone when the code is bundled. The external doesn't mean that it would re-import config.js when the code is being run Additionally, the general practice is to use external object configuration instead of array configuration like:
module.exports = {
// ...
externals: {
"../config.js": "AppConfig"
}
};
This tells Webpack that whatever was exported by config.js file should be available as AppConfig object at runtime. Using array syntax is meant for code with side-effects.
Now coming back to possible solution. The recommended option is to use environment variables for passing the environment specific values. Assuming your plugin is a library, when it is being consumed and getting bundled as part of application via Webpack, you can make use of DefinePlugin to inject these values into your code. You can then access those in your code as process.env.foo. You should not import config.js in your code anywhere.
The second option is to use externals with object configuration as shown above. Change your config.js file to UMD or equivalent:
// config.js file
const config = {
foo: "bar"
};
// Make it available globally
window.AppConfig = config;
// Since `module` is not available in browser.
if (module && module.exports) {
module.exports = config;
}
And finally, import your config.js in index.html file before your bundled script gets loaded.
<head>
<script src="/path/to/config.js>"></script>
<script src="/path/to/bundle.js>"></script>
</head>
There maybe some documentation out there on how to deal with this situation but i don't even know how to look for it.
Here's the deal, we have a Symfony "module" (ex Bundle) company-made that we share across multiple projects. Atm it is not listed on packagist and we require it with local composer repository paths if that matters.
Inside the shared module we have some css and some js that needs to be included. Since one of those shared-module (or bundle, w/e you want to call it) has bootstrap (the css frontend toolkit) the module itself requires it together with his css.
Inside the shared module we have a JS file "CoreLibrary.js" and we import the required js like this:
import $ from 'jquery';
import 'bootstrap';
export class CoreLibrary {
... more code
}
Then, inside the main application we include the common js file from the app.js file like this:
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';
That doesn't seem to be ideal, and beside that, with encore we have to repeat
import $ from 'jquery';
import 'bootstrap';
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';
In every .js file we need. That's so much of a burden that I can't belive there are no better ways do to that.
Sidenote: not so long ago i had to even follow this one:
Yarn and Webpack Encore configuration in Symfony 4.1 project because i was getting error during "yarn watch".
What is the correct way of doing it with company-shared module that requires 3rd party library like bootstrap?
For global jquery i have this in main js file
const $ = require('jquery');
global.$ = global.jQuery = $;
Also uncommented line in webpack config about jquery.
I want to use https://github.com/ueberdosis/tiptap in my Laravel app.
I did an npm install #tiptap/core #tiptap/starter-kit and the modules are installed fine and visible in my node_modules folder. Then, I added
import { Editor } from '#tiptap/core'
import StarterKit from '#tiptap/starter-kit'
to my resources/js/apps.js and ran an npm run dev. I can see some tiptap code in my public/js/app.js file.
I would like to instantiate a tiptap class from another public JS file:
which didn't come out of webpack
which I declared with a <script type="module" src="{{ asset('js/tiptap.js') }}"></script> in my Blade file
which contains following:
import { Editor } from '#tiptap/core'
import StarterKit from '#tiptap/starter-kit'
new Editor({
element: document.querySelector('.element'),
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
but I just get a Uncaught TypeError: Failed to resolve module specifier "#tiptap/core". Relative references must start with either "/", "./", or "../". in the console.
So yeah, wrong path for the import most likely. I tried to change it to './app.js#tiptap/core' and other variations but always end up with a 404 Not found.
I feel like I'm maybe doing the wrong way maybe, I don't know. Would you guys have any tips on how to do that ?
You can't access a package from outside because when webpack built it for you it encapsulates the file as a bundle so to be able to access it you could create another js file in the resources/js after that include it inside the app.js to be bundled with webpack like this
// hello.js
console.log("welcome from hello script")
// app.js
require('./hello.js')
I have a JS app which is importing a custom node_module with helper functions etc. I'd like to import these functions using ES6 imports like so:
import exampleHelper from 'mycustommodule/helpers/foo'
and have Webpack just import this file as though it was any other include in the app. ie Use the same babelrc, webpack config, package.json as the existing app.
At the moment none of the imports in the custom module are resolving.
I've looked into Webpack externals but I can't work out if they are what I'm looking for. Any advice would be appreciated.
I am working on an addon for Ember but I can't find the right way to import the config file.
I currently import the config file that way, from my service:
import ENV from '../config/environment';
I am testing the addon from the dummy/app folder, but when I try to use my service, I get the following error:
Uncaught Error: Could not find module
ember-my-addon/config/environment imported from
ember-my-addon/services/my-service
It should grab the config file from the dummy/app/config/environment.js, or the config file of the app that installed the addon.
What would be the best practice to import this file?
You can use the addon ember-get-config
Alternatively, you can use the solution posted here:
http://discuss.emberjs.com/t/best-practices-accessing-app-config-from-addon-code/7006/19?u=gaurav0