Skip to content
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

Module parse failed at ./node_modules/posthog-js/dist/module.js 10:1199 #1484

Open
kiranP007 opened this issue Oct 18, 2024 · 33 comments
Open
Labels
SDK Support General SDK issues rather than being related to a feature team

Comments

@kiranP007
Copy link

We followed the following steps:

Step 1: Installed the latest posthog-js version, that is, 1.174.0

Step 2: We added import posthogJS from 'posthog-js' inside one js file

Step 3: We ran the npm run build command

Step 4: Received Module parse failed at ./node_modules/posthog-js/dist/module.js 10:1199 error

Please check the attached image for more info.
Module parse failed

Note: when we remove posthog from the codebase, then the npm run build command succeeded

Note: We are currently using v12.22.7 node version.

@cf-martin
Copy link

We are also seeing this with the following error:

SyntaxError: /home/runner/work/layout-components/layout-components/node_modules/posthog-js/dist/main.js: Missing class properties transform.
       8 |  *
       9 |  * from https://github.com/LiosK/uuidv7/blob/e501462ea3d23241de13192ceae726956f9b3b7d/src/index.ts
    > 10 |  */Math.trunc||(Math.trunc=function(e){return e<0?Math.ceil(e):Math.floor(e)}),Number.isInteger||(Number.isInteger=function(e){return 

@marinodekker
Copy link

Our codebase was fine last week.
Yesterday I ran our pipeline and received the same errors:

ERROR in ./node_modules/posthog-js/dist/module.js 10:1199
Module parse failed: Unexpected token (10:1199)

@kiranP007
Copy link
Author

Our codebase was fine last week. Yesterday I ran our pipeline and received the same errors:

ERROR in ./node_modules/posthog-js/dist/module.js 10:1199
Module parse failed: Unexpected token (10:1199)

Same. We did not change anything in our codebase; we just ran the pipeline and started to encounter this issue.

@VKunak
Copy link

VKunak commented Oct 19, 2024

image

The same problem on Cloudflare. Updating the package to the latest version did not yield any results.

@santong
Copy link

santong commented Oct 23, 2024

same error
image

@matt-peck
Copy link

matt-peck commented Oct 24, 2024

Encounterd this issue today after upgrading to 1.174.0. It appears that this issue was introduced in 1.172.0 here: #1480

Specific error I'm getting:

/posthog-js/dist/module.js 574:12
Module parse failed: Unexpected token (574:12)
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.
| }
| class qe {
>   timestamp = 0;
|   counter = 0;
|   random = new Ue();

@matt-peck
Copy link

After some experimentation building posthog-js locally. The source of the issue appears to be the difference between the es5 and es6 targets in the babel-preset/env options. Namely, the IE11 target.

I found that adding @babel/plugin-transform-class-properties to rollup.config.js babel plugins array allowed my react app to build without the error above.

I'm not certain, but I think that is an indication that this older create-react-app I'm building requires that transform....potentially because its own babel loader is using the older target.

With that being said, after reviewing the code, it wasn't super clear to me how I could, from my react app, select the es5 plugins.

@dmonterde
Copy link

Encounterd this issue today after upgrading to 1.174.0. It appears that this issue was introduced in 1.172.0 here: #1480

Specific error I'm getting:

/posthog-js/dist/module.js 574:12
Module parse failed: Unexpected token (574:12)
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.
| }
| class qe {
>   timestamp = 0;
|   counter = 0;
|   random = new Ue();

Thanks, I just downgraded to 1.171.0 and my project worked again (vite+quasar).

@robertbutleratcfusacorpcom
Copy link

robertbutleratcfusacorpcom commented Oct 30, 2024

After some experimentation building posthog-js locally. The source of the issue appears to be the difference between the es5 and es6 targets in the babel-preset/env options. Namely, the IE11 target.

I found that adding @babel/plugin-transform-class-properties to rollup.config.js babel plugins array allowed my react app to build without the error above.

I'm not certain, but I think that is an indication that this older create-react-app I'm building requires that transform....potentially because its own babel loader is using the older target.

With that being said, after reviewing the code, it wasn't super clear to me how I could, from my react app, select the es5 plugins.

I'm still having the issue after down grading and also after upgrading but it only happens when I'm running with the development server. I'm able to build (i.e. yarn build) but when I start the project using 'yarn start' I get the same error. Any ideas?

frontend | yarn run v1.22.19
frontend | $ react-scripts start
frontend | ℹ 「wds」: Project is running at http://172.17.0.9/
frontend | ℹ 「wds」: webpack output is served from
frontend | ℹ 「wds」: Content not from webpack is served from /app/public
frontend | ℹ 「wds」: 404s will fallback to /
frontend | Starting the development server...
frontend |
frontend | Browserslist: caniuse-lite is outdated. Please run:
frontend | npx update-browserslist-db@latest
frontend | Why you should do it regularly: https://github.com/browserslist/update-db#readme
frontend | Failed to compile.
frontend |
frontend | ./node_modules/posthog-js/dist/module.js 574:12
frontend | Module parse failed: Unexpected token (574:12)
frontend | File was processed with these loaders:
frontend | * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
frontend | You may need an additional loader to handle the result of these loaders.
frontend | | }
frontend | | class qe {
frontend | > timestamp = 0;
frontend | | counter = 0;
frontend | | random = new Ue();

@matt-peck
Copy link

@robertbutleratcfusacorpcom I wanted to give this another stab this morning because I currently have some issues with the fetch wrapper and was fairly disappointed that not being able to opt into future releases meant I wouldn't be able to receive new features or a fix.

Here is what I did to enable my app, using react-scripts v4 to be able to install latest version of posthog-js.

Steps

  1. Install dependencies
    npm install react-app-rewired@2 customize-cra@1

  2. Create config-overrides.js at root of create-react-app project (see code below)

  3. You may also need to install some of the babel plugins, look for a yellow warning

  4. Replace npm scripts using react-scripts with react-app-rewired
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",

Reference: config-overrides.js

const { override } = require("customize-cra");

const overrideJsLoaders = () => (config) => {
  const excludeRegex = /@babel(?:\/|\\{1,2})runtime/;

  config.module.rules = config.module.rules.map((rule) => {
    if (rule.oneOf) {
      rule.oneOf = rule.oneOf
        .filter((oneOf) => {
          return !oneOf.test?.toString().includes("js");
        })
        .concat({
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          exclude: excludeRegex,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  { targets: ">0.5%, last 2 versions, Firefox ESR, not dead, IE 11" },
                ],
              ],
              plugins: ["@babel/transform-react-jsx"],
              babelrc: false,
              configFile: false,
              compact: false,
              cacheDirectory: true,
              cacheCompression: false,
              cacheIdentifier:
                "production:[email protected]:[email protected]:[email protected]:[email protected]",
              sourceMaps: true,
              inputSourceMap: true,
            },
          },
        });
    }

    return rule;
  });

  return config;
};

