Node env Error: Can't resolve 'fs'

[gongph]

This is my full code :

import juice from 'juice'
    import htmlDocx from 'html-docx-js'
    import { saveAs } from 'file-saver'

    export default {
        methods: {
            handleExport () {
                var content = htmlDocx.asBlob('hello')
                saveAs(content, 'test.docx')
            }
        }
    }

Run webpack compiler，Cmd show a error :

Module not found: Error: Can't resolve 'fs' in 'F:\gittest\js-office-demo\node_modules\html-docx-js\build

Waiting online .... @anowak @kozborn @gpurgal

[N1kto]

@gongph that's not the problem with package itself, but rather with your bundling tool (webpack). You can either consume already bundled (html-docx-js/dist/html-docx-js) package or configure webpack to polyfil node modules (e.g. fs). Try setting this in your webpack config file:

node: {
    fs: 'empty'
}

[gongph]

Now, I put html-docx.js under the dist directory.

Very very tks!! @N1kto

[abhisheknalin]

Not working for me. When I add

node: {
    fs: 'empty'
}

in my webpack config the "Can't resolve fs" error goes away. After this when I invoke the following function

  exportToWord = () => {
    var converted = htmlDocx.asBlob(this.state.section.content);
    FileSaver.saveAs(converted, 'test.docx');
  }

I get this error: Uncaught TypeError: fs.readFileSync is not a function @gongph Is it working for you?

[N1kto]

@abhisheknalin try consume bundled version from /dist folder. E.g.:

import htmlDocx from 'html-docx-js/dist/html-docx';

const converted = htmlDocx.asBlob(content);
saveAs(converted, 'test.docx');

[abhisheknalin]

Thanks a lot for your time.

import htmlDocx from 'html-docx-js/dist/html-docx';

this import works

[apt-get2Update]

import htmlDocx from 'html-docx-js/dist/html-docx';

am using this header the app is working but the below linting issue arrises. help me how to resolve it?

Parse errors in imported module 'html-docx-js/dist/html-docx': Line 12413: 'with' in strict mode (12413:1) import/namespace

[abhisheknalin]

Even my webpack gives the following warning:

WARNING in ./~/html-docx-js/dist/html-docx.js
Critical dependencies:
1:439-446 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/html-docx-js/dist/html-docx.js 1:439-446

But it works. So I think you need to edit the linting rules you are using.

[klawdyo]

Great!! I think this could be in the readme file

[apt-get2Update]

its not an readme file it is an linting warning for import header rules mismatch.

[ScottStevenson]

@abhisheknalin try consume bundled version from /dist folder. E.g.:

import htmlDocx from 'html-docx-js/dist/html-docx';

const converted = htmlDocx.asBlob(content);
saveAs(converted, 'test.docx');

Tried this but get the following: ./src/vendor/html-docx-js/html-docx.js Syntax error: 'with' in strict mode (13103:0)

I am attempting to use this with create-react-app (as I suspect many others are), so the webpack config approach is also not great, I would rather not eject from create-react-app.

The only working option for create-react-app now is to add the dist file to /public/vendor and to load it in a Githubissues.

Githubissues is a development platform for aggregating issues.