I have some package on the node modules that have a package.json
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/{moduleName}/index.js",
"types": "./index.d.ts"
}
When vite trying to build it throw the error
[commonjs--resolver] Failed to resolve entry for package "/drone/src/node_modules/{module}/core/node_modules/#mui/material/LinearProgress". The package may have incorrect main/module/exports specified in its package.json: ENOENT: no such file or directory, lstat '/drone/src/node_modules/{module}/core/node_modules/#mui/material/LinearProgress/index.js'
error during build:
My vite config is
import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
export default defineConfig({
build: {
assetsInlineLimit: 2048,
rollupOptions: {
external: ['react', 'react-dom'],
output:{
globals: {
react: 'React',
'react-dom': 'ReactDom'
},
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
},
plugins: [RubyPlugin()],
});
I find this Solution, but I can't remove it from the package.json
How can I solve this problem ?
If you are using the vite bundler, you can resolve it with an alias using https://vitejs.dev/config/shared-options.html#resolve-alias
Ex:
resolve: {
alias: [
{
find: /#mui\/material/,
replacement: path.resolve(__dirname, 'node_modules', '#mui', 'material'),
},
],
},
I'm using typescript and angular2 and I want to use SockJS in my project. I run: npm install sockjs-client. Now I want to add mapping of node_modules/sockjs-client in systemjs.config.js. It is how the file looks now:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'sockjs-client': 'npm:sockjs-client',
'stompjs': 'npm:stompjs/lib/stomp.min.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
And I've the following exception in the browser:
localhost/:16 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/sockjs-client(…)
What is the proper systemjs mapping for sockjs-client library?
Try:
'sockjs-client': 'npm:sockjs-client/dist/sockjs.js'
I have installed new version RC Angular 2. Everything works fine, but my requests for angular dependencies are very bad. I understand, then system js is loading this dependencies asynchronous, but I have still 285 requests! Is it all really needed? Complete transferred is about 3.3MB, it is very bad for me. I there way, how to do it more efficiently?
Here is my System JS config:
(function (global) {
// map tells the System loader where to look for things
var map = {
'input': '/js/components', // 'dist',
'rxjs': '/rxjs',
'angular2-in-memory-web-api': '/angular2-in-memory-web-api',
'#angular': '/#angular',
'primeng': '/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'input': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
// meta tells the System loader how to load dependencies. In this case for custom scripts it is Global -> <script ... />
var meta = {
'/js/javascript.min.js': { format: 'global' },
'/js/angularDep.min.js': { format: 'global' }
}
var packageNames = [
'#angular/core',
'#angular/platform-browser-dynamic',
'#angular/compiler',
'#angular/platform-browser',
'#angular/common'
// '#angular/compiler',
// '#angular/core',
// '#angular/http',
// '#angular/platform-browser',
// '#angular/platform-browser-dynamic',
// '#angular/router',
// '#angular/router-deprecated',
// '#angular/testing',
// '#angular/upgrade'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages,
meta: meta
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
angularDep bundle
paths.documentRoot + "scripts/vendor/es6-shim/es6-shim.js",
paths.documentRoot + "scripts/vendor/zone.js/zone.js",
paths.documentRoot + "scripts/vendor/reflect-metadata/Reflect.js",
All bundles I have minified, but network trafic still look like this:
Thanks for your time.
Using systemjs-builder with Gulp you can bundle Angular 2 with your app code and bundle your other libraries separately.
I bundled any library I would reference directly in HTML into a vendors.min.js, and any library referenced through my system.config.js plus app code into an app.min.js. In this example you can see that all the dependencies in Tour of Heroes are loaded into the page in <10 network requests (source code).
gulpfile.js
// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
return gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/semantic-ui/dist/semantic.min.js',
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/es6-promise/dist/es6-promise.min.js',
'node_modules/systemjs/dist/system.src.js',
'system.config.js',
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/lib/js'));
});
// Compile TypeScript to JS
gulp.task('compile:ts', function () {
return gulp
.src([
"src/**/*.ts",
"typings/*.d.ts"
])
.pipe(tsc({
"module": "system",
"moduleResolution": "node",
"outDir": "public/dist/js",
"target": "ES5"
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('public/dist'));
});
// Generate systemjs-based builds
gulp.task('bundle:js', function() {
var builder = new sysBuilder('public', './system.config.js');
return builder.buildStatic('app', 'public/dist/js/app.min.js');
});
// Minify JS bundle
gulp.task('minify:js', function() {
return gulp
.src('public/dist/js/app.min.js')
.pipe(uglify())
.pipe(gulp.dest('public/dist/js'));
});
gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);
system.config.js
// map tells the System loader where to look for things
var map = {
'app': 'dist/js',
'rxjs': 'lib/js/rxjs',
'zonejs': 'deps/zone.js/dist',
'crypto': '#empty',
'reflect-metadata': 'lib/js/reflect-metadata',
'#angular': 'lib/js/#angular',
'ng2-translate': 'lib/js/ng2-translate',
'angular2-infinite-scroll': 'lib/js/angular2-infinite-scroll',
'lodash': 'lib/js/lodash',
'moment': 'lib/js/moment',
'angular2-moment': 'lib/js/angular2-moment',
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zonejs': { main: 'zone', defaultExtension: 'js' },
'reflect-metadata': { main: 'Reflect', defaultExtension: 'js' },
'moment': { main: 'moment', defaultExtension: 'js' },
'angular2-moment': { main: 'index', defaultExtension: 'js' },
'angular2-infinite-scroll': { main: 'angular2-infinite-scroll', defaultExtension: 'js' },
'lodash': { main: 'index', defaultExtension: 'js' },
'ng2-translate': { main: 'ng2-translate', defaultExtension: 'js' },
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
System.config({
map: map,
packages: packages
});
I'm trying to run grunt on a new machine and it won't compile.
The error I'm receiving is:
Running "requirejs:compile" (requirejs) task { [Error: Error: ERROR: module path does not exist: /Volumes/Users/dtdtdg/assets/js/src/../../../bower_components/almond/almond.js for module named: ../../../bower_components/almond/almond. Path is relative to: /Volumes/Users/dtdtdg
at /Volumes/Users/dtdtdg/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:26824:35 ] originalError: [Error: ERROR: module path does not exist: /Volumes/Users/dtdtdg/assets/js/src/../../../bower_components/almond/almond.js for module named: ../../../bower_components/almond/almond. Path is relative to: /Volumes/Users/dtdtdg] }
I've run sudo npm install -g bower-installer and sudo npm install -g bower just to ensure I'm not missing any packages on this machine. Still no luck.
My grunt file is as follows:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'copy',
'sass',
'requirejs'
]);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
cwd: 'bower_components/foundation/css/',
src: '*',
dest: 'assets/css/vendor/foundation/',
expand: true,
rename: function(dest, src) {
return (dest + src).replace('.css', '.scss');
}
}
},
requirejs: {
compile: {
options: {
baseUrl: 'assets/js/src',
include: ['require-main'],
mainConfigFile: 'assets/js/src/require-main.js',
name: '../../../bower_components/almond/almond',
out: 'assets/js/build/app.js'
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/build/styles.css': 'assets/css/src/manifest.scss'
}
}
},
watch: {
css: {
files: ['assets/css/src/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
//scripts:{
//files:['assets/js/src/**/*.js'],
//tasks:['requirejs']
//}
}
});
};
Ok I've now fixed this by running bower install almond but now have the following error:
Running "requirejs:compile" (requirejs) task
Error: ENOENT, no such file or directory '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js'
In module tree:
require-main
{ [Error: Error: ENOENT, no such file or directory '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js'
In module tree:
require-main
at Object.fs.openSync (fs.js:438:18)
]
originalError:
{ [Error: ENOENT, no such file or directory '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js']
errno: 34,
code: 'ENOENT',
path: '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js',
syscall: 'open',
fileName: '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js',
moduleTree: [ 'require-main' ] } }
My fault - I had assets/js/src/routers/router.js renamed.
I am trying to use the 'typestring' npm module with browserify but get the following error in the Chrome console:
Uncaught Error: Cannot find module 'typescript-api'
I see that 'typescript-api' is a dependency of typestring and it does appear in the node_modules folder of 'typestring'...
Am i missing something? My grunt-browserify task is:
browserify: {
dist: {
files: {
'./public/bundle.js': './public/main.js'
},
options: {
commondir: true,
bundleOptions: {
debug: true
},
transform: ['deamdify']
}
}
},