Navi scripts failing to build.

[kuttim]

Hi, I have a index.html file in the public folder, which consists some jquery plugins and what not, navi seems to get stuck while building the application and assumes the jquery plugins are in my build folder, when i'm building the project, although I have defined the script tags.
For example, I'm using script tags like this.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
But when I build, I get an error like

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/CRA-deploy

navi-scripts: Using config at C:\Users\Mikk\blog-template\navi.config.js
Error: Could not load script: "//code.jquery.com/jquery-3.3.1.min.js"
    at onErrorWrapped (C:\Users\Mikk\blog-template\node_modules\jsdom\lib\jsdom\browser\resources\per-document-resource-loader.js:38:19)
    at Object.check (C:\Users\Mikk\blog-template\node_modules\jsdom\lib\jsdom\browser\resources\resource-queue.js:72:23)
    at request.then.catch.err (C:\Users\Mikk\blog-template\node_modules\jsdom\lib\jsdom\browser\resources\resource-queue.js:124:14) { [Error: ENOENT: no such file or directory, open 'C:\Users\Mikk\blog-template\build\code.jquery.com\jquery-3.3.1.min.js']
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path:
   'C:\\Users\\Mikk\\blog-template\\build\\code.jquery.com\\jquery-3.3.1.min.js' }
[ohshit] An error occured while building your app
ENOENT: no such file or directory, open 'C:\Users\Mikk\blog-template\build\code.jquery.com\jquery-3.3.1.min.js'
Error: ENOENT: no such file or directory, open 'C:\Users\Mikk\blog-template\build\code.jquery.com\jquery-3.3.1.min.js'
error Command failed with exit code 1.

My navi scripts config is below.

import path from 'path'
import getTagsFromSiteMap from './src/utils/getTagsFromSiteMap'

export const renderPageToString = require.resolve('./src/renderPageToString')

export const resolveSiteMapOptions = {
  /**
   * navi-scripts will call this function when creating a list of URLs which
   * need to be statically built. It allows you to substitute in a list of
   * values when URLs contain wildcards, e.g. /tags/:tag -> ["/tags/react"]
   */
  async expandPattern(pattern, router) {
    if (/\/:tag$/.test(pattern)) {
      let siteMap = await router.resolveSiteMap('/')
      return getTagsFromSiteMap(siteMap).map(tag => pattern.replace(':tag', tag))
    }
  },
}

/**
 * Get the file to write each URL to during the build
 */
export function getPagePathname({ url }) {
  if (url.pathname === '/rss/') {
    return 'rss.xml'
  }
  if (url.pathname === '/') {
    return 'index.html'
  }
  return path.join(url.pathname.slice(1), 'index.html')
}

Any ideas what can be causing this?

[wulucxy]

it seems has some common points with this issue。

@jamesknelson

jamesknelson/create-react-blog#8

[wulucxy]

@jamesknelson I think you miss to require dotenv config in navi-scripts。

add this line to the of the navi-scripts.js file solved my problem。

 require('dotenv').config()

[jamesknelson]

@efukela Looking at the original error, the problem here is that navi-scripts executes all the scripts in index.html, but doesn't seem to understand how to fetch //code.jquery.com/jquery-3.3.1.min.js. It's looking for it as a subdirectory of your build output, and failing as a result.

To fix this, we'd need to enable fetching of remote files during build here:

https://github.com/frontarm/navi/blob/master/packages/navi-scripts/lib/createScriptRunner.js#L46

I'm not exactly sure if this is a good idea from a security perspective though.

Another option would be to move you jQuery import out of index.html, and into a conditional import within the script itself.

[jamesknelson]

@wulucxy could you submit a separate PR with the change that fixed navi-scripts for you? I'd be happy to merge it.

[jamesknelson]

Going to close this issue for now as I don't think that reading in jquery from a <script> tag is something that navi-scripts really needs to support.