I want jspm to install to a different directory (wwwroot), so it needs to put it's config.js and jspm_packages folder there. But I want config.js to not include wwwroot because when you're on the website, that is the root () and when it looks for wwwroot\jspm_packages, it is unable to find them. Is there any way to do this?
package.json
{
"name": "angular2-aspnetcore-starter",
"version": "1.0.0",
"description": "Angular2 with Asp.net Core starter kit.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ryan Langton",
"license": "ISC",
"jspm": {
"directories": {
"packages": "wwwroot/jspm_packages" // <- need wwwroot for jspm install
},
"configFile": "wwwroot/config.js", // <- need wwwroot for jspm install
"dependencies": {
"angular2": "npm:angular2#2.0.0-beta.1",
"angular2-polyfill": "npm:angular2-polyfill#^0.0.1",
"es6-shim": "github:es-shims/es6-shim#^0.34.1",
"reflect-metadata": "npm:reflect-metadata#0.1.2",
"rxjs": "npm:rxjs#5.0.0-beta.0",
"zonejs": "npm:zone.js#^0.5.10"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
},
"devDependencies": {
"angular2": "2.0.0-beta.1",
"del": "^2.2.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.13",
"gulp": "~3.9.0",
"gulp-typescript": "~2.10.0",
"gulp-watch": "~4.3.5",
"jspm": "^0.16.24",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "^0.5.10"
}
}
config.js
This file is created by the "json install" command which is part of the build process.
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "wwwroot/jspm_packages/github/*", // <-- this is wrong, do not want wwwroot here!
"npm:*": "wwwroot/jspm_packages/npm/*" // <-- this is wrong, do not want wwwroot here!
},
map: {
"angular2": "npm:angular2#2.0.0-beta.1",
"angular2-polyfill": "npm:angular2-polyfill#0.0.1",
"babel": "npm:babel-core#5.8.34",
"babel-runtime": "npm:babel-runtime#5.8.34",
"core-js": "npm:core-js#1.2.6",
"es6-shim": "github:es-shims/es6-shim#0.34.1",
"reflect-metadata": "npm:reflect-metadata#0.1.3",
"rxjs": "npm:rxjs#5.0.0-beta.0",
"zonejs": "npm:zone.js#0.5.10",
"github:jspm/nodelibs-assert#0.1.0": {
"assert": "npm:assert#1.3.0"
},
"github:jspm/nodelibs-buffer#0.1.0": {
"buffer": "npm:buffer#3.6.0"
},
"github:jspm/nodelibs-constants#0.1.0": {
"constants-browserify": "npm:constants-browserify#0.0.1"
},
"github:jspm/nodelibs-crypto#0.1.0": {
"crypto-browserify": "npm:crypto-browserify#3.11.0"
},
"github:jspm/nodelibs-events#0.1.1": {
"events": "npm:events#1.0.2"
},
"github:jspm/nodelibs-path#0.1.0": {
"path-browserify": "npm:path-browserify#0.0.0"
},
"github:jspm/nodelibs-process#0.1.2": {
"process": "npm:process#0.11.2"
},
"github:jspm/nodelibs-stream#0.1.0": {
"stream-browserify": "npm:stream-browserify#1.0.0"
},
"github:jspm/nodelibs-string_decoder#0.1.0": {
"string_decoder": "npm:string_decoder#0.10.31"
},
"github:jspm/nodelibs-util#0.1.0": {
"util": "npm:util#0.10.3"
},
"github:jspm/nodelibs-vm#0.1.0": {
"vm-browserify": "npm:vm-browserify#0.0.4"
},
"npm:angular2-polyfill#0.0.1": {
"angular": "npm:angular#1.4.9",
"camelcase": "npm:camelcase#2.0.1",
"dot-prop": "npm:dot-prop#2.2.0"
},
"npm:angular2#2.0.0-beta.1": {
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"es6-promise": "npm:es6-promise#3.0.2",
"es6-shim": "npm:es6-shim#0.33.13",
"process": "github:jspm/nodelibs-process#0.1.2",
"reflect-metadata": "npm:reflect-metadata#0.1.2",
"rxjs": "npm:rxjs#5.0.0-beta.0",
"zone.js": "npm:zone.js#0.5.10"
},
"npm:angular#1.4.9": {
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:asn1.js#4.3.0": {
"assert": "github:jspm/nodelibs-assert#0.1.0",
"bn.js": "npm:bn.js#4.6.4",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"inherits": "npm:inherits#2.0.1",
"minimalistic-assert": "npm:minimalistic-assert#1.0.0",
"vm": "github:jspm/nodelibs-vm#0.1.0"
},
"npm:assert#1.3.0": {
"util": "npm:util#0.10.3"
},
"npm:babel-runtime#5.8.34": {
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:browserify-aes#1.0.5": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"buffer-xor": "npm:buffer-xor#1.0.3",
"cipher-base": "npm:cipher-base#1.0.2",
"create-hash": "npm:create-hash#1.1.2",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"evp_bytestokey": "npm:evp_bytestokey#1.0.0",
"fs": "github:jspm/nodelibs-fs#0.1.2",
"inherits": "npm:inherits#2.0.1",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:browserify-cipher#1.0.0": {
"browserify-aes": "npm:browserify-aes#1.0.5",
"browserify-des": "npm:browserify-des#1.0.0",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"evp_bytestokey": "npm:evp_bytestokey#1.0.0"
},
"npm:browserify-des#1.0.0": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"cipher-base": "npm:cipher-base#1.0.2",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"des.js": "npm:des.js#1.0.0",
"inherits": "npm:inherits#2.0.1"
},
"npm:browserify-rsa#4.0.0": {
"bn.js": "npm:bn.js#4.6.4",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"constants": "github:jspm/nodelibs-constants#0.1.0",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"randombytes": "npm:randombytes#2.0.2"
},
"npm:browserify-sign#4.0.0": {
"bn.js": "npm:bn.js#4.6.4",
"browserify-rsa": "npm:browserify-rsa#4.0.0",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"create-hash": "npm:create-hash#1.1.2",
"create-hmac": "npm:create-hmac#1.1.4",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"elliptic": "npm:elliptic#6.1.0",
"inherits": "npm:inherits#2.0.1",
"parse-asn1": "npm:parse-asn1#5.0.0",
"stream": "github:jspm/nodelibs-stream#0.1.0"
},
"npm:buffer-xor#1.0.3": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:buffer#3.6.0": {
"base64-js": "npm:base64-js#0.0.8",
"child_process": "github:jspm/nodelibs-child_process#0.1.0",
"fs": "github:jspm/nodelibs-fs#0.1.2",
"ieee754": "npm:ieee754#1.1.6",
"isarray": "npm:isarray#1.0.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:cipher-base#1.0.2": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"inherits": "npm:inherits#2.0.1",
"stream": "github:jspm/nodelibs-stream#0.1.0",
"string_decoder": "github:jspm/nodelibs-string_decoder#0.1.0"
},
"npm:constants-browserify#0.0.1": {
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:core-js#1.2.6": {
"fs": "github:jspm/nodelibs-fs#0.1.2",
"path": "github:jspm/nodelibs-path#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:core-util-is#1.0.2": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0"
},
"npm:create-ecdh#4.0.0": {
"bn.js": "npm:bn.js#4.6.4",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"elliptic": "npm:elliptic#6.1.0"
},
"npm:create-hash#1.1.2": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"cipher-base": "npm:cipher-base#1.0.2",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"fs": "github:jspm/nodelibs-fs#0.1.2",
"inherits": "npm:inherits#2.0.1",
"ripemd160": "npm:ripemd160#1.0.1",
"sha.js": "npm:sha.js#2.4.4"
},
"npm:create-hmac#1.1.4": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"create-hash": "npm:create-hash#1.1.2",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"inherits": "npm:inherits#2.0.1",
"stream": "github:jspm/nodelibs-stream#0.1.0"
},
"npm:crypto-browserify#3.11.0": {
"browserify-cipher": "npm:browserify-cipher#1.0.0",
"browserify-sign": "npm:browserify-sign#4.0.0",
"create-ecdh": "npm:create-ecdh#4.0.0",
"create-hash": "npm:create-hash#1.1.2",
"create-hmac": "npm:create-hmac#1.1.4",
"diffie-hellman": "npm:diffie-hellman#5.0.1",
"inherits": "npm:inherits#2.0.1",
"pbkdf2": "npm:pbkdf2#3.0.4",
"public-encrypt": "npm:public-encrypt#4.0.0",
"randombytes": "npm:randombytes#2.0.2"
},
"npm:des.js#1.0.0": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"inherits": "npm:inherits#2.0.1",
"minimalistic-assert": "npm:minimalistic-assert#1.0.0"
},
"npm:diffie-hellman#5.0.1": {
"bn.js": "npm:bn.js#4.6.4",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"miller-rabin": "npm:miller-rabin#4.0.0",
"randombytes": "npm:randombytes#2.0.2",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:elliptic#6.1.0": {
"bn.js": "npm:bn.js#4.6.4",
"brorand": "npm:brorand#1.0.5",
"hash.js": "npm:hash.js#1.0.3",
"inherits": "npm:inherits#2.0.1",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:es6-promise#3.0.2": {
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:es6-shim#0.33.13": {
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:evp_bytestokey#1.0.0": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"create-hash": "npm:create-hash#1.1.2",
"crypto": "github:jspm/nodelibs-crypto#0.1.0"
},
"npm:hash.js#1.0.3": {
"inherits": "npm:inherits#2.0.1"
},
"npm:inherits#2.0.1": {
"util": "github:jspm/nodelibs-util#0.1.0"
},
"npm:miller-rabin#4.0.0": {
"bn.js": "npm:bn.js#4.6.4",
"brorand": "npm:brorand#1.0.5"
},
"npm:parse-asn1#5.0.0": {
"asn1.js": "npm:asn1.js#4.3.0",
"browserify-aes": "npm:browserify-aes#1.0.5",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"create-hash": "npm:create-hash#1.1.2",
"evp_bytestokey": "npm:evp_bytestokey#1.0.0",
"pbkdf2": "npm:pbkdf2#3.0.4",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:path-browserify#0.0.0": {
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:pbkdf2#3.0.4": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"child_process": "github:jspm/nodelibs-child_process#0.1.0",
"create-hmac": "npm:create-hmac#1.1.4",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"path": "github:jspm/nodelibs-path#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2",
"systemjs-json": "github:systemjs/plugin-json#0.1.0"
},
"npm:process#0.11.2": {
"assert": "github:jspm/nodelibs-assert#0.1.0"
},
"npm:public-encrypt#4.0.0": {
"bn.js": "npm:bn.js#4.6.4",
"browserify-rsa": "npm:browserify-rsa#4.0.0",
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"create-hash": "npm:create-hash#1.1.2",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"parse-asn1": "npm:parse-asn1#5.0.0",
"randombytes": "npm:randombytes#2.0.2"
},
"npm:randombytes#2.0.2": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:readable-stream#1.1.13": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"core-util-is": "npm:core-util-is#1.0.2",
"events": "github:jspm/nodelibs-events#0.1.1",
"inherits": "npm:inherits#2.0.1",
"isarray": "npm:isarray#0.0.1",
"process": "github:jspm/nodelibs-process#0.1.2",
"stream-browserify": "npm:stream-browserify#1.0.0",
"string_decoder": "npm:string_decoder#0.10.31"
},
"npm:reflect-metadata#0.1.2": {
"assert": "github:jspm/nodelibs-assert#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:reflect-metadata#0.1.3": {
"assert": "github:jspm/nodelibs-assert#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:ripemd160#1.0.1": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:rxjs#5.0.0-beta.0": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:sha.js#2.4.4": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"fs": "github:jspm/nodelibs-fs#0.1.2",
"inherits": "npm:inherits#2.0.1",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:stream-browserify#1.0.0": {
"events": "github:jspm/nodelibs-events#0.1.1",
"inherits": "npm:inherits#2.0.1",
"readable-stream": "npm:readable-stream#1.1.13"
},
"npm:string_decoder#0.10.31": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0"
},
"npm:util#0.10.3": {
"inherits": "npm:inherits#2.0.1",
"process": "github:jspm/nodelibs-process#0.1.2"
},
"npm:vm-browserify#0.0.4": {
"indexof": "npm:indexof#0.0.1"
},
"npm:zone.js#0.5.10": {
"es6-promise": "npm:es6-promise#3.0.2",
"process": "github:jspm/nodelibs-process#0.1.2"
}
}
});
Couple of options. Are all your components/custom JS also in wwwroot? If so, I'd just install jspm to that directory and then jspm will just look in the current dir...which will be wwwroot locally, but in production it will just look at your root dir for the website.
A second option, which is also recommended as it is faster, would be to bundle all your dependencies using jspm bundle, and then JSPM will be able to find them correctly. That is just bundle all deps into bundle.js, put that in wwwroot, and then in your index file after you load system.js just do:
System.import('./bundle.js').then( () => { ... }
Related
When launching my RN 0.62/Node 12.16 app, there is a bundle error while build successful.
info Reloading app...
info Opening developer menu...
[Mon May 18 2020 18:08:21.250] BUNDLE ./index.js
error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type boolean (false)
at validateString (internal/validators.js:117:11)
at Object.dirname (path.js:583:5)
at resolveFileOrDir (C:\D\code\js\ipat_js\node_modules\metro-resolver\src\resolve.js:256:24)
at Object.resolve (C:\D\code\js\ipat_js\node_modules\metro-resolver\src\resolve.js:151:20)
at ModuleResolver.resolveDependency (C:\D\code\js\ipat_js\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:143:31)
at ResolutionRequest.resolveDependency (C:\D\code\js\ipat_js\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\D\code\js\ipat_js\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
at Object.resolve (C:\D\code\js\ipat_js\node_modules\metro\src\lib\transformHelpers.js:267:42)
at C:\D\code\js\ipat_js\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
at Array.map (<anonymous>)
There are several posts online about very similar error but they are either with React or specific modules. Here is the package.json:
{
"name": "ipat_js",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#textile/ipfs-lite": "^0.1.6",
"#tradle/react-native-http": "^2.0.0",
"assert": "^1.1.1",
"browserify-zlib": "^0.1.4",
"buffer": "^4.9.1",
"console-browserify": "^1.1.0",
"constants-browserify": "^1.0.0",
"dns.js": "^1.0.1",
"domain-browser": "^1.1.1",
"events": "^1.0.0",
"https-browserify": "0.0.1",
"path-browserify": "0.0.0",
"process": "^0.11.0",
"punycode": "^1.2.4",
"querystring-es3": "^0.2.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-crypto": "^2.1.0",
"react-native-level-fs": "^3.0.0",
"react-native-os": "^1.0.1",
"react-native-randombytes": "^3.0.0",
"react-native-tcp": "^3.2.1",
"react-native-udp": "^2.1.0",
"readable-stream": "^1.0.33",
"stream-browserify": "^1.0.0",
"string_decoder": "^0.10.31",
"timers-browserify": "^1.0.1",
"tty-browserify": "0.0.0",
"url": "^0.10.3",
"util": "^0.10.4",
"vm-browserify": "0.0.4"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/runtime": "^7.9.6",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^25.5.1",
"eslint": "^6.8.0",
"jest": "^25.5.3",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0",
"rn-nodeify": "^10.2.0"
},
"jest": {
"preset": "react-native"
},
"react-native": {
"zlib": "browserify-zlib",
"console": "console-browserify",
"constants": "constants-browserify",
"crypto": "react-native-crypto",
"dns": "dns.js",
"net": "react-native-tcp",
"domain": "domain-browser",
"http": "#tradle/react-native-http",
"https": "https-browserify",
"os": "react-native-os",
"path": "path-browserify",
"querystring": "querystring-es3",
"fs": "react-native-level-fs",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"dgram": "react-native-udp",
"stream": "stream-browserify",
"timers": "timers-browserify",
"tty": "tty-browserify",
"vm": "vm-browserify",
"tls": false
},
"browser": {
"zlib": "browserify-zlib",
"console": "console-browserify",
"constants": "constants-browserify",
"crypto": "react-native-crypto",
"dns": "dns.js",
"net": "react-native-tcp",
"domain": "domain-browser",
"http": "#tradle/react-native-http",
"https": "https-browserify",
"os": "react-native-os",
"path": "path-browserify",
"querystring": "querystring-es3",
"fs": "react-native-level-fs",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"dgram": "react-native-udp",
"stream": "stream-browserify",
"timers": "timers-browserify",
"tty": "tty-browserify",
"vm": "vm-browserify",
"tls": false
}
}
I don't have much clue about this error right now. How can I fix it?
I am seeing an error relating to a bunch of .eot glyphicons from Bootstrap that are not being found. I am getting two errors which I think are related. A bunch of errors for not being able to resolve or that a glyphicon doesn't exist, mixed in with errors about the field browser not containing valid alias configuration.
I have included the full error message as well as the babelrc file and webpack config. I will also include the longer package.json below in case it's relevant.
The errors say it is looking for a path like:
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
However the actual path should be:
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Errors:
ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/package.json (relative path: ./assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.jsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.json doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.scss doesn't exist
as directory
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-flow"
],
"plugins": [
"react-hot-loader/babel",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-logical-assignment-operators",
"#babel/plugin-proposal-optional-chaining",
[
"#babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-do-expressions",
"#babel/plugin-proposal-function-bind",
"#babel/plugin-transform-object-assign"
]
}
common.config.js (aka webpack config):
const path = require('path');
const autoprefixer = require('autoprefixer');
const merge = require('webpack-merge');
const development = require('./dev.config');
const devprod = require('./dev.configPROD');
const production = require('./prod.config');
// require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['.jsx', '.js', '.json', '.scss'],
modules: ['node_modules', PATHS.app],
},
module: {
rules: [{
test: /bootstrap-sass\/assets\/javascripts\//,
use: [
{ loader: 'imports-loader?jQuery=jquery' },
]
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
]
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-woff2' },
]
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
]
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-otf' },
]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=100000' },
]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'file-loader' },
]
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
]
}, {
test: /\.m?js$/,
use: [{
loader: 'babel-loader',
options:
{
presets: [],
},
}],
exclude: /node_modules/,
}, {
test: /\.png$/,
use: [
{ loader: 'file-loader?name=[name].[ext]' },
]
}, {
test: /\.jpg$/,
use: [
{ loader: 'file-loader?name=[name].[ext]' },
]
}, {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
}],
},
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(devprod, common);
//module.exports = merge(production, common);
//Results in graphical glitchs (css) because of uglify-js
//development config does not run uglify-js and therefore produces usable bundle
}
It also loads in another config file for webpack which I'll include here too:
dev.configPROD.js:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
'sass-loader',
],
}),
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"developmentPROD"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurrenceOrderPlugin(),
// new webpack.HotModuleReplacementPlugin(), //no pings back to webpack "_hrm"
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Util: 'exports-loader?Util!bootstrap/js/dist/util',
}),
],
};
And finally the package.json:
{
"name": "redux-easy-boilerplate",
"version": "1.3.3",
"description": "",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"start": "node bin/server.js",
"test": "karma start"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"react",
"reactjs",
"boilerplate",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"author": "https://github.com/anorudes, https://github.com/keske",
"license": "MIT",
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/polyfill": "7.4.4",
"autoprefixer": "9.6.0",
"axios": "0.19.0",
"babel-eslint": "10.0.2",
"babel-loader": "8.0.6",
"babel-plugin-react-transform": "^3.0.0",
"bootstrap": "4.3.1",
"bootstrap-loader": "^3.0.4",
"bootstrap-sass": "3.4.1",
"bootstrap-webpack": "0.0.6",
"classnames": "2.2.6",
"css-loader": "3.0.0",
"csswring": "^7.0.0",
"deep-equal": "^1.0.1",
"eslint": "^6.0.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.14.2",
"expect": "24.8.0",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.5",
"express": "4.17.1",
"express-open-in-editor": "^3.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.0.0",
"gapi": "0.0.3",
"history": "4.9.0",
"http-proxy": "^1.17.0",
"imports-loader": "^0.8.0",
"jasmine-core": "3.4.0",
"jquery": "3.4.1",
"jwt-decode": "^2.2.0",
"karma": "4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-webpack": "4.0.2",
"less": "3.9.0",
"less-loader": "^5.0.0",
"lodash": "4.17.11",
"material-ui": "^1.0.0-beta.47",
"material-ui-icons": "^1.0.0-beta.36",
"mocha": "^6.1.4",
"morgan": "1.9.1",
"node-sass": "4.12.0",
"npm-install-webpack-plugin": "^4.0.5",
"postcss-import": "^12.0.1",
"postcss-loader": "3.0.0",
"q": "^1.5.1",
"qs": "6.7.0",
"rc-datepicker": "5.0.14",
"react": "16.8.6",
"react-addons-css-transition-group": "^15.6.2",
"react-calendar-component": "^3.0.0",
"react-date-picker": "7.5.1",
"react-datepicker": "2.7.0",
"react-document-meta": "^3.0.0-beta.5",
"react-dom": "16.8.6",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "4.11.1",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "6.8.0",
"react-redux": "7.1.0",
"react-router": "5.0.1",
"react-router-redux": "^4.0.8",
"react-select": "^3.0.4",
"react-tap-event-plugin": "3.0.3",
"react-transform-hmr": "^1.0.4",
"redux": "4.0.1",
"redux-form": "8.2.4",
"redux-logger": "3.0.6",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "3.1.0",
"rimraf": "2.6.3",
"sass-loader": "7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "2.1.3",
"url-loader": "2.0.1",
"webpack": "4.35.0",
"webpack-cli": "3.3.5",
"webpack-dev-middleware": "3.7.0",
"webpack-dev-server": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.1",
"yargs": "^13.2.4"
},
"dependencies": {
"#babel/cli": "7.4.4",
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/preset-env": "7.4.5",
"#babel/preset-flow": "7.0.0",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "4.1.3",
"#material-ui/icons": "4.2.1",
"material-ui-pickers": "2.2.4",
"moment": "2.24.0",
"npm-check-updates": "3.1.12",
"papaparse": "5.0.0",
"prop-types": "15.7.2",
"query-string": "6.8.1",
"react-csv": "1.1.1",
"react-dates": "20.2.4",
"react-document-title": "^2.0.3",
"react-handsontable": "0.3.2",
"react-scripts": "3.0.1",
"react-select-fast-filter-options": "^0.2.3",
"react-virtualized-select": "^3.1.3",
"reactstrap": "8.0.0"
}
}
This issue could be solve by simply changing variables that indicate the path of the fonts folder oustside the stylsheets folder.
2 variables have to be used at import
// Bootstrap
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../fonts/bootstrap/") !default;
#import 'bootstrap-sass';
I just faced the same issue trying to build an old project.
The path of the fonts-directory is incorrect, for some reason.
The correct path would be /node_modules/bootstrap-sass/assets/fonts instead of /node_modules/bootstrap-sass/assets/stylesheets/fonts
As a workaround, I just copied the /node_modules/bootstrap-sass/assets/fonts-folder into /node_modules/bootstrap-sass/assets/stylesheets/.
I hope you could help me to figure this out. I have a project that uses Webpack and React. If I update Node from v. 6 to 9, the code gets minified. If I downgrade Node back to v. 6, everything as it is supposed to be. I was wondering why could it happen? As I understand, minification is something that should happen on demand. Does Node 9 enforce somehow minification?
Here are my package.json
{
"name": "tgc-ui",
"version": "1.0.0",
"description": "table-grid-ui",
"main": "index.js",
"scripts": {
"test": "mocha --compilers js:babel-core/register --require test/helpers/browser.js test/*/*.spec.js"
},
"repository": {
"type": "git",
"url": "ssh://git#stash.idalko.com:7999/ip/tgc-ui.git"
},
"keywords": [
"table",
"grid",
"ui"
],
"author": "idalko",
"license": "ISC",
"dependencies": {
"#atlaskit/banner": "^2.4.2",
"#atlaskit/button": "^5.4.8",
"#atlaskit/checkbox": "^1.0.0",
"#atlaskit/dynamic-table": "^7.2.0",
"#atlaskit/field-text": "^4.1.2",
"#atlaskit/flag": "^6.1.8",
"#atlaskit/icon": "^7.0.0",
"#atlaskit/inline-edit": "^4.5.6",
"#atlaskit/inline-message": "^3.0.4",
"#atlaskit/input": "^1.1.2",
"#atlaskit/lozenge": "^3.4.2",
"#atlaskit/modal-dialog": "^3.0.2",
"#atlaskit/multi-select": "^7.1.7",
"#atlaskit/single-select": "^3.0.0",
"#atlaskit/spinner": "^2.2.3",
"#atlaskit/tabs": "^2.0.0",
"#atlaskit/tooltip": "^6.0.0",
"axios": "^0.16.2",
"bootstrap": "^3.3.7",
"brace": "^0.11.0",
"browser-locale": "^1.0.3",
"moment": "^2.18.1",
"moxios": "^0.4.0",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-ace": "^5.8.0",
"react-addons-update": "^15.6.0",
"react-autocomplete": "^1.7.2",
"react-autosize-textarea": "^0.4.9",
"react-autosuggest": "^9.3.2",
"react-bootstrap": "^0.31.0",
"react-copy-to-clipboard": "^5.0.1",
"react-data-grid": "^2.0.53",
"react-data-grid-addons": "^2.0.53",
"react-datepicker": "^0.53.0",
"react-datetime": "^2.10.1",
"react-dom": "^15.5.4",
"react-file-reader-input": "^1.1.4",
"react-keybinding-component": "^0.5.0",
"sortablejs": "^1.6.1",
"string-hash": "^1.1.3",
"styled-components": "^1.4.6",
"uuid": "^3.1.0",
"yarn": "^0.27.5"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-require": "^3.0.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"chai": "^4.0.2",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"file-loader": "^0.11.2",
"jsdom": "^11.5.1",
"mocha": "^3.4.2",
"react": "^15.5.4",
"react-test-renderer": "^15.5.4",
"sinon": "^2.3.4",
"style-loader": "^0.18.2",
"uglify-js": "^3.0.23",
"uglifyjs-webpack-plugin": "^0.4.6",
"url-loader": "^0.5.9",
"webpack": "^2.6.1"
}
}
and webpack.config.js
const webpack = require("webpack");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var path = require('path'),
jsxPath = 'src',
jsPath = 'dist/lib',
srcPath = path.join(__dirname, jsxPath);
var isProd = (process.env.NODE_ENV === 'production');
var uiVersion = (process.env.CI_VERSION === '0.1.0-SNAPSHOT') ? '' : `_${process.env.CI_VERSION}`;
var service = {
jiracloud: './custom_modules/CloudUtilityService.jsx'
}[process.env.APP_ENV];
function getPlugins() {
var plugins = [];
plugins.push(new webpack.DefinePlugin({
'process.env': {
'CI_VERSION': JSON.stringify(process.env.CI_VERSION),
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'APP_ENV': JSON.stringify(process.env.APP_ENV)
}
}));
if (isProd) {
plugins.push(new UglifyJSPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false
}
}));
}
return plugins;
}
module.exports = {
entry: {
errorLicense: [path.join(srcPath, 'license/ErrorLicense.jsx')],
ducketConfiguration: [path.join(srcPath, 'ducketconfig/DucketConfig.jsx')],
dataSourceConfiguration: [path.join(srcPath, 'datasource/DataSourcesPage.jsx')],
ducket: [path.join(srcPath, 'grid/Grid.jsx')],
serviceDesk: [path.join(srcPath, 'adjustment/servicedesk/ServiceDesk.jsx')],
searchHelp: [path.join(srcPath, 'search/SearchHelp.jsx')]
},
output: {
//path:path.resolve(__dirname, jsPath),
path:path.resolve(__dirname, "../tgc/public/javascript"),
filename: `[name]${uiVersion}.js`
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders:['babel-loader']
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'url-loader?limit=100000#name=[name][ext]'
}
]
},
resolve: {
alias: {
'styled-components': path.resolve('./node_modules/styled-components/dist/styled-components.es.js'),
'utility-service': path.resolve(service)
}
},
plugins: getPlugins()
};
Thank you in advance.
Iev--
Node does never enforce minification, this piece of code in your webpack configuration is:
if (isProd) {
plugins.push(new UglifyJSPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false
}
}));
}
This probably wasn't working on an older version of node because your devDependencies are for uglify#3 which might require node.js > v6
I am currently running my project by executing webpack-dev-server , but now I want to run my project through express app. What are the steps to do the same.
Package.json:
{
"name": "react-redux-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack",
"start": "webpack-dev-server"
},
"license": "ISC",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.9.0",
"cross-env": "^1.0.8",
"css-loader": "^0.23.1",
"expect": "^1.20.1",
"express": "^4.14.0",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.8.0",
"path": "^0.12.7",
"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.1.0",
"react-dropzone": "^3.8.0",
"react-hot-loader": "^1.3.1",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.11.0"
},
"devDependencies": {
"babel-plugin-react-transform": "^2.0.2"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ritishgumber/file-ui.git"
},
"author": "",
"bugs": {
"url": "https://github.com/ritishgumber/file-ui/issues"
},
"homepage": "https://github.com/ritishgumber/file-ui#readme"
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
entry: './dev/js/index.js',
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/
}, {
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}, {
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: [
'react', 'es2015', 'stage-0'
],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties']
}
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [new webpack.optimize.OccurrenceOrderPlugin()]
};
You'll want to use the webpack dev middleware. Sample code from their site:
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var compiler = webpack({
// configuration
output: { path: '/' }
});
app.use(webpackDevMiddleware(compiler, {
// options
}));
I was trying import my private npm module hosted in sinopia. I can see that my module is available in sinopia folder structure.
Able to install module via "npm install --save". I can see it picks it from local registry.
But when I to use it anywhere I am getting "Error: Cannot find module ''
var module = require('some-module');
(tried both)
import module from 'some-module';
ERROR in ./app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/test-module in c:\yotest\app
# ./app/index.js 39:34-77
P.S: I did try installing it as a global node module and it again failed.
EDIT:
This is my package.json of the private module which is a clone from the github project.
{
"_args": [
[
"react-worker-dom",
""
]
],
"_from": "react-worker-dom#latest",
"_id": "react-worker-dom#0.0.3",
"_inCache": true,
"_installable": true,
"_location": "/react-worker-dom",
"_nodeVersion": "5.7.1",
"_npmUser": {},
"_npmVersion": "3.6.0",
"_phantomChildren": {},
"_requested": {
"name": "react-worker-dom",
"raw": "react-worker-dom",
"rawSpec": "",
"scope": null,
"spec": "latest",
"type": "tag"
},
"_requiredBy": [
"#USER"
],
"_shasum": "01b520589b7fd9d5533f911108ac6e1f774dab79",
"_shrinkwrap": null,
"_spec": "react-worker-dom",
"_where": "",
"author": {
"email": "******************",
"name": "********************"
},
"bugs": {
"url": "https://github.com/web-perf/react-worker-dom/issues"
},
"dependencies": {
"invariant": "^2.2.0",
"react": "^0.14.3"
},
"description": "ReactJS renderer using Web Workers",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.1.18",
"browser-perf": "^1.4.3",
"react-dom": "^0.14.3",
"webpack": "^1.12.8",
"webpack-dev-server": "^1.14.1"
},
"directories": {
"test": "test"
},
"dist": {
"shasum": "01b520589b7fd9d5533f911108ac6e1f774dab79",
"tarball": "http://localhost:4873/react-worker-dom/-/react-worker-dom-0.0.3.tgz"
},
"gitHead": "8c8fb15e793151e0169aac82537f4efe628d9986",
"homepage": "http://web-perf.github.io/react-worker-dom",
"license": "BSD-3-Clause",
"main": "dist/worker.js",
"name": "react-worker-dom",
"optionalDependencies": {},
"publishConfig": {
"registry": "http://localhost:4873/"
},
"readme": "ERROR: No README data found!",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/web-perf/react-worker-dom.git"
},
"scripts": {
"build-demo": "webpack --config test/webpack.config.js",
"demo": "webpack-dev-server --config test/webpack.config.js",
"perf": "node test/perf.js"
},
"version": "0.0.3"
}
Webpack config of main project
module.exports = {
entry: './app/index.js',
output: {
filename: 'public/bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}
]
}
}
Package.json file of the main project
{
"name": "yotest",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"start": "node bin/dev-server"
},
"keywords": [
"webpack",
"redux",
"react",
"react-router",
"kyper"
],
"license": "MIT",
"dependencies": {
"babel-core": "^5.8.22",
"babel-loader": "^5.3.2",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^0.8.2",
"history": "^1.9.1",
"kyper-matter": "^0.1.2",
"lodash": "^3.10.1",
"proxy-middleware": "^0.13.1",
"react": "^0.14.0-rc1",
"react-dom": "^0.14.0-rc1",
"react-hot-loader": "^1.2.8",
"react-redux": "^2.1.2",
"react-router": "^1.0.0-rc1",
"react-worker-dom": "0.0.3",
"redux": "^3.0.0",
"redux-router": "^1.0.0-beta3",
"redux-thunk": "^1.0.0"
},
"devDependencies": {
"css-loader": "^0.16.0",
"eslint": "^1.4.1",
"eslint-config-airbnb": "0.0.8",
"eslint-plugin-react": "^3.2.3",
"node-sass": "^3.3.2",
"redux-devtools": "^2.1.2",
"sass-loader": "^2.0.1",
"style-loader": "^0.12.3",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
}
I have reconfigured my NPM private registry and there was a port mismatch which was causing the problem.