Failed to compile -typescript react-

[tomasalles]

The goal What are you trying to achieve? Run convert function

Best attempt What you've tried to do so far to achieve your goal? Installed html-to-text on a react typescript project and @types/html-to-text

The question What you can't figure out yourself? getting "Failed to compile.

./node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.mjs Attempted import error: 'Picker' is not exported from 'selderee'."

Prior research Where did you look and what you've tried to do so far in order to figure out the answer before writing here? Is there anything else you can try? Tried pointing Picker import in ./node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.mjs to selderee/lib/selderee.mjs which is file where Picker is exported but with no success.

[KillyMXI]

Which bundler is used inside the project? There is a known Webpack issue:

• #229

[tomasalles]

I'm using create-react-app so under the hood it uses webpack I guess

[KillyMXI]

Well, then it is certainly the same issue with #229. Webpack version 4 needs some manual configuration.

[german-st]

Hello.

I have same issue. I use create-react-app. There is no way to change the version webpack in this case, the reactJS requires its own version of webpack. If you look at the related issues, then as I understand it, you cannot change the webpack config in react(

How can we be)?

UPD: I tried to do this: Find webpack config file: node_modules/react-scripts/config/webpack.config.js Add to webpack config in rules section:

{
        type: 'javascript/auto',
        test: /\.mjs$/,
        use: []
      }

I still get the error:

[KillyMXI]

I'm pretty sure there are no user-serviceable parts inside node_modules. webpack.config.js is usually supposed to be in the root folder of your project. If the project template doesn't come with it then you should be able to create it by yourself. Refer to webpack docs.

PS. No need to cast me in different threads. I get notifications on every activity in my repos.

[zbagdzevicius]

I had same problem, that was because I also had @types/html-to-text installed, I deleted @types package and it worked like a charm

[davidystephenson]

I had same problem, that was because I also had @types/html-to-text installed, I deleted @types package and it worked like a charm

When I do this, I receive an error saying to install @types/html-to-text if it exists. How can use html-to-text in typescript without the @types?

[KillyMXI]

Technically, you don't need @types/html-to-text. If you can disable the error then you can keep it using as in JS, untyped, or provide your own, perhaps simplified, type declarations.

But the whole connection to @types/html-to-text seems really esoteric to me. What it has to do with webpack?

[davidystephenson]

I don't know how to configure webpack. I'm trying to get html-to-text working in my create-react-app TypeScript project and I get the "Picker" error when I install @types/html-to-text. I'm not sure how to disable the error, but I would prefer to have the types if I can.

[KillyMXI]

Just to be sure: Is @types/html-to-text installed as a dev dependency? But I really don't understand how it can affect anything.

I don't know how to configure webpack.

Webpack 4 needs a rule for .mjs or .cjs files. You'll have to find the webpack config file in your project, or create one if it doesn't exist. (Refer to webpack docs). Then in the config file, add the rule for .mjs or .cjs files (as in there or there or there).

A bare webpack.config.js with this single rule might look like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.mjs$/, // or cjs
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  }
}

But I don't have a project to test it. For this issue I only base my answers on what I can find. I'd be happy if someone can explain it better.

[mattsrobot]

I also have this problem :(

[farshidinanloo]

this will fix:

1. install react-app-rewired
2. create config-overrides.js
3. add this code in config-overrides.js:

const {
	override,
	addWebpackModuleRule,
} = require('customize-cra');

module.exports = override(
	addWebpackModuleRule({
		test: /\.(cjs)$/,
		exclude: /@babel(?:\/|\\{1,2})runtime/,
		loader: require.resolve('babel-loader'),
		options: {
			babelrc: false,
			configFile: false,
			compact: false,
			presets: [
				[
					require.resolve('babel-preset-react-app/dependencies'),
					{ helpers: true },
				],
			],
			cacheDirectory: true,
			// See #6846 for context on why cacheCompression is disabled
			cacheCompression: false,
			// Babel sourcemaps are needed for debugging into node_modules
			// code.  Without the options below, debuggers like VSCode
			// show incorrect code and set breakpoints on the wrong lines.
			sourceMaps: true,
			inputSourceMap: true,
		},
	})
);

5. change start scripts to this: "start": "react-app-rewired start"

[KillyMXI]

v9 preview version is available now: npm i html-to-text@preview

Please let me know whether it works better with webpack.

[KillyMXI]

Version 9 is now public. Based on little feedback I've got in #252, I assume webpack issue should be fixed now. Please open a new issue in case there is any problem with version 9.