Module parse failed in .navy

[VitalyaK]

Describe the bug

Problems in vue.js I don't understand how can I use .navy without experiencing this error.

Reproduction

Steps to reproduce

Use .navy file

Javascript Framework

vue

Logs

Compiled with problems:X

ERROR in ./src/views/night-vision/custom.navy 6:9

Module parse failed: Unexpected token (6:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // Meta tag
> [OVERLAY name=Custom, ctx=Canvas, author=ChartMaster, version=1.0.0]
|
| // Define new props

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a NightVision issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[frbju]

Hi, I just fixed this myself.
1 ) You need this file: https://github.com/project-nv/night-vision/tree/main/vite
2 ) You need to add this to your vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import viteRawPlugin from "./vite/vite-raw-plugin.js";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      emitCss: false,
    }),
    viteRawPlugin({
      fileRegex: /\.navy$/,
    })
  ]
})

[VitalyaK]

Hi @frbju, How can I do the same for configureWebpack ?

[frbju]

try adding the viterawplugin 😊 might work

[frbju]

I was thinking something like this, but i've never used webpack so it might be completly off.

Target the navy files & add a custom loader.

{
        test: /\.navy$/,
        use: [
          {
            loader: path.resolve('path/to/loader.js'),
            options: {
              /* ... */
            },
          },
        ],
      }

Convert the .navy files the same was as in " vite-raw-plugin"

export default function viteRawPlugin (options) {
    return {
      name: 'vite-raw-plugin',
      transform (code, id) {
        if (options.fileRegex.test(id)) {
          const json = JSON.stringify(code)
            .replace(/\u2028/g, '\\u2028')
            .replace(/\u2029/g, '\\u2029')
  
          return {
            code: `export default ${json}`
          }
        }
      }
    }
  }

Example output from rawplugin

"// Navy ~ 0.1-lite\r\n// ^^^ First comment should provide a NavyJS version\r\n\r\n// Meta tag\r\n[OVERLAY name = yBars, ctx = Canvas, author = ChartMaster, version = 1.0.0]\r\n\r\nprop('color', { type: 'color', def: 'pink' })\r\nprop('lineDash', { type: 'array', def: [2, 5] })\r\nprop('lineWidth', { type: 'number', def: 1 })\r\nprop('interactive', { type: 'boolean', def: false }) // Todo\r\n\r\ndraw(ctx) {\r\n const layout = $core.layout\r\n const data = $core.data\r\n const lineWidth = 2\r\n\r\n const draw = (input, color) => { \r\n let y = layout.value2y(input[0])\r\n ctx.strokeStyle = color\r\n ctx.lineWidth = lineWidth\r\n ctx.beginPath()\r\n ctx.moveTo(layout.width - input[1], y)\r\n ctx.lineTo(layout.width, y)\r\n ctx.stroke()\r\n }\r\n\r\n data[0].asks.forEach(ask => {\r\n draw(ask, \"rgba(229, 65, 80, 0.2)\")\r\n });\r\n\r\n data[0].bids.forEach(bid => {\r\n draw(bid, \"rgba(35, 167, 118, 0.2)\")\r\n });\r\n \r\n}

[TranceGeniK]

raw-loader seems to be working pretty well with configureWebpack :

npm install raw-loader --save-dev

configureWebpack: {
    // Webpack configuration applied to web builds and the electron renderer process
    module: {
      rules: [
        {
          test: /\.navy$/i,
          use: 'raw-loader',
        },
      ],
    },
  },