New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
require is not supported by ESM #325
Comments
First of all, curlconverter needs Node 12+ to work. This issue is related to the fact that there's two ways to import stuff in JavaScript, the old way const curlconverter = require('curlconverter') and the new way, ESM import * as curlconverter from 'curlconverter' The new way requires that you have this line in your package.json to work, and you also can't mix the old way and the new way in the same package "type": "module", But this is surprising because I thought curlconverter 3 is not an ESM module... maybe try reading stuff here, it seems to be a similar issue https://stackoverflow.com/questions/69041454/error-require-of-es-modules-is-not-supported-when-importing-node-fetch Finally, you could upgrade to curlconverter 4 with Let me know if you ever figure it out. |
Please post step-by-step instructions to reproduce this issue or make a git repo that I can git clone and see the issue. |
./node_modules/@curlconverter/yargs/lib/platform-shims/esm.mjs 16:41
Module parse failed: Unexpected token (16:41)
File was processed with these loaders:
You may need an additional loader to handle the result of these loaders.
| const REQUIRE_ERROR = 'require is not supported by ESM';
| const REQUIRE_DIRECTORY_ERROR = 'loading a directory of commands is not supported yet for ESM';
I used version 3.21.0 in the React
node -v 10.13.0
npm -v 6.4.1
this is my package.json
{
"name": "apipost_fe",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.12.3",
"@babel/plugin-syntax-jsx": "^7.16.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
"@svgr/webpack": "5.5.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^5.1.0",
"ali-oss": "^6.16.0",
"art-template": "^4.13.2",
"async-validator": "^4.0.7",
"axios": "^0.24.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react-app": "^10.0.0",
"bfj": "^7.0.2",
"camelcase": "^6.1.0",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"classnames": "^2.3.1",
"cropperjs": "^1.5.12",
"crypto-js": "^4.1.1",
"css-loader": "4.3.0",
"curlconverter": "^3.21.0",
"dayjs": "^1.10.7",
"dexie": "^3.0.3",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"dva": "^2.4.1",
"easymde": "^2.16.1",
"eslint": "^7.11.0",
"eslint-config-react-app": "^6.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.9.2",
"eslint-webpack-plugin": "^2.5.2",
"file-loader": "6.1.1",
"fs-extra": "^9.0.1",
"history": "^5.0.3",
"html-beautify": "^1.0.4",
"html-webpack-plugin": "4.5.0",
"identity-obj-proxy": "3.0.0",
"jest": "26.6.0",
"jest-circus": "26.6.0",
"jest-resolve": "26.6.0",
"jest-watch-typeahead": "0.6.1",
"jquery": "^3.6.0",
"js-beautify": "^1.14.0",
"json-bigint": "^1.0.0",
"json5": "^2.2.0",
"jsondiffpatch": "^0.4.1",
"jsonpath": "^1.1.0",
"less": "^4.1.2",
"less-loader": "^5.0.0",
"lodash": "^4.17.21",
"markdown-it": "^12.3.2",
"mime-types": "^2.1.34",
"mini-css-extract-plugin": "0.11.3",
"moment": "^2.29.1",
"optimize-css-assets-webpack-plugin": "5.0.4",
"picocolors": "^0.2.1",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.2.1",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "5.0.2",
"postcss-selector-parser": "^6.0.8",
"prompts": "2.4.0",
"prop-types": "^15.7.2",
"qrcode-react": "^0.1.16",
"rc-field-form": "^1.22.0-2",
"react": "^17.0.2",
"react-addons-update": "^15.6.3",
"react-app-polyfill": "^2.0.0",
"react-copy-to-clipboard": "^5.0.4",
"react-cropper": "^2.1.8",
"react-dev-utils": "^11.0.3",
"react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2",
"react-dom": "^17.0.2",
"react-load-script": "0.0.6",
"react-pdf-js": "^5.1.0",
"react-refresh": "^0.8.3",
"react-rnd": "^10.3.5",
"react-router-config": "^5.1.1",
"react-simplemde-editor": "^5.0.2",
"react-transition-group": "^4.4.2",
"resolve": "1.18.1",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^10.0.5",
"semver": "7.3.2",
"source-map": "^0.6.1",
"style-loader": "1.3.0",
"ts-pnp": "1.2.0",
"tunnel": "0.0.6",
"url-loader": "4.1.1",
"uuid": "^8.3.2",
"vm": "^0.1.0",
"vm2": "^3.9.5",
"web-vitals": "^1.0.1",
"webpack": "4.44.2",
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4",
"x2js": "^3.4.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"build:rc": "cross-env NODE_ENV=rc node scripts/build.js",
"dev": "node scripts/build.js",
"test": "node scripts/test.js",
"commit": " npm run lint && git-cz ",
"genlog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"lint": "eslint --ext .jsx,.js src/ --fix",
"build:stats": "webpack --mode production --json > stats.json",
"svgmap": "node scripts/svgmap.js"
},
"eslintConfig": {
"root": true,
"extends": [
"react-app",
"react-app/jest",
"airbnb"
],
"env": {
"browser": true
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"/src"
],
"collectCoverageFrom": [
"src//*.{js,jsx,ts,tsx}",
"!src//.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"/src/setupTests.js"
],
"testMatch": [
"/src//tests//.{js,jsx,ts,tsx}",
"/src/**/.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testRunner": "D:\IDE\apipost_fe\node_modules\jest-circus\runner.js",
"transform": {
"^.+\.(js|jsx|mjs|cjs|ts|tsx)$": "/config/jest/babelTransform.js",
"^.+\.css$": "/config/jest/cssTransform.js",
"^(?!.\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\]node_modules[/\\].+\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\.module\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\.module\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app",
"@babel/preset-react"
]
},
"devDependencies": {
"@babel/preset-react": "^7.16.0",
"@monaco-editor/react": "^4.3.0",
"cache-loader": "^4.1.0",
"commitizen": "^4.2.4",
"compression-webpack-plugin": "^5.0.1",
"cross-env": "^7.0.3",
"css-minimizer-webpack-plugin": "^3.4.1",
"cz-conventional-changelog": "^3.3.0",
"dependency-cruiser": "^11.3.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-webpack": "^0.13.2",
"eslint-loader": "^4.0.2",
"file-saver": "^2.0.5",
"html-beautify": "^1.0.4",
"http-proxy-middleware": "^2.0.1",
"husky": "^7.0.4",
"immutability-helper": "^3.1.1",
"import": "0.0.6",
"inspectpack": "^4.7.1",
"js-beautify": "^1.14.0",
"loadsh": "0.0.4",
"mockjs": "^1.1.0",
"monaco-editor": "^0.31.1",
"monaco-editor-webpack-plugin": "^7.0.1",
"react-color": "^2.19.3",
"react-load-script": "0.0.6",
"socket.io": "^4.4.1",
"terser-webpack-plugin": "^4.2.3",
"unused-webpack-plugin": "^2.4.0",
"webpack-bundle-analyzer": "^4.5.0"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"husky": {
"hooks": {
"commit-msg": "commitlint -e $GIT_PARAMS",
"pre-commit": "npm run lint"
}
},
"settings": {
"import/resolver": "webpack"
}
}
this is my webpack.config.js
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const ESLintPlugin = require('eslint-webpack-plugin');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const postcssNormalize = require('postcss-normalize');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const UnusedWebpackPlugin = require('unused-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const { DuplicatesPlugin } = require('inspectpack/plugin');
const getClientEnvironment = require('./env');
const modules = require('./modules');
const paths = require('./paths');
// eslint-disable-next-line import/no-dynamic-require
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const webpackDevClientEntry = require.resolve(
'react-dev-utils/webpackHotDevClient',
);
const reactRefreshOverlayEntry = require.resolve(
'react-dev-utils/refreshOverlayInterop',
);
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000', 10,
);
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc;
// style files regexes
const cssRegex = /.css$/;
const cssModuleRegex = /.module.css$/;
const sassRegex = /.(scss|sass)$/;
const sassModuleRegex = /.module.(scss|sass)$/;
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile');
// We will provide
paths.publicUrlOrPath
to our app// as %PUBLIC_URL% in
index.html
andprocess.env.PUBLIC_URL
in JavaScript.// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const shouldUseReactRefresh = env.raw.FAST_REFRESH;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in
static/css
, use '../../' to locate index.html folder// in production
paths.publicUrlOrPath
can be a relative pathoptions: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
// eslint-disable-next-line global-require
require('postcss-flexbugs-fixes'),
// eslint-disable-next-line global-require
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
},
);
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
// eslint-disable-next-line no-nested-ternary
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry:
isEnvDevelopment && !shouldUseReactRefresh
? [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
//
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
//
// When using the experimental react-refresh integration,
// the webpack plugin takes care of injecting the dev client for us.
webpackDevClientEntry,
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
]
: paths.appIndexJs,
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// webpack uses
publicPath
to determine where the app is being served from.// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? (info) => path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\/g, '/')
: isEnvDevelopment
&& ((info) => path.resolve(info.absoluteResourcePath).replace(/\/g, '/')),
// Prevents conflicts when multiple webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction:
webpackJsonp${appPackageJson.name}
,// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: 'this',
},
externals: {
Alioss: 'aliyun-oss-sdk',
React: 'umd React',
ReactDom: 'umd ReactDom',
$: '$',
_: 'lodash',
// lodash: 'lodash',
Mock: 'mock',
less: 'less',
},
optimization: {
minimize: isEnvProduction,
// concatenateModules: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: false,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
//
inline: false
forces the sourcemap to be output into a// separate file
inline: false,
//
annotation: true
appends the sourceMappingURL to the end of// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
minSize: 3000,
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
// https://github.com/facebook/create-react-app/issues/5358
runtimeChunk: {
name: (entrypoint) =>
runtime-${entrypoint.name}
,},
},
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want
node_modules
to "win"// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || [],
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
//
web
extension prefixes have been added for better support// for React Native Web.
extensions: paths.moduleFileExtensions
.map((ext) =>
.${ext}
).filter((ext) => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
'@component': path.resolve(__dirname, '../src/component'),
'@Services': path.resolve(__dirname, '../src/services'),
'@apipost-icons': path.resolve(__dirname, '../src/pages/icons'),
'@utils': path.resolve(__dirname, '../src/utils'),
'@assets': path.resolve(__dirname, '../src/assets'),
'@indexdb': path.resolve(__dirname, '../src/indexedDB'),
};
};
This error occurs when I execute this statement。
‘const curlconverter = require('curlconverter');'
The text was updated successfully, but these errors were encountered: