scalajs and webpack4 config settings issues

1.1k views Asked by At

I am using webpack 4.20.2 and scalajs ("0.6.24") , scalajs bundler(0.13.1)

when i am building bundle file i am getting below webpack exceptions. I am attaching build.sbt which uses webpack.config.dev.js and generate scalajs-webpack.config.js . If i directly use scalajs-webpack.config.js in build.sbt which i uses hack to overcome this exception then i am not getting error and able to generate single bundle file but when using webpack-dev-config.js which is shown below , then i am getting error.

webpack.config.dev.js

'use strict';

var webpack = require('webpack');
//var _ = require('lodash');
var merge = require("webpack-merge")
//var commonConfig = require("./scalajs.webpack.config")


module.exports = _.merge(
    require('./scalajs.webpack.config'),
    require('./webpack.config.shared'),
    {
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('development')
            })
        ],
    });

generated scalajs-webpack.config.js

module.exports = {
  "entry": {
    "scalajs-react-template-opt": ["/home/faltu/Development/ScalaJsWebApp/js/scalajs-react-template-opt.js"]
  },
  "output": {
    "path": "/home/faltu/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main",
    "filename": "[name]-bundle.js"
  },
  "mode": "development",
  "devtool": "source-map",
  "module": {
    "rules": [{
      "test": new RegExp("\\.js$"),
      "enforce": "pre",
      "use": ["source-map-loader"]
    }]
  }
}

build.sbt

enablePlugins(ScalaJSPlugin)
enablePlugins(ScalaJSBundlerPlugin)


name := "scalajs-react-template"
version := "1.0"
scalaVersion := "2.12.1"

// create launcher file ( its search for object extends JSApp , make sure there is only one file)
//persistLauncher := true
//persistLauncher in Test := false

val scalaJSReactVersion = "1.0.1"
val scalaCssVersion = "0.5.3-RC1"
val reactJSVersion = "15.5.4"
version in webpack := "4.20.2"
version in startWebpackDevServer := "3.1.4"

resolvers += "Sonatype OSS Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots"


libraryDependencies ++= Seq(
     "org.scala-js" %%% "scalajs-dom" % "0.9.2",
    "com.olvind" %%% "scalajs-react-components" % "1.0.+",
  "com.lihaoyi" %%% "scalatags" % "0.6.7",
  "io.surfkit" %%% "scalajs-google-maps" % "0.0.3-SNAPSHOT",
"com.github.japgolly.scalajs-react" %%% "core" % scalaJSReactVersion,
  "com.github.japgolly.scalajs-react" %%% "extra" % scalaJSReactVersion,
  "com.github.japgolly.scalacss" %%% "core" % scalaCssVersion,
  "com.github.japgolly.scalacss" %%% "ext-react" % scalaCssVersion,
 "org.webjars.npm" % "loose-envify" % "1.1.0",
  "org.webjars.npm" % "js-tokens" % "4.0.0"

)

// React itself
//   (react-with-addons.js can be react.js, react.min.js, react-with-addons.min.js)
//DOM, which doesn't exist by default in the Rhino runner. To make the DOM available in Rhino
jsDependencies ++= Seq(
  "org.webjars.npm" % "react" % reactJSVersion / "react-with-addons.js" commonJSName "React" minified "react-with-addons.min.js",
  "org.webjars.npm" % "react-dom" % reactJSVersion / "react-dom.js" commonJSName "ReactDOM" minified "react-dom.min.js" dependsOn "react-with-addons.js"
)

lazy val example =
  project
    .in(file("."))
    .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin)
    .settings(settings)
    .settings(
      libraryDependencies ++= Seq(
        "com.github.benhutchison" %%% "prickle" % "1.1.13",
        "com.github.japgolly.scalajs-react" %%% "core"                     % "1.0.1",
        "com.github.japgolly.scalajs-react" %%% "extra"                    % "1.0.1",
        "com.olvind"                        %%% "scalajs-react-components" % "1.0.+"
      )
    )

// *****************************************************************************
// Settings
// *****************************************************************************




lazy val SuiVersion   = "0.68.5"
lazy val EuiVersion   = "0.6.1"
lazy val MuiVersion   = "0.18.1"
lazy val reactVersion = "15.5.4"

lazy val bundlerSettings =
  Seq(
    version in webpack := "4.20.2",
    scalaJSUseMainModuleInitializer := true,
    scalaJSUseMainModuleInitializer.in(Test) := false,
    artifactPath.in(Compile, fastOptJS) := ((crossTarget in (Compile, fastOptJS)).value /
      ((moduleName in fastOptJS).value + "-opt.js")),
    webpackResources :=
      webpackResources.value +++
        PathFinder(
          Seq(
            baseDirectory.value / "index.html"
          )) ** "*.*",
    webpackEmitSourceMaps := false,
    webpackConfigFile in (Compile, fastOptJS) := Some(
        baseDirectory.value / "webpack.config.dev.js"),
   // useYarn := true,
    npmDependencies.in(Compile) := Seq(
      "elemental"                         -> EuiVersion,
      "highlight.js"                      -> "9.9.0",
      "material-ui"                       -> MuiVersion,
      "react"                             -> reactVersion,
      "react-dom"                         -> reactVersion,
      "react-addons-create-fragment"      -> reactVersion,
      "react-addons-css-transition-group" -> "15.0.2",
      "react-addons-pure-render-mixin"    -> "15.5.2",
      "react-addons-transition-group"     -> "15.0.0",
      "react-addons-update"               -> "15.5.2",
      "react-geomicons"                   -> "2.1.0",
      "react-infinite"                    -> "0.11.0",
      "react-select"                      -> "1.0.0-rc.5",
      "react-slick"                       -> "0.14.11",
      "react-spinner"                     -> "0.2.7",
      "react-tagsinput"                   -> "3.16.1",
      "react-tap-event-plugin"            -> "2.0.1",
      "semantic-ui-react"                 -> SuiVersion,
      "svg-loader"                        -> "0.0.2",
      "snabbdom"                          -> "0.5.3",
      "font-awesome"                      -> "4.7.0",
      "url-loader"                        -> "0.5.9",
      "firebase"                          ->  "5.4.2",
      "firebase-admin"                    -> "6.0.0",
      "webpack"                            -> "4.18.1",
      "webpack-merge"                      -> "4.1.0",
      "file-loader"                       -> "2.0.0",
      "jquery"                             ->"3.3.1"

    )
  )