module.exports = override(overrideJsLoaders());

There are several ways to do this, but I noticed my config had multiple rules transpiling the same files and I just wanted to simplify it. So I removed those loaders with the filter then a simple one based on a copy of the original to cover all js files. I'm sure there is a better way, I just didn't want to spend my whole day on it.

The main fix was forcing the preset to use the es5 build targets (IE 11) I mentioned before.

Hope this helps!

@zatziky
Copy link

zatziky commented Oct 31, 2024

Downgrading to 1.171.0 helped. But from today the sessions are not being recorded... (Maybe there's a breaking change 1.178.0 which is the current latest?)

@robertbutleratcfusacorpcom

@robertbutleratcfusacorpcom I wanted to give this another stab this morning because I currently have some issues with the fetch wrapper and was fairly disappointed that not being able to opt into future releases meant I wouldn't be able to receive new features or a fix.

Here is what I did to enable my app, using react-scripts v4 to be able to install latest version of posthog-js.

Steps

  1. Install dependencies
    npm install react-app-rewired@2 customize-cra@1
  2. Create config-overrides.js at root of create-react-app project (see code below)
  3. You may also need to install some of the babel plugins, look for a yellow warning
  4. Replace npm scripts using react-scripts with react-app-rewired
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",

Reference: config-overrides.js

const { override } = require("customize-cra");

const overrideJsLoaders = () => (config) => {
  const excludeRegex = /@babel(?:\/|\\{1,2})runtime/;

  config.module.rules = config.module.rules.map((rule) => {
    if (rule.oneOf) {
      rule.oneOf = rule.oneOf
        .filter((oneOf) => {
          return !oneOf.test?.toString().includes("js");
        })
        .concat({
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          exclude: excludeRegex,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  { targets: ">0.5%, last 2 versions, Firefox ESR, not dead, IE 11" },
                ],
              ],
              plugins: ["@babel/transform-react-jsx"],
              babelrc: false,
              configFile: false,
              compact: false,
              cacheDirectory: true,
              cacheCompression: false,
              cacheIdentifier:
                "production:[email protected]:[email protected]:[email protected]:[email protected]",
              sourceMaps: true,
              inputSourceMap: true,
            },
          },
        });
    }

    return rule;
  });

  return config;
};

