Loader problem

[matitorrees]

Problem Description

Overnight, my project started encountering an unexpected compilation error related to the nullish coalescing operator (??) in the react-joyride dependency. No changes were made to package installations or the Node.js version. The issue initially surfaced when I attempted to create a Docker image, and then later on my local development environment. It occurred after I deleted the node_modules folder and ran npm install again.

Development Environment

• Node.js: v14.15.4
• react-joyride: v2.6.0

Bug

./node_modules/react-joyride/dist/index.mjs 151:49 Module parse failed: Unexpected token (151:49) File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. } } parentElement = parentElement.parentElement ?? null; } return true; }

[krshnad]

I'm also facing similar issue. Tried with Node 16.20.2 and 18.17.1

Tried with react-joyride 2.6.0 and 2.5.5.

Error Log [0] ./node_modules/react-joyride/dist/index.mjs [0] Can't import the named export 'Component' from non EcmaScript module (only default export is available)

[gilbarbara]

@matitorrees Node 14.x has reached end-of-life this year, so you will probably get similar errors from now on.

Anyway, I'm reverting the build target to es5, which will increase the bundle size considerably. Update to v2.6.1, and let me know if this version fixes it.

[gilbarbara]

@krshnad The error you are having isn't related to the original post.

Feels like it's an implementation problem, so it isn't easy to understand what's happening without a minimal reproducible example. This library doesn't have a component named Component. If you can create one, open a new issue with the link.

[basefox]

node -v v14.21.3

cat node_modules/react-joyride/package.json

@gilbarbara , any suggestion ?

[shrinithi14]

I am facing the same issue. It was working till last week. I've tried with the latest version 2.6.1 but still same error. @gilbarbara Please help.

React-joyride : 2.5.5 Node version: v20.7.0

Error:

./node_modules/react-joyride/dist/index.mjs 204:49
Module parse failed: Unexpected token (204:49)
You may need an appropriate loader to handle this file type.
|     }
| 
>     parentElement = parentElement.parentElement ?? null;
|   }
|

[gilbarbara]

@basefox @shrinithi14 Do you have mjs in the loader configuration in your webpack config? Check the react-scripts config for an example.

[gilbarbara]

@shrinithi14

You are still using the 2.6.1 version, not the 2.5.5 since it is still loading the .mjs from dist, instead the .js from esm

[matitorrees]

@gilbarbara I've updated to v2.6.1, but unfortunately, the error continues to persist.

[gilbarbara]

@matitorrees

Please copy/paste your webpack config loaders.

[matitorrees]

@gilbarbara

module: {
  strictExportPresence: true,
  rules: [
    // Disable require.ensure as it's not a standard language feature.
    { parser: { requireEnsure: false } },

    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            cache: true,
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),
            resolvePluginsRelativeTo: __dirname,

          },
          loader: require.resolve('eslint-loader'),
        },
      ],
      include: paths.appSrc,
    },
    {
      // "oneOf" will traverse all following loaders until one will
      // match the requirements. When no loader matches it will fall
      // back to the "file" loader at the end of the loader list.
      oneOf: [
        // "url" loader works like "file" loader except that it embeds assets
        // smaller than specified limit in bytes as data URLs to avoid requests.
        // A missing `test` is equivalent to a match.
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve('url-loader'),
          options: {
            limit: imageInlineSizeLimit,
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
        // Process application JS with Babel.
        // The preset includes JSX, Flow, TypeScript, and some ESnext features.
        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          include: paths.appSrc,
          loader: require.resolve('babel-loader'),
          options: {
            customize: require.resolve(
              'babel-preset-react-app/webpack-overrides'
            ),

            plugins: [
              [
                require.resolve('babel-plugin-named-asset-import'),
                {
                  loaderMap: {
                    svg: {
                      ReactComponent:
                        '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                    },
                  },
                },
              ],
            ],
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: true,
            // See #6846 for context on why cacheCompression is disabled
            cacheCompression: false,
            compact: isEnvProduction,
          },
        },
        // Process any JS outside of the app with Babel.
        // Unlike the application JS, we only compile the standard ES features.
        {
          test: /\.(js|mjs)$/,
          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: shouldUseSourceMap,
            inputSourceMap: shouldUseSourceMap,
          },
        },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use MiniCSSExtractPlugin to extract that CSS
        // to a file, but in development "style" loader enables hot editing
        // of CSS.
        // By default we support CSS Modules with the extension .module.css
        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          }),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        },
        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
        // using the extension .module.css
        {
          test: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: {
              getLocalIdent: getCSSModuleLocalIdent,
            },
          }),
        },
        // Opt-in support for SASS (using .scss or .sass extensions).
        // By default we support SASS Modules with the
        // extensions .module.scss or .module.sass
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'sass-loader'
          ),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        },
        // Adds support for CSS Modules, but using SASS
        // using the extension .module.scss or .module.sass
        {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'sass-loader'
          ),
        },
        // "file" loader makes sure those assets get served by WebpackDevServer.
        // When you `import` an asset, you get its (virtual) filename.
        // In production, they would get copied to the `build` folder.
        // This loader doesn't use a "test" so it will catch all modules
        // that fall through the other loaders.
        {
          loader: require.resolve('file-loader'),
          // Exclude `js` files to keep "css" loader working as it injects
          // its runtime that would otherwise be processed through "file" loader.
          // Also exclude `html` and `json` extensions so they get processed
          // by webpacks internal loaders.
          exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
        // ** STOP ** Are you adding a new loader?
        // Make sure to add the new loader(s) before the "file" loader.
      ],
    },
  ],
}

