Elixir errors followin Installation instructions

Communities ColdBox HMVC
1

Installation

Following the Installation instructions for Elixir in Installation | ColdBox Elixir

I found an error:

npm run dev

> todocoleccion@1.0.0 dev
> webpack --node-env development

[webpack-cli] Failed to load '/home/davidm/src/todocoleccion/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'sass'

I think the next step is missing:

Install Webpack and other dependencies:

npm i -D sass
npm i -D webpack
npm i -D webpack-cli

…after npm install.

Running Elixir

Elixir is built on top of Webpack, so to run your Elixir tasks you only need to run the webpack command in your terminal. Before running Webpack, you will need a webpack.config.js file in the root of your project. Below is a simple example: (etc)

I think it would be nice to have instructions on how to create an example js file to be able to test that configuration.

ERROR in includes/js/app
Module not found: Error: Can't resolve '/home/davidm/src/todocoleccion/resources/assets/js/app.js' in '/home/davidm/src/todocoleccion'
resolve '/home/davidm/src/todocoleccion/resources/assets/js/app.js' in '/home/davidm/src/todocoleccion'
  using description file: /home/davidm/src/todocoleccion/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    root path /home/davidm/src/todocoleccion
      using description file: /home/davidm/src/todocoleccion/package.json (relative path: ./home/davidm/src/todocoleccion/resources/assets/js/app.js)
        no extension
          Field 'browser' doesn't contain a valid alias configuration

I know it is simple and obvious but it is better that the user does not have to deal with errors when trying a product for the first time.

For example:

Create a simple resources/assets/js/app.js file with console.log('hello world'); as content and build for production:
npm run prod

NPM Scripts

NPM Scripts section is for an old version of webpack:

"scripts": {
    "dev": "webpack --hide-modules",
    "watch": "npm run dev -- --watch",
    "prod": "npm run dev -- -p"
}

It should be:

"scripts": {
    "dev": "webpack --node-env development",
    "watch": "npm run dev -- --watch",
    "prod": "webpack --node-env production"
}
1 Like