Is it possible to configure where WebStorm is looking for modules without adding the project itself as a library in the settings?
I have added the following part to webpack and compiling works fine, but I also need code completion
resolve: {
root: [
path.resolve('./asset/js')
]
},
Now I can change something like this:
import { ViewContainer } from './../../application';
to:
import { ViewContainer } from 'application';
But with this I have no code completion and adding /asset/js to the Library seems not to work. It also disables checking for errors on this directory.
WebStorm gives me the warning that no module 'application' is found in package.json
package.json only accept npm modules or git repositories
Do you have any solutions for this problem?
Right click on the directory and go to 'Mark Directory as' and select 'Resource Root'
Related
I have a Vue app created with vue create app and have the following settings in the babel.config file:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
My Vue config file also looks like this:
module.exports = {
configureWebpack: {
optimization: {
splitChunks: false
}
},
css: {
extract: false,
}
}
At the moment when I run vue-cli-service build it compiles all my modules and styles into 1 bundled JS file.
There is an issue however with one of my NPM modules: socket.io-client
It appears that the way that Vue is compiling my app, it is not transpiling something within this package which is causing syntax errors in Internet Explorer 11.
I am fairly sure the problematic code in socket.io-client lies with one of it's dependencies called debug.
What I would like to do is have this package (socket.io-client) also transpiled so that I don't get the error in IE11.
I would have thought that Vue CLI would do this out of the box when you run the build but perhaps something has been setup wrong in my babel or Vue configuration? How could I resolve this issue?
Thanks!
You can use transpileDependencies option in your vue.config.js.
By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
Example:
module.exports = {
...
transpileDependencies: [
'socket.io-client'
]
}
Found the issue here:
https://github.com/socketio/socket.io-client/issues/1328
Reverting the problematic package to previous version fixed it
I cannot post exact code due to NDAs, so I will do my best.
Javascript is not my string suit, but I took it up for my team.
Background:
I built a module which basically will perform a very simple task and can be imported as a dependency in other projects and then added into the project by adding the tag.
I wanted to keep this as lightweight as possible and let the app which was adding it in do the heavy lifting and have the imports to run and compile Angular code.
Code for SimpleApp:
Everything seems to work fine except for places marked with /* Potential Issue */
Within the simple module, I have a few file:
simpleApp.js -- the main js file which does the work necessary
simpleApp.html -- the html of simpleApp.js
innerProvider.js -- a module.service which does some work when called from the simpleApp.js -- this import seems to be the issue causer.
All within the companySimpleApp package:
simpleApp.js:
import angular from "angular"
/* I believe this to be the issue */
import innerProviderModule from "./pathToFile/innerProvider /* Potential Issue */
/* Potential Issue */
angular.module('simpleApp', [innerProviderModule]).component('simpleComponent, {
controller: ['$scope, 'innerProvider', ..., function($scope, innerProvider, ...) {
/* does work */
}],
template: require("./simpleApp.html"),
bindings: {
bind1: '#',
bind2: '#'
}
simpleApp.html:
<div>
do stuff
call stuff
</div>
innerProvider.js:
import angular from "angular"
const innerProviderModule = angular.module('innerProvider', [])
.service('innerProvider', function (%http, ...) {
this.doWork = function (param1) {
retStmt = doSomething(param1)
return retStmt
}
});
export default innerProviderModule.name;
Everything here builds correctly and will do as is told. I am able to build this package as well as the one which uses it and have a working webpage with the simpleApp's services. However, this is when I host everything myself.
Code for Larger Service using SimpleApp:
In another project I have this listed as a dependency "simpleApp = 1.0" this may be different than expected due to my company's internal workings, but this works.
It appears in the node_module directory
I then have a module for the webpage which loads in simpleApp and has all of the other packages like angular, babel, uglify, webpack, etc:
/* Potential Issue */
import "companySimpleApp/simpleApp.js"
export default angular
.module("app", [otherDependencies, simpleApp])
.config(function ($stateProvider, $stuff){
someMappingsForUrls
});
...
<script src="../node_modules/companySimpleApp/simpleApp.js"></script>
...
and another html and js file which use the simpleApp
<div>
<simpleApp bind1='{{value}}'></simpleApp>
</div>
Error:
Now, everything will run fine on my localhost and I can fully use the larger service using SimpleApp site with the simpleApp. However, when I build this (npm run webpack) on the service using simpleApp, I get the following error even though everything seems to run fine on my localhost:
ERROR in bundle.js from UglifyJs
Invalid assignment [bundle.js:146461,67]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # webpack: `webpack -p`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
........
The code seems to build when I remove the import innerProviderModule from "./pathToFile/innerProvider from simpleApp.js but I then get an error saying that innerProvider is an unresolved reference or something along the line.
What I am asking is for some help on why I may be seeing this error when I import the innerProviderModule I built. Do I need to add webpack and all that to my simpleApp project even though it all seems to run fine physically on my localhost?
Any help or ideas is very much so appreciated. Thanks!
Bumping this as I posted it late at night.
Edit: It seems to not like "=>" in the innerProvider which I have
I built the package which uses the simpleApp with 'webpack -p' which was not done on simpleApp. So, what it looked like that happened was that the simpleApp was not minified or something and didnt like a few lines in the provider code (ie: "=>", "let", etc...)
So instead of having the simpleApp have more dependencies, I simply wrote code which would pass webpack -p.
You should also be able to just remove the "-p" flag
Hope this helps someone.
I have Node.js project and the following structure of folders:
lib
awesome-formatter.js
FrontEndApp
prettify.js
node_modules
awesome-parser
BackEndApp
...
I use awesome-parser module and awesome-formatter.js library in prettify.js script like this:
require('awesome-parser')
require('../lib/awesome-formatter.js')
awesome-formatter.js, in turns, should use awesome-parser too:
require('awesome-parser')
My FrontEndApp has been configured to use Webpack, and I'm trying to run it in dev mode using npm run dev command. However, I got the following error:
ERROR Failed to compile with 1 errors
These dependencies were not found:
* awesome-parser in /home/user/dev/lib/awesome-formatter.js
I don't want to move awesome-formatter.js inside the FrontEndApp because I also use it in BackEndApp project (and probably in some other projects) and I don't want to create separate "node_modules" in "lib" for it just not to duplicate installed modules on disk.
So, my question is, how to make Webpack use project's "node_modules" in js scripts located outside the project folder?
P.S. Of course there are workarounds like symlinks or making a full-featured module (with package.json etc.) from lib/awesome-fromatter and installing it into FrontEndApp/node_modules, but is there a direct way to solve this problem?
I've found a solution: resolve.modules sould be added to Webpack configuration file.
module.exports = {
...
resolve: {
...
modules: [
'node_modules',
resolve('node_modules')
]
},
...
}
This means that Webpack is searching modules in 'node_modules' as a relative subfolder (and it's the usual behavior), and at the absolute path to the project's 'node_modules' as well: resolve('node_modules'), so that scripts in folders outside the project (like lib in my structure) can find and use it.
I am trying to use this with my webpack project
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
but I get this error
ReferenceError: __meteor_runtime_config__ is not defined
Here are the steps I did
create a new meteor project
then I run the client bundler like this
meteor-client bundle —source=./ —destination=./meteor-client.bundle.js —config=meteor-client.config.json
and here is the config
{
"runtime": {
"DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
},
"import": [
"meteor-base#1.3.0",
"mongo#1.4.2",
"reactive-var#1.0.11",
"jquery#1.11.10",
"tracker#1.1.3",
"shell-server#0.3.1",
"react-meteor-data"
]
}
then I copy my meteor-client.js to my webpack project node_modules
and import it like this
import 'meteor-client'
then I bundle webpack and run dev-server and I get the above mentioned error.
I had the same issue, and fixed that by putting my meteor-client.js to node_modules and exclude node_modules from processing by babel-loader with webpack (or you could just exclude meteor-client.js). Raw loading will workaround that.
In case someone still searching.
Recently i started playing with aurelia-framework and so far so good but when i edited config.js to add some of my files that are not installed via jspm things worked fine i was importing my scripts no errors but when i cloned to another machine and run jspm install it fails cause it does't like that i have other paths other than npm and github in my config.js
Configjs
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"lib:*": "lib/*",
"styles:*": "styles/*"
},
map: {
"app-styles": "styles:app-styles",
"uisearch": "lib:uisearch/uisearch#1.0.0",
"component": "lib:component/component",
"classie": "lib:classie/classie#2.0.0",
"material": "lib:material/material",
"ripples": "lib:ripples/ripples",
"bootstrap-select": "lib:bootstrap-select/bootstrap-select#1.7.2"
other deps...
}
Error Message
err Registry lib not found.
err Unable to load registry lib
warn Installation changes not saved.
Please help am new to this :)
Avoid making changes to the map section of your config.js by hand. Instead use the jspm command line interface to add packages. The jspm CLI will maintain your config.js for you. For example, to add classie to your project you would execute the following:
jspm install npm:desandro-classie
More information at jspm.io.
Note: you don't need to edit the config.js to enable importing javascript/css that is part of your project.
If I'm interpreting your original post correctly you have a lib folder containing a ripples subfolder which has a ripples.js file inside of it. You could access this "ripples" module like this:
import ripples from 'lib/ripples/ripples';
ripples.foo();
...