module.exports = override(overrideJsLoaders());

There are several ways to do this, but I noticed my config had multiple rules transpiling the same files and I just wanted to simplify it. So I removed those loaders with the filter then a simple one based on a copy of the original to cover all js files. I'm sure there is a better way, I just didn't want to spend my whole day on it.

The main fix was forcing the preset to use the es5 build targets (IE 11) I mentioned before.

Hope this helps!

@matt-peck I really appreciate your effort. I'll let you know if that fixes it!

@robertbutleratcfusacorpcom

@matt-peck I tried your suggestion and I'm getting this error now when I startup. It doesn't really explain what babel plugins I need to install. Maybe I'm misunderstanding the complete solution. Did you intend that I should install that babel transform plugin as well?

frontend | yarn run v1.22.19
frontend | $ react-app-rewired start
frontend | ℹ 「wds」: Project is running at http://172.17.0.9/
frontend | ℹ 「wds」: webpack output is served from
frontend | ℹ 「wds」: Content not from webpack is served from /app/public
frontend | ℹ 「wds」: 404s will fallback to /
frontend | Starting the development server...
frontend |
frontend | Failed to compile.
frontend |
frontend | multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js
frontend | Module not found: Can't resolve 'babel-loader' in '/app'

@matt-peck
Copy link

matt-peck commented Oct 31, 2024 via email

@robertbutleratcfusacorpcom

“Can’t resolve babel-loader”, can you try installing babel-loader….i think I was using version 7

I believe it's already installed as was indicated in the original error I was sharing:

frontend | ./node_modules/posthog-js/dist/module.js 574:12
frontend | Module parse failed: Unexpected token (574:12)
frontend | File was processed with these loaders:
frontend | * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
frontend | You may need an additional loader to handle the result of these loaders.

But, I'll try it again and install babel loader to see if that makes any difference.

@robertbutleratcfusacorpcom

@matt-peck Although installing babel loader did make a difference I'm not sure it's for the better. I'm getting an error parsing code which used to work just fine. I had assumed that babel-loader was already installed but after installing per your suggestion I can see that there was no entry for 'babel-loader' in the package.json file. In any case it doesn't seem to like our code and I feel like I'd be opening up a can of worms going down this road. I appreciate your help though.

