This might be really obvious but i've not come across the problem yet and i'm not sure what to search to fix it. I am using webpack and gulp, and i've ran into a bit of a problem when it comes to including external js plugins.
Using this one as an example
JQuery Vegas.
I want to use the package via npm, but the issue is that the plugin itself doesn't export as a module to just require it and use it. The only way of including it is importing the whole file and just including it in my javascript file, essentially like copying and pasting the plugin code inside my js file.
import "vegas";
The code is included in my js file, I can see its there when I inspect the compiled file in my developer tools. The issue comes with webpack requiring functions to be declared on the window (Basic webpack not working for button click function - Uncaught Reference error: undefined)
As the function inside the npm package is not declared on the window object, I always get function is undefined. What is the best way to include npm code (that is not exported as a module) into my file that is compiled using webpack?
Related
I'm trying to add typescript to existing javascript project.
So if I run tsc, I get same working project in build folder with no issues.
Now I want to start adding typescript files
If I add one, and try to import it in existing javascript file like this:
require('./myNewTypescriptFile.ts').initialize();
And try to transpile and run project, I get syntax errors which indicate, that my typescript file is being interpreted as javascript. Even though in my build folder I can see, that there is proper transpiled myNewTypescriptFile.js file.
If I change my require to
require('../build/myNewTypescriptFile').initialize();
Now even the new file seems to work, but I'm forced to use this strange path.
Is this how typescript migration is supposed to work or am I missing something?
EDIT This project is on nodejs and written using commonjs module syntax, so I can't use import in javascript file, unless I rewrite all imports on all files which is a no go at the moment.
I run project using npm start which calls:
"nodemon build/index.js"
So, I want to use the Halfmoon framework in a personal project and I have it downloaded via npm. In order to use the Javascript it shows as an example (in this page https://www.gethalfmoon.com/docs/download/#using-npm) to import the library with a require statement.
var halfmoon = require("halfmoon");
halfmoon.onDOMContentLoaded();
I was hoping to bundle this code with any future Javascript files into one large scripts.js file, but require statements do not work in browsers.
Browserify seemed like a good option, but there is no up-to-date plugin for gulp. Ran into similar issues with Rollup where the gulp plugin was problematic.
My hope was to have a gulp function structured like this:
function bundle() {
return gulp.src('./src/js/main.js')
.pipe(theFunctionThatMakesItWork())
.pipe(gulp.dest('./static/js'));
}
I am not completely attached to doing this in gulp but that would be my preference.
I am not entirely sure if this will work, but you could probably try downloading the halfmoon.js file on Github. It is different from the one in npm, mainly that it is meant to run using the <script> tag, and doesn't need the require statement.
Link to the file on Github: https://github.com/halfmoonui/halfmoon/blob/master/js/halfmoon.js
Edit: Also, on this file, the halfmoonOnDOMContentLoaded() is run automatically when the DOM is loaded.
We have several websites, each in its own project, and we are looking to migrate them all to using Vue.js. Each website has its own directory with .vue files that are then bundled using Webpack. We have a Webpack config in place that converts the .vue files, bundles, lints and pipes it all through babel and it works fine.
However, now that we have been moving things over for several weeks we have noticed that there are several components and core javascript files that are very similar and ideally we want to pull these out into a shared library of vue components and functions.
We have extracted several .vue into a folder alongside the websites, and put them together as a basic npm module with its own package.json, and include them using an npm file include, so in the package.json it just looks like: "vue-shared": "file:../CommonJavascript/Vue". Now when we try to use Webpack to build the bundle, we get the error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
I'm not sure where this error is coming from, because we aren't using react anywhere, and it seemed happy enough to build fine before we moved the files out. At the moment the only dependency in the shared module is moment, and it only contains 4 .vue, and a basic wrapper to bundle them up:
import button from 'Button.vue'
import loading from 'Loading.vue'
import modal from 'Modal.vue'
import progressBar from 'ProgressBar.vue'
export default {
button,
loading,
modal,
progressBar,
}
But, I was curious so I decided to add the package (even though we don't need it) to see if it would fix the issue, but I then get a new error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\Projects\Tmo\Code\CommonJavascript\Vue"
Now, that one makes a little more sense, we do use the babel runtime transform on the main project, but it isn't required by anything in the shared project and even if it was, surely the fact it is included in the main project means it should still build.
Partly, it seems perhaps I'm just not understanding the way npm resolves dependencies. It seems to be trying to now resolve some dependencies by looking in the shared files project and I dont know why. Also I have no idea where this strange dependency on eslint-plugin-react has come from.
So I guess this is a multi-part question. What is up with the way npm is trying to resolve the dependencies? Am I doing things right by moving the .vue files into a separate project, wrapping it up as a module and requiring it in the main project? and if not, what is the best way to have shared dependencies like this?
This was caused by a mixture of two separate issues:
The import statements didn't reference the file properly, the correct syntax is: import button from './Button.vue' (note the change to file path)
When you add a local package to npm via a path, it creates a symlink to the folder rather than copying the files over (this has been the behaviour since npm v5+). This then changes the way webpack tries to resolve dependencies since it then looks up from the location of the shared files to try and resolve dependencies including thing like eslint and babel.
The eslint-plugin-react dependency was because in visual studio code I had installed the eslint plugin, which it seems had created a .eslintrc file which reference the react plugin in my user folder (c:\users\<username>). Eslint will then use this as the default if it can't find a config file (which it couldn't because it was looking above the shared files because of the pathing issues described above)
We have decided we will be using a git submodule for these files going forward
I'm a Webpack beginner who is trying to refactor an old JavaScript/jQuery application by decomposing it in several ES6 module usign Webpack and Babel.
So far i've managed to refactor the core components of the application, but now i'm stucked with a module that requires jQuery (v2.2) and another library ( BIMsurfer #V1) available on the global scope.
The problem is that the BIMsurfer library isn't designed as a module and uses Grunt to produce a minified file.
I've seen that i could use the webpack.ProvidePlugin but i'm getting this error:
TypeError: $.extend is not a function [bimsurfer.js:14]
I've created a GitHub repo with the minimal code to reproduce the error.
My goal is to produce a single bundle with my JavaScript library that can be re-used in several application.
Downloaded your repo and did some test. The webpack config is fine. But there are other problems you need to fix.
the src/libs/jquery.js file is empty.
in the src/libs/bimsurfer/bimsurfer.js file, at line 15015 and 22438, the declaration of WebGLDebugUtils and SceneJS_PubSubProxy are missing the var keyword.
once you fix these two problem, you should be able to see a clean console in chrome devtool.
I'm trying to build the material-ui (material-ui.com) javascript so that I can include it in my project and use the react components. I've been using browserify to bundle all the javascript into a single file, which I then include in my HTML file. So, in the material-ui/lib directory (which is where the JSX-transformed JS seems to live -- I'm very new to NPM bundles + browserify etc), I run
browserify index.js -o material-ui.js -r material-ui
I then include that material-ui.js file in my HTML.
But then when I try writing require('material-ui') in my javascript in the HTML page I get "Cannot find module 'material-ui'".
I don't really understand what browserify is meant to be doing, what the require function is doing, and how I'm meant to reference any of the material-ui react classes. Thanks!
So I just managed to solve this. Browserify was creating a require() function but not the material-ui module because I was calling it from the wrong directory. Calling it from the npm's module root without specifying a starting .js point somehow made it actually work, allowing me to use require('material-ui') without any errors.