[gilbarbara]

@matitorrees I'm not sure what's happening. I've tried running the joyride demo with react-scripts v5.0.1 with node v14.21.3 and got no errors.

You can pin the version to 2.5.5 for now. I'll investigate some more.

[gilbarbara]

@matitorrees @basefox Can you post your devDependencies? Maybe I'm loading different dependencies and that's why I can't replicate.

[basefox]

@matitorrees @basefox Can you post your devDependencies? Maybe I'm loading different dependencies and that's why I can't replicate.

"devDependencies": { "@babel/cli": "^7.6.4", "@babel/core": "^7.6.4", "@babel/node": "^7.6.3", "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-do-expressions": "^7.6.0", "@babel/plugin-proposal-export-default-from": "^7.5.2", "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0", "@babel/plugin-proposal-optional-chaining": "^7.6.0", "@babel/plugin-proposal-pipeline-operator": "^7.5.0", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-react-constant-elements": "^7.6.3", "@babel/plugin-transform-runtime": "^7.6.2", "@babel/polyfill": "^7.6.0", "@babel/preset-env": "^7.6.3", "@babel/preset-react": "^7.6.3", "@babel/runtime": "^7.6.3", "autoprefixer": "^9.6.5", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", "babel-loader": "^8.0.5", "babel-plugin-transform-react-remove-prop-types": "^0.4.14", "chalk": "^2.4.1", "compression-webpack-plugin": "^3.1.0", "concurrently": "^3.6.1", "connect-gzip-static": "^2.1.1", "connect-history-api-fallback": "^1.5.0", "copy-webpack-plugin": "^5.1.1", "coveralls": "^3.0.7", "css-loader": "^3.0.0", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", "eslint": "^5.16.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-react": "^7.16.0", "eslint-plugin-sonarjs": "^0.4.0", "eslint-watch": "^6.0.1", "express": "^4.17.1", "file-loader": "^4.2.0", "history": "^4.10.1", "html-webpack-plugin": "^3.2.0", "husky": "^0.14.3", "identity-obj-proxy": "^3.0.0", "jest": "^24.9.0", "jest-cli": "^24.9.0", "json-loader": "^0.5.7", "mini-css-extract-plugin": "^0.8.0", "mockdate": "^2.0.5", "moment-locales-webpack-plugin": "^1.1.0", "node": "^12.12.0", "opn-cli": "^5.0.0", "postcss-loader": "^3.0.0", "prompt": "^1.0.0", "prop-types": "^15.6.2", "raf": "^3.4.0", "react-hot-loader": "^4.12.15", "react-test-renderer": "^16.10.2", "redux-immutable-state-invariant": "^2.1.0", "redux-mock-store": "^1.5.3", "replace": "^1.1.1", "rimraf": "^3.0.0", "style-loader": "^1.0.0", "url-loader": "^2.2.0", "webpack": "^4.41.2", "webpack-bundle-analyzer": "^3.6.1", "webpack-dev-middleware": "^3.7.2", "webpack-hot-middleware": "^2.22.3", "webpack-md5-hash": "^0.0.6" },

[basefox]

still get erorr

with 2.5.5 version

@gilbarbara

[gilbarbara]

@basefox

If you get the error on dist/index.mjs, you are still using v2.6.x. All versions below 2.6 use esm/index.js (or lib/index.js).

To pin the version, remove the ^~ from the version in your package.json. "react-joyride": "2.5.5"

and run your package manager install command again

[basefox]

Thanks God ,

finally already done with this issue

node : v14.21.3 npm : 6.14.18

with this step:

1. rm -rf node_modules/ package-lock.json
2. npm i react-joyride@2.5.5 --save-dev
3. npm i

thank you @gilbarbara

[shrinithi14]

@shrinithi14

You are still using the 2.6.1 version, not the 2.5.5 since it is still loading the .mjs from dist, instead the .js from esm

@gilbarbara Thanks.. using 2.5.5 version works

[krshnad]

@krshnad The error you are having isn't related to the original post.

Feels like it's an implementation problem, so it isn't easy to understand what's happening without a minimal reproducible example. This library doesn't have a component named Component. If you can create one, open a new issue with the link.

Working fine with 2.5.5

[mtaba]

consider package-lock.json , there shoude be 2.5.5 too

[gilbarbara]

Hey @mtaba The package-lock.json is updated automatically when you change to a pinned version and run npm install. You should NEVER edit this file manually.

[std4453]

Just stumbled upon this.

The cause of this problem is that the mjs version contains ?? (nullish coalescing operator), which, if used untranspiled by babel and fed to webpack@4, will be seen as an unexpected token and fail to build.

Here's a similar issue with more explanations: https://github.com/PaulLeCam/react-leaflet/issues/883

For anyone that met the same problem: You can add @babel/plugin-transform-nullish-coalescing-operator to your babel configuration.