0

I'm building a simple, non-React, html page for webcheck monitoring within a React App. This html page is called specRunner.html. From within specRunner.html I wish to invoke some JavaScript files, but am having difficulty referencing them from my html file.

To be specific, my specRunner.html file can only 'see' JS files if they are stored in the client/dist folder of my directory. I thought I was forming the file path in the tag incorrectly, but I've tested it now and can consistently access a JS file but only if that JS file is in the client/dist folder. Needless to say, I can't put my node_modules file in my client/dist folder.

To be specific I can serve up html files from anywhere in my directory (i.e., my node-express app is not limited to the client/dist file when retrieving files to serve), but my html files can't find js files unless the js file is in the client/dist file.

File structure:
root
--client
----dist
------bundle.js (for the React App)
------index.html (for the React App)
------specRunner.html (<-- my webcheck page I'm working on)
------example.js (<-- example file I'm trying to access from my specRunner.html)
----src
------React stuff
--node_modules (<-- the files I REALLY want to reference from specRunner.html)
--server
--etc.

Here's the Chrome console error when the file is anywhere but the dist folder:

Uncaught SyntaxError: Unexpected token <        example.js:1

If I look in the source tab, I can see the content of the example.js file is the html of my server's default endpoint html page for any invalid endpoint calls.

This must be some React issue, even though this endpoint has no React components involved.

Here's my webpack.config:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
    entry: `${SRC_DIR}\\index.js`,
    output: {
      path: path.resolve(__dirname, 'client/dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.jsx?/,
          include: SRC_DIR,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
            plugins: ['syntax-dynamic-import'],
          },
        },
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
          include: SRC_DIR,
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
      new ExtractTextPlugin("styles.css"),
    ],
  };

Grateful for any pointers!

208_man
  • 1,440
  • 3
  • 28
  • 59
  • 4
    You should be referencing things inside the `node_modules` folder by using `import` in your .js file. Then including your js file in the html page. – Matti Price Oct 18 '18 at 15:58
  • Thank you @Matti. You're making me think. I've been using require statements in my js file, and now that I'm able to access it (in the client/dist folder, still undesirable), I'm getting a 'require is not defined' error in the console. Glad to update to es6 import/export syntax, but not sure how to convert (for example) the following to an import statement: const expect = require('chai').expect; – 208_man Oct 18 '18 at 17:07
  • @Matti, found an answer to my question here: https://stackoverflow.com/questions/30898686/es6-convert-from-require-to-import – 208_man Oct 18 '18 at 17:16
  • still not understanding why my html can only find js files in the client/dist folder. That's my big question still. Any suggestions? – 208_man Oct 18 '18 at 17:17
  • I mean, I'm sure it probably CAN find other files, but you'd need to reference them correctly. You'd have to do something like ``. Or whatever you are using to serve the web application is only looking at your `dist` folder and doesn't allow serving files from elsewhere – Matti Price Oct 18 '18 at 17:20
  • Thanks @Matti. I'm using tags ( – 208_man Oct 18 '18 at 17:28

0 Answers0