Module parse failed: Unexpected token (11509:70)

[artemdumanov]

I have an issue. When I import a library and use any component I get an error. How can I fix that? I have no clues or guesses,

Module parse failed: Unexpected token (11509:70)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
(Source code omitted for this binary file)```

[artemdumanov]

@dolanmiu ping. Maybe you can help? Thanks

[artemdumanov]

Example usage. But result is always the same.

import { saveAs } from 'file-saver';
import * as docx from 'docx';

// const { Document } = docx;

export const downloadDocx = () => {
  // @ts-ignore
  const document = new docx.Document({
    sections: [{
      children: [
        new docx.Paragraph({
          children: [new docx.TextRun('Hello World')],
        }),
      ],
    }],
  });

  docx.Packer.toBlob(document).then((blob) => {
    saveAs(blob, 'document.docx');
  });
};

```

[artemdumanov]

Maybe that's a babel preset issue? Well. Still no clue which presets I should've install.

[artemdumanov]

I use react and a typescript. What I have for a tsconfig.

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

[artemdumanov]

What bothers me is that it refers to the ambiguity. 11509:70. There is no 70 chars at this line.

[dolanmiu]

It's hard to figure out the issue with limited stack trace

is there more you can provide, or give some reproduction steps

[artemdumanov]

@dolanmiu That's literally all I've got for the stack trace. Nothing else. What else info can be useful?

[dolanmiu]

What is your set up, is it React Native
What is your code you used to get that error etc

[artemdumanov]

My setup is React app (web not native). Created with create react app. Not ejected.

The code I used to get an error is in the before messages. So the situation is I simply cannot use any imported class Document, Paragraph or else and see the error with exactly that non-descriptive trace.

important libs:
"react": "^17.0.2",
"@mui/material": "^5.1.0",
"typescript": "4.1.2",
"docx": "^8.2.0",
node: 16.13.2,

[KCrandall6]

I believe I too am running into this issue of not being able to import and use components from the library. I have a small and simple JavaScript React app (also created with create-react-app).

Any import statements are giving me errors at the moment; even when I try to just run the simple 'Basic Usage' example from the top of the docx.js.org page I get the error 'Can't import the named export 'Document' (imported as 'Document') from default-exporting module (only default export is available)' for each component (Document, Packer, Paragraph, etc).

Some dependencies I am currently using are "react": "^18.2.0", "react-scripts": "5.0.1", "docx": "^8.2.0", among others.

[sathiya-pyramidions]

I believe I too am running into this issue of not being able to import and use components from the library. I have a small and simple JavaScript React app (also created with create-react-app).

Any import statements are giving me errors at the moment; even when I try to just run the simple 'Basic Usage' example from the top of the docx.js.org page I get the error 'Can't import the named export 'Document' (imported as 'Document') from default-exporting module (only default export is available)' for each component (Document, Packer, Paragraph, etc).

Some dependencies I am currently using are "react": "^18.2.0", "react-scripts": "5.0.1", "docx": "^8.2.0", among others.

@KCrandall6 this is happened for me with vite and i resolved it by adding the following in my vite config file.

optimizeDeps: { include: ['docx'], },

this is my config file

[dolanmiu]

I did some investigation and can conclude that it is only a problem with create-react-app

vite works fine as far as I can tell

@sathiya-pyramidions I didn't have to do what you did there with optimizeDeps

This issue is caused by the upgrade from a webpack to vite based project

I am having trouble into figuring out why create-react-app has an issue though. Using a node.js based commonJS project and ESM project works fine, so it must be something to do with create-react-app

[sathiya-pyramidions]

@dolanmiu checkout this codesandbox, this is how my project base looks like
https://codesandbox.io/p/sandbox/intelligent-noyce-qs5349

[dolanmiu]

@sathiya-pyramidions I am not sure, it works for me fine with vite and your code:

https://codesandbox.io/p/sandbox/intelligent-noyce-qs5349

[sathiya-pyramidions]

@dolanmiu Does the generate button shows for you? For me it gives me the following errors. I have tried on different devices but it still be the same
On Chrome:

On firefox

[dolanmiu]

I don't get that issue with my link above ^

I do with your link though, try seeing what I did

[ntorrey]

I believe I too am running into this issue of not being able to import and use components from the library. I have a small and simple JavaScript React app (also created with create-react-app).

