I have a js file with a require call which is too dynamic for Webpack to be analyzed. The file is from a dependency and there's no replacement for it (and I need that code in the bundle).
The error:
Cannot statically analyse 'require(..., ...)' in line 1822
How can I tell webpack "If file X fails, don't bother and continue"?
An improvement on that can be "If file X fails because it can't be statically analyzed, don't bother and continue".
I'm analyzing writing a plugin that can remove that piece of code and after compilation add it again (I will have requirejs loaded to resolve those requests), but it doesn't seem very easy, so I wanted to check if there's a simpler solution first.
Any pointers on how that plugin should look like would be appreciated too : )
Thanks!
Related
I'm using webpack 4.26.1 (latest).
The code import('./images/header.csv') produce the following error:
Uncaught (in promise) Error: Cannot find module './images/header.csv'
at webpackMissingModule (home.js:9)
My project structure:
'project-dir/src/components/home.js' (im here)
'project-dir/src/components/images/header.csv'
I tried to read https://webpack.js.org/api/module-methods/ but failed to understand what to do except adding random webpack comments which I don't understand.
Also, from the docs, I may be found the source of the problem but I'm not exactly sure I understand it and how to solve it.
Fully dynamic statements, such as import(foo), will fail because webpack requires at least some file location information. This is because foo could potentially be any path to any file in your system or project. The import() must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files.
Every module that could potentially be requested on an import() call is included. For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption. Using the webpackInclude and webpackExclude options allows us to add regex patterns that reduce the files that webpack will bundle for this import.
More than providing me a solution, I will appreciate any answer that covers what is the actual problem with my code.
Thank you.
In my project I have long used require.js together with the pdf.js library. Pdf.js have until recently been putting itself on the global object. I could still use it in my requirejs config by using a shim. The pdfjs library will in turn load another library called pdf.worker. In order to find this module the solution was to add a property to the global PDFJS object called workerSrc and point to the file on disk. This could be done before or after loading the pdfjs library.
The pdfjs library uses the pdf.worker to start a WebWorker and to do so it needs the path to a source file.
When I tried to update the pdfjs library in my project to a new version (1.5.314) the way to load and include the library have changed to use UMD modules and now everything get's a bit tricky.
The pdfjs library checks if the environment is using requirejs and so it defines itself as a module named "pdfjs-dist/build/pdf". When this module loads it checks for a module named "pdfjs-dist/build/pdf.worker". Since I have another folder structure I have added them to my requirejs config object with a new path:
paths: {
"pdfjs-dist/build/pdf": "vendor/pdfjs/build/pdf",
"pdfjs-dist/build/pdf.worker": "vendor/pdfjs/build/pdf.worker"
}
This is to make the module loader to find the modules at all. In development this works great. When I try to use the requirejs optimizer in my grunt build step however, it will put all of my project files into one single file. This step will try to include the pdf.worker module as well and this generates an error:
Error: Cannot uglify2 file: vendor/pdfjs/build/pdf.worker.js. Skipping
it. Error is: RangeError: Maximum call stack size exceeded
Since the worker source needs to be in a single file on disk I don't want this module to be included.
So I've tried two different config-settings in the requirejs config.
The first attempt was to override the paths property in my grunt build options:
paths: {
"pdfjs-dist/build/pdf.worker": "empty:"
}
The second thing to test is to exclude it from my module:
modules: [{
name: "core/app",
exclude: [
"pdfjs-dist/build/pdf.worker"
]
}]
Both techniques should tell the optimizer not to include the module but both attempts ended up with the same error as before. The requirejs optimizer still tries to include the module into the build and the attempt to uglify it ends up with a RangeError.
One could argue that since the uglify step fails it will not be included and I can go about my bussiness, but if the uglify step should happen to start working at a new update of pdfjs - what then?
Can anyone help me figure out why the requirejs config won't just exclude it in the build step and how to make it do so.
I found out what the core of my problem was and now I have a way to solve the problem and make my build process to work. My build step in grunt is using grunt-contrib-requirejs and I needed to override some options in the config for this job.
I didn't want the pdf.worker module to be included in my concatenated and minified production code.
I didn't want r.js to minify it only to later exclude it from the concatenated file.
I tried to solve the first problem thinking that it would mean that the second problem also should be solved. When I figured out the two were separate I finally found a solution.
In the r.js example on github there is a property named fileExclusionRegExp. This is what I now use to tell r.js not to copy the file over to the build folder.
fileExclusionRegExp: /pdf.worker.js/
Second, I need to tell the optimizer to not include this module in the concatenated file. This is done by overriding the paths property for this module to the value of "empty:".
paths: {
"pdfjs-dist/build/pdf.worker": "empty:"
}
Now my grunt build step will work without errors and all is well.
Thanks to async5 for informing me about the bug with uglify and the pdf.worker. The workaround is applied in another grunt task that uglify the worker and copies it into the build-folder separately. The options object for the grunt-contrib-uglify task will need this property in order to not break the pdf.worker file:
compress: {
sequences: false
}
Now my project works great when built for production.
So i have an angular application. With this application i have alot of plugins (modules) that i use in my app.
i am trying to minify them which actually works. However after they have been minified (uglifyed) im getting the following error:
failed to instantiate module app due to:
Due to: And then all the modules. (starting by the first loaded then moving on).
Does this mean that i am unable to minify angular modules. (which would basicly mean im stuck with a 1000 line long HTML file).
Explicit dependency injection
app.controller('myController',function(module1,module2){
//...
});
myController.$inject=['module1','module2'];
Inline annotation
app.controller('myController',['module1','module2',function(module1,module2){
//...
});
You're probably doing it wrong. As the AngularJs documentation specifies, when you are going to minify your files, you must specify the dependencies like this:
app.controller('$ctrl', ['dep1', 'dep2', function(dep1, dep2) {
// your code here
}]);
This way, when the files are minified, the dependencies are not modified. See the angularJs tutorial: https://docs.angularjs.org/tutorial/step_05#a-note-on-minification
No, this does not mean you cannot minnify the module files. You can achieve this.
Check to make sure the order in wich they are concatenated/minnified is correct, if for example module x uses something from module y and x is loaded after y, this will show the error.
If the problem is because of the way the modules are declared, you could install grunt-ng-annotate wich will, when run, change all module declarations to the desired format so that you do not receive the mentioned error.
npm install grunt-ng-annotate --save-dev
In my Angular JS app, I'm using a lot of third party packages, mainly maintained via Bower.
When I use Grunt to concatenate all of them into one mega file, I'm getting errors when I load my page, for example that
Uncaught ReferenceError: angular is not defined and
GET http://localhost:8080/theproj/v4/dist/app/bootstrap.css.map 404 (Not Found)
What is the best way to properly concatenate all these files to ensure that everything loads in the right order and doesn't cause problems?
First issue: A lot of times third party libraries must be loaded in a particular order. That looks like like it's the source of your first issue. Something is trying to use angular and it's getting loaded before the angular code. You should refactor your grunt task to use a pre-defined order for third party libraries.
Second issue: You probably are missing the .map file. This is a file used by Chrome dev tools to show you the original source for the css (sass or less). Either provide the map file, or delete the reference to it from bootstrap.css. Or just ignore the error, it's only an error when you have chrome dev tools open, and doesn't actually affect your application.
For the issue of the correct order for your javascript files, i had that problem in a larger project where noone really had a clue which was the correct order.
Luckily we found that the Google Closure Compiler does exactly this: https://github.com/google/closure-compiler
You give it all your js files and it analyzes them all and concatenates them in order
$ java -jar compiler.jar --js_output_file=out.js in1.js in2.js in3.js ...
There is even a grunt plugin for the connection: https://github.com/gmarty/grunt-closure-compiler
'closure-compiler': {
frontend: {
closurePath: '/src/to/closure-compiler',
js: 'static/src/frontend.js',
jsOutputFile: 'static/js/frontend.min.js',
maxBuffer: 500,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT'
}
}
},
Another way would be to change your javascripts into AMD or CommonJS modules, this way you don't have to worry about the correct order. RequireJS (http://requirejs.org/docs/start.html) is a possibility for AMD for example or Webpack (http://webpack.github.io/) ...or many many others.
Using the bundle feature of mvc4 courses
Uncaught SyntaxError: Unexpected token <
on loading. With debug="true" everything is works like excepted.
How can i solve the error or can i disable the bundle feature just for scripts?
Solved
Renamed the bundle name to not match up with any directory
Before you can answer the question of what caused this error, you must first figure out where the error occurred. The only difference in the syntax of your code when bundled is that it is minified. A very simple way to do this is to use a Bundle instead of a ScriptBundle:
var thirdParty = new Bundle("~/bundles/thirdParty").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.mockjson.js",
"~/Scripts/jQuery.XDomainRequest.js",
"~/Scripts/knockout-{version}.js"
);
thirdParty.Transforms.Clear();
bundles.Add(thirdParty);
Now, if you have multiple JavaScript bundles, do this for them one by one until you have the culprit bundle.
The only way that I've found to debug these issues is to take your bundle and split it in half to break it down further:
var thirdParty1 = new Bundle("~/bundles/thirdParty1").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-ui-{version}.js"
);
bundles.Add(thirdParty1);
var thirdParty2 = new ScriptBundle("~/bundles/thirdParty2").Include(
"~/Scripts/jquery.mockjson.js",
"~/Scripts/jQuery.XDomainRequest.js",
"~/Scripts/knockout-{version}.js"
);
bundles.Add(thirdParty2);
Notice that we've only disabled minification for one of the two bundles - thirdParty1. Be sure and update your #Scripts.Render to point to your new bundles. When you build and reload, you will either continue to get the error, or you won't, and will then know which half contains the troublesome code. But be sure and test it both ways, minifying thirdParty1 and unminifying thirdParty2 in my example and vice-versa to be certain something else isn't going on. You also might want to keep DevTools or whatever browser debugger you have open and look at the source of your bundles to ensure they are acting as expected.
Continue by moving the scripts from the minified bundle (thirdParty1 in my case) from the unminified bundle (thirdParty2) either one at a time or in chunks, if you have a lot of scripts. Remember to rebuild in-between, and be careful not to change the inclusion order of your scripts.
That should at least get you down to the file that has the issue - and hopefully searching for "<" will get you your answer.
Hope that helps.
His solution helped me, renaming the bundle to be different than the directory. I was grouping mine like so:
#Styles.Render("~/jqueryui")
#Scripts.Render("~/jqueryui")
There seems to be a bug when doing it this way with jquery UI styles. I just renamed the bundle to:
#Styles.Render("~/jqueryuiz")
#Scripts.Render("~/jqueryui")
and this fixed it for me. So the scripts don't seem to be affected in this way, nor do similar bundles, I have about 20 sets of bundles loaded and this is the only one causing issues.
My issue:
I reference script files in my Content folder but have a bundle name of ~Scipts. I renamed my bundle to ~DefaultScripts and that fix my issue. I didn't want to reference the Scripts folder, but it was going there instead of my Content folder.
bundles.Add(New ScriptBundle("~/Scripts").Include(
"~/Content/assets/global/plugins/jquery.min.js",
"~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js",
"~/Content/assets/global/plugins/js.cookie.min.js",
"~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
"~/Content/assets/global/plugins/jquery.blockui.min.js",
"~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
"~/Content/assets/global/scripts/app.js",
"~/Content/assets/layouts/layout2/scripts/layout.min.js",
"~/Scripts/custom.js"))
bundles.Add(New ScriptBundle("~/DefaultScripts").Include(
"~/Content/assets/global/plugins/jquery.min.js",
"~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js",
"~/Content/assets/global/plugins/js.cookie.min.js",
"~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
"~/Content/assets/global/plugins/jquery.blockui.min.js",
"~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
"~/Content/assets/global/scripts/app.js",
"~/Content/assets/layouts/layout2/scripts/layout.min.js",
"~/Scripts/custom.js"))