frontend | yarn run v1.22.19
frontend | $ react-app-rewired start
frontend | ℹ 「wds」: Project is running at http://172.17.0.9/
frontend | ℹ 「wds」: webpack output is served from
frontend | ℹ 「wds」: Content not from webpack is served from /app/public
frontend | ℹ 「wds」: 404s will fallback to /
frontend | Starting the development server...
frontend |
frontend | Browserslist: caniuse-lite is outdated. Please run:
frontend | npx update-browserslist-db@latest
frontend | Why you should do it regularly: https://github.com/browserslist/update-db#readme
frontend | Failed to compile.
frontend |
frontend | ./src/component/context/StateProvider.js
frontend | SyntaxError: /app/src/component/context/StateProvider.js: Unexpected token, expected "," (16:24)
frontend |
frontend | 14 | export const StateContext = createContext({});
frontend | 15 |
frontend | > 16 | const getParam = (params: URLSearchParams, key = '', defaultValue = null, devValue = null) => {
frontend | | ^
frontend | 17 | if ((Cookies.get(key) === undefined || Cookies.get(key) === '')) {
frontend | 18 | if (process.env.NODE_ENV === 'development') {
frontend | 19 | Cookies.set(key, devValue, {expires: 1})
frontend | at parser.next ()
frontend | at normalizeFile.next ()
frontend | at run.next ()
frontend | at transform.next ()

@posthog-contributions-bot
Copy link

This issue has 2129 words at 16 comments. Issues this long are hard to read or contribute to, and tend to take very long to reach a conclusion. Instead, why not:

  1. Write some code and submit a pull request! Code wins arguments
  2. Have a sync meeting to reach a conclusion
  3. Create a Request for Comments and submit a PR with it to the meta repo or product internal repo

Is this issue intended to be sprawling? Consider adding label epic or sprint to indicate this.

@robertbutleratcfusacorpcom
Copy link

robertbutleratcfusacorpcom commented Nov 4, 2024

@matt-peck I have made some progress since my last comment. It turns out the parsing error was pretty minor and I was able to fix that error by removing the "URLSearchParams" type hinting. Now the project starts up but I immediately get the following error when I browse to the site.

ReferenceError: React is not defined

After doing some digging I found some reference to using the @babel/preset-react plugin with the runtime: "automatic" setting. I added the configuration to the config-overrides.js example you gave me by adding an entry to the options: presets: collection as follows:

                        presets: [
                            [
                                "@babel/preset-env",
                                { targets: ">0.5%, last 2 versions, Firefox ESR, not dead, IE 11" },
                            ],
                            [
                                "@babel/preset-react",
                                { runtime: "automatic" }
                            ],
                        ],

That didn't seem to help but not sure if that was the correct way to enable the plugin. Let me know if you have any ideas about how to fix that.

@robertbutleratcfusacorpcom

@matt-peck So this morning I gave this another shot and realized that I have two different lock files for my application. I have a lock file for yarn and another for npm. To be honest I can't even remember how I originally installed PostHog (i.e. via npm or yarn). But after updating both of them to the latest version, 1.181.0 it works again.

Appreciate all of your help!

@ricky11
Copy link

ricky11 commented Nov 8, 2024

Getting the same error here using Vue 2 with webpack. Upgrading from 1.161.6 -> 1.172.0 failed likely because of the es6 upgrade. Why isnt this listed as a breaking change? I am currently importing in my main.js file as so:

import posthogPlugin from "./plugins/posthog"; // import the plugin
Vue.use(posthogPlugin);

Is their update docs that show how to import them using ES6?

@yvescleuder
Copy link

Getting the same error here using Vue 2 with webpack. Upgrading from 1.161.6 -> 1.172.0 failed likely because of the es6 upgrade. Why isnt this listed as a breaking change? I am currently importing in my main.js file as so:

import posthogPlugin from "./plugins/posthog"; // import the plugin Vue.use(posthogPlugin);

Is their update docs that show how to import them using ES6?

same problem

@zatziky
Copy link

zatziky commented Nov 13, 2024

Same problem here...

@andrey-kotsuba
Copy link

I encountered a similar issue when upgrading posthog-js due to the addition of core-js dependencies, for posthog-js - core-js "^3.38.1", for nuxt 2.18.1 - core-js@^3.37.1 &
The following solution helped resolve it in my Nuxt 2 project:
In nuxt.config.js, under the build section, add:
build: { transpile: ['posthog-js'] }
This configures Nuxt to transpile the posthog-js module, allowing it to handle any ES6+ syntax or core-js polyfills that might be causing conflicts during the build.

@zatziky
Copy link

zatziky commented Nov 13, 2024

Even after upgrading posthog-js to 1.184.1 I got the same error. :-/

We are running a Vue2 project.
I tried adding babel extensions. Removing and starting project from scratch.

image
image

The error from above points to
image

@andrey-kotsuba
Copy link

Even after upgrading posthog-js to 1.184.1 I got the same error. :-/

We are running a Vue2 project. I tried adding babel extensions. Removing and starting project from scratch.

image image

The error from above points to image

you can use in vue.config.js :
module.exports = { transpileDependencies: ['posthog-js'], };

@allanlewis
Copy link

you can use in vue.config.js : module.exports = { transpileDependencies: ['posthog-js'], };

This didn't work for me, perhaps I need some additional Babel extensions and/or "loader" packages, or config?

@andrey-kotsuba
Copy link

andrey-kotsuba commented Nov 13, 2024

you can use in vue.config.js : module.exports = { transpileDependencies: ['posthog-js'], };

This didn't work for me, perhaps I need some additional Babel extensions and/or "loader" packages, or config?

you can try this in vue.config.js:
module.exports = { configureWebpack: { module: { rules: [ { test: /\.js$/, include: /node_modules\/posthog-js/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, }, };

@allanlewis
Copy link

you can try this in vue.config.js: module.exports = { configureWebpack: { module: { rules: [ { test: /\.js$/, include: /node_modules\/posthog-js/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, }, };

I'm using Nuxt. If I add that to nuxt.config.js then I get a similar error the OP:

ERROR in ./node_modules/posthog-js/dist/module.js 10:1199
Module parse failed: Unexpected token (10:1199)
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
|  *
|  * from https://github.com/LiosK/uuidv7/blob/e501462ea3d23241de13192ceae726956f9b3b7d/src/index.ts
>  */Math.trunc...<lots of minified code>
| //# sourceMappingURL=module.js.map
| 
 @ ./src/plugins/posthog.js 18:0-33 74:6-13 107:24-31 115:10-17 123:10-17 124:10-17 127:12-19 130:10-17 131:10-17 143:4-11 173:4-11 176:22-29 184:8-15 191:8-15 192:8-15 195:10-17 198:8-15 199:8-15 206:29-36
<stacktrace ascends into my build>

@andrey-kotsuba
Copy link

you can try this in vue.config.js: module.exports = { configureWebpack: { module: { rules: [ { test: /\.js$/, include: /node_modules\/posthog-js/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, }, };

I'm using Nuxt. If I add that to nuxt.config.js then I get a similar error the OP:

ERROR in ./node_modules/posthog-js/dist/module.js 10:1199
Module parse failed: Unexpected token (10:1199)
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
|  *
|  * from https://github.com/LiosK/uuidv7/blob/e501462ea3d23241de13192ceae726956f9b3b7d/src/index.ts
>  */Math.trunc...<lots of minified code>
| //# sourceMappingURL=module.js.map
| 
 @ ./src/plugins/posthog.js 18:0-33 74:6-13 107:24-31 115:10-17 123:10-17 124:10-17 127:12-19 130:10-17 131:10-17 143:4-11 173:4-11 176:22-29 184:8-15 191:8-15 192:8-15 195:10-17 198:8-15 199:8-15 206:29-36
<stacktrace ascends into my build>

for Nuxt - #1484 (comment)

@allanlewis
Copy link

for Nuxt - #1484 (comment)

Ah, I'd missed that one. However, that solution isn't working for me, but this is:

# nuxt.config.js

   build: {
...
    extend(config) {
      config.module.rules.push({
        test: /\.js$/,
        include: /node_modules\/posthog-js/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      })
    },
...
  },

@zatziky
Copy link

zatziky commented Nov 14, 2024

Even after upgrading posthog-js to 1.184.1 I got the same error. :-/
We are running a Vue2 project. I tried adding babel extensions. Removing and starting project from scratch.
image image
The error from above points to image

you can use in vue.config.js : module.exports = { transpileDependencies: ['posthog-js'], };

This one worked! ✅

@ricky11
Copy link

ricky11 commented Nov 14, 2024

that worked for me too, turns out i have a tonne of other modules that needed transpiling such as:

transpileDependencies: ['pretty-bytes','nanoid','vue-flatpickr-component','posthog-js'],

@yuchen-z
Copy link

I encountered a similar issue when upgrading posthog-js due to the addition of core-js dependencies, for posthog-js - core-js "^3.38.1", for nuxt 2.18.1 - core-js@^3.37.1 & The following solution helped resolve it in my Nuxt 2 project: In nuxt.config.js, under the build section, add: build: { transpile: ['posthog-js'] } This configures Nuxt to transpile the posthog-js module, allowing it to handle any ES6+ syntax or core-js polyfills that might be causing conflicts during the build.

This worked for my Nuxt 2 project, thanks!

@robbie-c robbie-c added the SDK Support General SDK issues rather than being related to a feature team label Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
SDK Support General SDK issues rather than being related to a feature team
Projects
None yet
Development

No branches or pull requests