Next.js: Import .html or .txt files as strings?

[rclai]

I'm trying to import html files into just strings and use html-to-react to return them on my pages, but for some reason I'm getting this error:

On the server logs:

{ Error: Cannot find module '../html/index.html'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/my-app/.next/dist/pages/index.js:19:14)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3) code: 'MODULE_NOT_FOUND' }

On red box client:

Cannot find module '../html/index.html'
Error: Cannot find module '../html/index.html'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/my-app/.next/dist/pages/index.js:19:14)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

I simply have a html/index.html file with some html in it, and inside my pages/index.js I have a import html from '../html/index.html'.

Here's my next.config.js:

module.exports = {
  // Not sure this affects it but just included it just in case
  exportPathMap: function() {
    return {
      '/': { page: '/' },
      '/another': { page: '/another' },
    };
  },
  webpack: (config, { dev }) => {
    config.module.rules.push({
      test: /\.html$/,
      use: 'raw-loader',
    });
    return config;
  },
}

My pages/index.js file for an idea of what I'm trying to do:

// A utility function that just takes in html as a string and returns a React element
import h2r from '../utils/h2r';
import html from '../html/index.html'; // Error's here

export default () => (
  <div>
    {h2r(html)}
  </div>
)

I'm using the beta.

[arunoda]

You can't use webpack loader like this since they don't work on the server.
May be export these as .js files exporting a template string.

[sbking]

@arunoda I'm trying to import .glsl WebGL shader files as strings, which I use because my editor supports syntax highlighting, linting, and autocompletion for GLSL. I've tried using babel-plugin-inline-import with no luck. Is there really no way we can import text files inline on both browser and server with NextJS?

[mathisonian]

Hi all, for what it's worth, I'm able to get this behavior like this:

1. Install static file babel plugin:

npm install babel-plugin-static-fs --save-dev

1. Create a custom .babelrc file:

{
  "plugins": ["babel-plugin-static-fs"],
  "presets": ["next/babel"]
}

1. Import your static files:

import { readFileSync } from 'fs';
const text = readFileSync('path-to-file.txt', 'utf8');

[jlmonroy13]

import { readFileSync } from 'fs';
import { join } from 'path';

const text = readFileSync(join(__dirname, 'hello.txt'), 'utf8');

[jmlivingston]

For those that get this page, I'm afraid neither of these worked for me. I'm on node 9.11.1 and next 6.0.1. Seems to fail on the following line:

import { readFileSync } from 'fs';

ModuleBuildError: Module build failed: TypeError: Cannot read property 'traverse' of null
    at PluginPass.ImportDeclaration (/Users/johnlivingston/Projects/nextjs-test/node_modules/babel-plugin-static-fs/index.js:36:14)
    at newFn (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/visitors.js:223:21)
    at NodePath._call (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/path/context.js:64:19)
    at NodePath.call (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/path/context.js:38:17)
    at NodePath.visit (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/path/context.js:99:12)
    at TraversalContext.visitQueue (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/context.js:135:18)
    at TraversalContext.visitMultiple (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/context.js:89:17)
    at TraversalContext.visit (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/context.js:174:19)
    at Function.traverse.node (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/index.js:76:17)
    at NodePath.visit (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/path/context.js:106:18)
    at TraversalContext.visitQueue (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/context.js:135:18)
    at TraversalContext.visitSingle (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/context.js:94:19)
    at TraversalContext.visit (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/context.js:176:19)
    at Function.traverse.node (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/index.js:76:17)
    at traverse (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/traverse/lib/index.js:46:12)
    at transformFile (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/core/lib/transformation/index.js:108:27)
    at runLoaders (/Users/johnlivingston/Projects/nextjs-test/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/johnlivingston/Projects/nextjs-test/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/johnlivingston/Projects/nextjs-test/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/johnlivingston/Projects/nextjs-test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/johnlivingston/Projects/nextjs-test/node_modules/babel-loader/lib/index.js:98:23
    at /Users/johnlivingston/Projects/nextjs-test/node_modules/babel-loader/lib/cache.js:120:25
    at /Users/johnlivingston/Projects/nextjs-test/node_modules/babel-loader/lib/transform.js:8:72
    at runAsync (/Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/core/lib/transformation/index.js:27:12)
    at /Users/johnlivingston/Projects/nextjs-test/node_modules/@babel/core/lib/transform.js:32:34
    at process._tickCallback (internal/process/next_tick.js:176:11)

[TobiaszCudnik]

babel-plugin-static-fs doesnt seem to be maintained any more, but babel-plugin-inline-import works well.

[timneutkens]

You can use webpack loaders for this behavior now. Another option is using preval: https://github.com/kentcdodds/babel-plugin-preval