Comments (8)
If I understand correctly you want to use nodejs to run a program generated by Scala.js, and this program makes use of some npm packages. So, you would like these dependencies to be bundled with the program. You might want to use the webpack โlibraryโ export mode (but for this to work you will have to use the trick explained in #59).
Another approach could be to not use webpack at all. Instead, just use the output of Scala.js as a nodejs module (and use the package.json
file generated by scalajs-bundler to get its dependencies).
from scalajs-bundler.
The bootstrap used by Transcendent is basically a workaround for Scala.js not having @JSImport
and direct CommonJS support in the past. Using this bootstrap method together with scalajs-bundler is an oxymoron, I think.
Eventually Transcendent should migrate to a model based on @JSImport
and native CommonJS support from Scala.js. In the meantime, you could adapt the bridge with the Bootstrap
not to use bootstrap. Instead of their documentation:
def start(bootstrap: Bootstrap) = {
import bootstrap._
val express = require[Express]("express")
...
}
you could do:
@js.native
@JSImport("express", JSImport.Namespace)
object ExpressBootstrap extends js.Object
def start() = {
val express = ExpressBootstrap.asInstanceOf[Express]
...
}
from scalajs-bundler.
I see. Manually loading express via JSImport in my main does work. However, what about libraries (e.g. transcendent or scalajs-react) that do not utilize JSImport internally. Won't they be unable to find the necessary dependencies? For example, scalajs-react uses the "React" singleton internally, that does not use JSImport. As such, the react module doesn't get pulled into the scalajs-react module namespace. Is there a work-around for that?
from scalajs-bundler.
For top-level singletons like React
, nothing should change (I think), but you will probably have to leave the react.js
library out of the Webpack treatment or something like that.
from scalajs-bundler.
@MHOOO I think @sjrd and I answered your questions, should I close this issue?
from scalajs-bundler.
Yes, that did help, many thanks. But not quite there yet.
- I can successully use transcendent, via the work-around of srjd (i.e. a JSImport of react(-dom) on a dummy object), which will make sure that react/react-dom is included inside the resulting bundle. Furthermore however, since transcendent is internally using "React" as a top-level global identifier, I also needed to extend the webpack config with (this took me 2 days to figure out - explaining my late reply ^^):
module.exports.module.loaders = [
// Make sure that react is available to e.g. the scalajs-react facade
{test: require.resolve("react"), loader: "expose?React"},
{test: require.resolve("react-dom"), loader: "expose?ReactDOM"}
]
and my sbt config with the "expose-loader" npm dependency. So far so good.
Now, I'm using a library called "rc-tabs" which contains a css file under
node_modules/rc-tabs/assets/index.css
I've tried requiring that file via
// @JSImport("~rc-tabs/assets/index.css", JSImport.Default)
@JSImport("!style-loader!css-loader!~rc-tabs/assets/index.css", JSImport.Default )
@js.native
object RcTabsAssets extends js.Object {}
However, it doesn't appear that this is working:
[info] ERROR in ./frontend-fastopt.js
[info] Module not found: Error: Cannot resolve module '~rc-tabs/assets/index.css' in /home/thomas/data/gitspace/scalajs-webapp/app-frontend/target/scala-2.11
[info] @ ./frontend-fastopt.js 1031:100-161
I'm not exactly sure whether this is still related to scalajs-bundler or webpack and am just posting here in hopes someone may know the answer.
from scalajs-bundler.
Ok, found my mistake. The "~" was unnecessary, so the following:
@JSImport("!style-loader!css-loader!rc-tabs/assets/index.css", JSImport.Default )
@js.native
object RcTabsAssets extends js.Object {}
does work (after depending on both style-loader & css-loader in npmDevDependencies).
My issue is thus resolved! (Though I question the need for an unused Singleton object for requiring a css file.... but oh well)
from scalajs-bundler.
Good to know that webpack css loaders can still be used with scalajs-bundler (that was unintended!).
from scalajs-bundler.
Related Issues (20)
- (newb) Is there a way to get the image optimisation and CSS rewriting? HOT 2
- is npm ci supported? HOT 3
- The Strict Mode emitted by Scala.js is not always preserved
- Add first-class support for frozen lockfiles HOT 7
- Generated source map points to incorrect URLs
- BundlingMode.LibraryOnly ignores `require` and `js.import`
- Documentation reports incorrect version HOT 3
- installJsdom may installs jsdom outside of the target directory
- Support `packageManager` in package.json
- Support Node Version Manager (NVM) HOT 2
- Error parsing webpack stats output HOT 6
- Providing `nodeExecCommand` setting HOT 4
- Yarn 2 throws `Unsupported option name ("--mutex")`
- sourcemap not work with BundlingMode.LibraryAndApplication
- Release v0.21.0 HOT 1
- Use with IntegrationTests
- BundlingMode.LibraryAndApplication() does not work with sourcemap to false
- digital envelope routines::unsupported on node versions > 16 HOT 3
- `AssertionError` on sbt 1.8.0 HOT 4
- webpackExtraArgs is ignored
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scalajs-bundler.