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.
Related
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?
I am using Reactjs.NET within an MVC 5 project,
We have been able to combine Webpack with reactjs.net, but currently we are running into issues using external modules, for example (material-ui) within our react components directory. Since reactJs.NET doesn't support import we are trying to include those in the JSX components using the require statement, however we are getting a Script threw an exception: 'require' is undefined
any idea how we can include some of the modules that we have in our webpack bundle inside our jsx component?
this issue sounds like exactly what you're experiencing.
assuming you've gone through this page then maybe the problem is related to having npm installed webpack 2 which uses a different config. check out webpack's migration guide for info on that.
I am trying to implement elasticsearch.js in my project and when I added:
var elasticsearch = require('elasticsearch');
It broke my project and said require is not defined. I did research and saw that I would have to use a library called require.js within my project but that is changing my whole project structure just for one script.
I wanted to see if anybody knows how to call an instance without using require:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client();
You seem to be following the instructions for using elasticsearch in a node project or using a bundling system that supports CJS modules (like browserify or webpack). If you want a script that's for a browser-only project, see the Browser Builds page.
Note that at this time, they have this note:
These versions of the client are currently experimental.
You're using a version that should be used in a node project or through a module loader/bundler. The require keyword is node specific, the browser has no idea what to do with it. Require.js would help, you can also install Rollup or Webpack which would bundle the CJS (require) dependencies and your code into one file.
Or to be simple just go to https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/browser-builds.html as Jacob said
I am new to Javascript and am interested in using a library from github. I am using netbeans to code and I have installed node.js. However, I am still getting the error 'Require is not defined'. I have installed 'browserify' as this seemed like a common solution, but I am still getting this error.
Am I doing something wrong?
Image of set up libraries
Update
I have also found that there is a problem with one of my libraries, think it could be relevant to the original problem.
Problem with library
If you are developing NodeJS based project, you should use NodeJS project type in NetBeans where require() is considered as known global function and as such NetBeans won't show the hint.You can change your current project to enable NodeJS support by right clicking on the project, select Project Properties -> NodeJS and check Enable NodeJS support.
If you are using RequireJS library, you can also enable RequireJS support in Project Properties in JavaScript Frameworks -> RequireJS
I guess this is because require() does not exist in the browser/client-side JavaScript.Can you give it a try to following statements;
Use <script> tag.
Use a CommmonJS implementation. Synchronous
dependencies like Node.js
Use an AMD implementation.
And keep library codes and application codes seperated. ( bundle.js and script.js )
Browserify will take all the script files necessary and put them into the "bundle.js" file, so you should only have to include "bundle.js" in the HTML file, not the "script.js" file.
I'm trying to embed an EmberJS application into a large portal application which uses extensively the RequireJS library. I'm using ember-cli to build the project. The built application consists of two files, dist/assets/vendor.js and dist/assets/myapp.js. The EmberJS application works after embedding it but the portal app's javascript breaks.
After some research I've found out the problem is that vendor.js defines its own variables require, requirejs, requireModule and define which conflict with the website's variables in the global namespace. The myapp.js file then contains define statements which load the app's modules.
Is there a way to rename these or to put them into some different namespace?
The only solution I came up with was to manually rename the variables within the two .js files. This seems to work but it's rather cumbersome and it'd be nice if it could be automated. I have also found out about using RequireJS optimizer but I can't get it to work with the vendor.js file.
Can you help me?
Thanks!
I was having the same problem, and after much searching I believe I managed to solve it by adding the ember-derequire addon to my project:
ember install ember-derequire
That will change all of the 'require' and 'define' statements in your app to 'eriuqer' and 'enifed'. You can override what it maps to using options (caveat being you have to use something the same length) if you don't like eriuqer and enifed.
In case that doesn't help, the other promising thing I found is that loader.js has a noConflict() function, but I couldn't figure out where to put the loader.noConflict() call, or get the build to generate code using alternate names, but maybe it will help you if the first option doesn't work for your situation.
As #Bjornicus (https://stackoverflow.com/a/39088322/5056421) wrote, built-in loader.js's noConflict() function seems to work correctly. I placed it in main JS file (app.js):
window.loader.noConflict({
define: "emberDefine"
});
and define wasn't overridden (I import ember app to another app which uses SystemJS). But I've made only few tests, so I don't know if this does not break something later.