scalaJSUseMainModuleInitializer := true
lazy val settings =  bundlerSettings
// creates single js resource file for easy integration in html page
skip in packageJSDependencies := true
//persistLauncher in Test := false
//scalaJSUseMainModuleInitializer in Compile := true
//requiresDOM in Test := true
// copy  javascript files to js folder,that are generated using fastOptJS/fullOptJS

crossTarget in (Compile, fullOptJS) := file("js")
crossTarget in (Compile, fastOptJS) := file("js")
crossTarget in (Compile, packageJSDependencies) := file("js")
crossTarget in (Compile, scalaJSUseMainModuleInitializer) := file("js")
crossTarget in (Compile, packageMinifiedJSDependencies) := file("js")
artifactPath in (Compile, fastOptJS) := ((crossTarget in (Compile, fastOptJS)).value /
  ((moduleName in fastOptJS).value + "-opt.js"))
scalacOptions += "-feature"


import com.lihaoyi.workbench.Plugin._

workbenchSettings
updateBrowsers :=  updateBrowsers.triggeredBy(fastOptJS in Compile)
refreshBrowsers:=  refreshBrowsers.triggeredBy(fastOptJS in Compile)
bootSnippet := "scalajsreact.template.ReactApp().main();"

error

    ast optimizing js/scalajs-react-template-opt.js
[error] npm notice created a lockfile as package-lock.json. You should commit this file.
[error] npm WARN The package webpack is included as both a dev and production dependency.
[error] npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
[error] npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
[error] 
[error] added 16 packages from 6 contributors, removed 24 packages, updated 4 packages and audited 20209 packages in 12.501s
[error] found 1 moderate severity vulnerability
[error]   run `npm audit fix` to fix them, or `npm audit` for details
[info] Writing scalajs.webpack.config.js
[info] Bundling the application with its NPM dependencies
[error] /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:149
[error]                 throw new Error(
[error]                 ^
[error] 
[error] Error: Rule can only have one result source (provided use and loaders) in {
[error]   "test": {},
[error]   "enforce": "pre",
[error]   "use": [
[error]     "source-map-loader"
[error]   ],
[error]   "loader": [
[error]     "style-loader",
[error]     "css-loader"
[error]   ]
[error] }
[error]     at checkUseSource (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:149:11)
[error]     at Function.normalizeRule (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:287:4)
[error]     at rules.map (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:110:20)
[error]     at Array.map (<anonymous>)
[error]     at Function.normalizeRules (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:109:17)
[error]     at new RuleSet (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:104:24)
[error]     at new NormalModuleFactory (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
[error]     at Compiler.createNormalModuleFactory (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:509:31)
[error]     at Compiler.newCompilationParams (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:526:30)
[error]     at Compiler.compile (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:534:23)
[error]     at readRecords.err (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:274:11)
[error]     at Compiler.readRecords (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:402:11)
[error]     at hooks.run.callAsync.err (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:271:10)
[error]     at _err0 (eval at create (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
[error]     at compiler.hooks.run.tapAsync (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/CachePlugin.js:52:13)
[error]     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
[error]     at AsyncSeriesHook.lazyCompileHook (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/Hook.js:154:20)
[error]     at hooks.beforeRun.callAsync.err (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:268:19)
[error]     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
[error]     at AsyncSeriesHook.lazyCompileHook (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/Hook.js:154:20)
[error]     at Compiler.run (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:265:24)
[error]     at processOptions (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:497:20)
[error]     at yargs.parse (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:500:3)
[error]     at Object.parse (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/node_modules/yargs/yargs.js:552:18)
[error]     at /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:212:8
[error]     at Object.<anonymous> (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:502:3)
[error]     at Module._compile (internal/modules/cjs/loader.js:689:30)
[error]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
[error]     at Module.load (internal/modules/cjs/loader.js:599:32)
[error]     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
[error] Failure on parsing the output of webpack: No content to map due to end-of-input
[error]  at [Source: java.lang.UNIXProcess$ProcessPipeInputStream@12b84ce3; line: 1, column: 0]
[error] You can try to manually execute the command
[error] node /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/bin/webpack --bail --profile --json --config /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/webpack.config.dev.js
java.lang.RuntimeException: Non-zero exit code: 1

webpack.config.shared.js

'use strict';

var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    limit: 20000
                }
            }]
    }
};
1

There are 1 answers

0
Guillaume Massé On BEST ANSWER

This error is from webpack, you are mixing the loader syntax from webpack (1 and 2) in your shared config with the loader syntax from webpack 3 generated by scalajs-bundler.

https://webpack.js.org/migrate/3/#module-loaders-is-now-module-rules

You can upgrade your shared config: webpack.config.shared.js

'use strict';

var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  { loader: 'style-loader' }, 
                  { loader: 'css-loader' }
                ]
            }, {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                use: [
                  { loader: 'url-loader' }
                ],
                options: {
                    limit: 20000
                }
            }]
    }
};