Any import statements are giving me errors at the moment; even when I try to just run the simple 'Basic Usage' example from the top of the docx.js.org page I get the error 'Can't import the named export 'Document' (imported as 'Document') from default-exporting module (only default export is available)' for each component (Document, Packer, Paragraph, etc).

Some dependencies I am currently using are "react": "^18.2.0", "react-scripts": "5.0.1", "docx": "^8.2.0", among others.

I'm having the same issues in my angular app:
"Error: export 'Document' (imported as 'Document') was not found in 'docx' (module has no exports)"
...and the same for all other imports.
Nevermind. I was using 8.2.1.
8.2.2 fixed it.

[momoca]

 ERROR  Failed to compile with 1 errors                                                                         21:04:07

 error  in ./node_modules/docx/build/index.js

Module parse failed: Unexpected token (9836:70)
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
(Source code omitted for this binary file)

 @ ./src/ipcMain.js 3:13-28
 @ ./src/background.ts
 @ multi ./src/background.ts

[Hunterzhaoliu]

@momoca Worked around this error by downgrading to 8.0.4

[momoca]

@Hunterzhaoliu think you /:)

[ghost]

@momoca Worked around this error by downgrading to 8.0.4

This solved my issue. Thanks!

[DrSweat]

@momoca Worked around this error by downgrading to 8.0.4

Thanks! this resolve the issue I am facing.

I working on Kibana 8.1.4 and it doesnt use vite but do use webpack

These are the dependencies I am using

"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.5",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"babel-loader": "^8.2.2",
"webpack": "^4.41.5",

[BrentFarese]

 ERROR  Failed to compile with 1 errors                                                                         21:04:07

 error  in ./node_modules/docx/build/index.js

Module parse failed: Unexpected token (9836:70)
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
(Source code omitted for this binary file)

 @ ./src/ipcMain.js 3:13-28
 @ ./src/background.ts
 @ multi ./src/background.ts

I am getting this same issue right now on 8.2.3 and I can confirm that downgrading to 8.0.4 resolves it as @Hunterzhaoliu mentioned.

[icleolion]

FYI this is still an issue with v8.3.0, only now the error is:
ERROR in ./node_modules/docx/build/index.mjs 10008:70
Module parse failed: Unexpected token (10008:70)
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

[dolanmiu]

My setup is React app (web not native). Created with create react app. Not ejected.

I just tried to reproduce this on 8.3.0 with create-react-app using Webpack, and theres no issues.

icleolion What is your set up?

[icleolion]

Ok, done some digging. Line 10008 uses the ?? operator, which in ES6 output was being rewritten into a conditional expression. In ES2020 it's left untouched.

When you switched your tsconfig to target ES2020 instead of ES6, this library lost support for webpack 4 and node <14. Also you have increased the risk of issues being raised for bugs in browser land, as ES2020 has features unsupported by a not insignificant percentage of in-use browsers.

There are a few options:

1. Go back to targeting ES6/ES2015, safe in the knowledge that all modern browsers are not going to get tripped up by whatever javascript features you choose to use.
2. According to node.green if you want to stick to supporting node >= 10 as currently set in your package.json and support webpack 4, you'll need to change target to ES2017.
3. If you don't want to go back to ES2017, but are happy to support webpack 4 you can go as high as ES2019 but you'll need to change the engines field in package.json to node >=12.
4. If you want to stay on ES2020 and drop support for webpack 4, then you should also change the engines field to node >= 16.3.0. To prevent further issues being raised on this I would also recommend that the readme is updated to make it clear that this library no longer supports webpack 4 without additional compilation being done by the user. Hopefully you don't go down this route though as it isn't standard practice for end users to compile anything within node_modules.

Hopefully this helps.

[dolanmiu]

@icleolion thanks for this, very informative, I learnt a lot

I will try the first 3 options

Edit: I have made a PR #2473 to go with option 1, to target 2015 to give the most backwards compatability again. Hopefully it should fix this issue.

Will cut a new version with this fix

Comment/Re-open if it still fails

[icleolion]

So this hasn’t worked. Final bundle is identical to previous version. As I don’t have experience with typescript or vite, I can’t be certain of the fix. But based on what I’ve just read at link below, tsconfig.json#compilerOptions.target is being ignored in favour of vite.config.ts#build.target. Which being undefined in your vite.config.ts is therefore defaulting to es2020.

https://vitejs.dev/guide/features#target

[dolanmiu]

re-opened the issue. I will have another shot at it later

Edit, made a PR here: #2492