search

Iterable / iterable-web-sdk

Iterable SDK for interacting with the Iterable API to implement inside JavaScript and Node projects
https://iterable.com
MIT License
9 stars 8 forks source link

Project does not compile when importing from @iterable/web-sdk #228

Closed PsionicChic closed 8 months ago

PsionicChic commented 10 months ago

Receiving an error while compiling when trying to access the iterable sdk after installation of the package.
Installation went smoothly, and environment builds locally successfully as long as we don't try to import from @iterable/web-sdk.

Things we've tried:

Error: ./node_modules/@iterable/web-sdk/index.js 2:35242Module parse failed: Unexpected token (2:35242)You may need an appropriate loader to handle this file type.

package.json:

{
  "name": // company name,
  "version": "0.0.1",
  "description": // app description,
  "repository": {
    "type": "git",
    "url":  // git url
  },
  "engines": {
    "npm": "^8.x",
    "node": "^16.x"
  },
 "author":  // company name,
  "scripts": {
    "analyze:clean": "rimraf stats.json",
    "preanalyze": "npm run analyze:clean",
    "analyze": "node ./internals/scripts/analyze.js",
    "extract-intl": "node ./internals/scripts/extract-intl.js",
    "npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
    "preinstall": "npm run npmcheckversion",
    "prebuild": "npm run build:clean",
    "build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
    "build:clean": "rimraf ./build",
    "start": "cross-env NODE_ENV=development node server",
    "start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
    "start:production": "npm run test && npm run build && npm run start:prod",
    "start:prod": "cross-env NODE_ENV=production node server",
    "presetup": "npm i chalk shelljs",
    "setup": "node ./internals/scripts/setup.js",
    "clean": "shjs ./internals/scripts/clean.js",
    "clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
    "generate": "plop --plopfile internals/generators/index.js",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:css": "stylelint app/**/*.js",
    "lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
    "lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
    "lint:js": "npm run lint:eslint -- . ",
    "lint:staged": "lint-staged",
    "pretest": "npm run test:clean && npm run lint",
    "test:clean": "rimraf ./coverage",
    "test": "cross-env NODE_ENV=test jest --coverage",
    "test:watch": "cross-env NODE_ENV=test jest --watchAll",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "prettify": "prettier --write",
    "cypress:open": "cypress open"
  },
  "babel": {
    "plugins": [
      "macros"
    ]
  },
  "pre-commit": "lint:staged",
  "lint-staged": {
    "!(public)/**/*.{js}": [
      "npm run lint:eslint:fix",
      "git add --force"
    ],
    "*.json": [
      "prettier --write",
      "git add --force"
    ]
  },
  "resolutions": {
    "babel-core": "7.0.0-bridge.0"
  },
  "overrides": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "dependencies": {
    "@babel/plugin-transform-class-properties": "^7.22.5",
    "@babel/polyfill": "^7.12.1",
    "@date-io/date-fns": "^1.3.13",
    "@dnd-kit/core": "^6.0.7",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@iterable/web-sdk": "^1.0.5",
    "@mui/icons-material": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.88",
    "@mui/material": "^5.8.6",
    "@mui/styles": "^5.8.6",
    "@mui/x-date-pickers": "^5.0.0-alpha.7",
    "@stripe/react-stripe-js": "^1.4.0",
    "@stripe/stripe-js": "^1.14.0",
    "array-move": "^3.0.1",
    "babel": "^6.23.0",
    "chalk": "^2.4.2",
    "compression": "1.7.4",
    "connected-react-router": "^6.9.2",
    "cross-env": "5.2.0",
    "date-fns": "^2.6.0",
    "date-fns-tz": "^1.2.2",
    "dotenv": "^8.2.0",
    "express": "4.16.4",
    "fontfaceobserver": "2.1.0",
    "history": "4.9.0",
    "hoist-non-react-statics": "3.3.0",
    "immer": "3.0.0",
    "immutable": "3.8.2",
    "intl": "1.2.5",
    "invariant": "2.2.4",
    "ip": "1.1.5",
    "linkify-react": "^3.0.4",
    "linkifyjs": "^3.0.5",
    "lodash": "^4.17.21",
    "minimist": "^1.2.5",
    "mixpanel-browser": "^2.34.0",
    "polished": "^4.1.3",
    "preval.macro": "^3.0.0",
    "prop-types": "15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-dropdown-date": "^2.2.7",
    "react-helmet": "6.0.0-beta",
    "react-intl": "^6.3.2",
    "react-loadable": "5.4.0",
    "react-mixpanel": "^1.0.5",
    "react-no-sleep": "^1.0.2",
    "react-redux": "7.2.6",
    "react-router-dom": "^5.1.0",
    "react-router-redux": "5.0.0-alpha.9",
    "react-scroll-locky": "^1.5.0",
    "react-swipeable-views": "^0.13.9",
    "react-tiny-virtual-list": "^2.2.0",
    "react-to-print": "^2.14.4",
    "redux": "4.0.1",
    "redux-immutable": "4.0.0",
    "redux-saga": "1.0.2",
    "reselect": "4.0.0",
    "sanitize.css": "8.0.0",
    "styled-components": "4.2.0",
    "uuid": "^3.4.0",
    "validator": "^13.6.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.10",
    "@babel/core": "^7.22.11",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.22.11",
    "@babel/plugin-transform-react-constant-elements": "^7.22.5",
    "@babel/plugin-transform-react-inline-elements": "^7.22.5",
    "@babel/preset-env": "^7.22.14",
    "@babel/preset-react": "^7.22.5",
    "@babel/register": "^7.22.5",
    "add-asset-html-webpack-plugin": "3.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "babel-plugin-lodash": "3.3.4",
    "babel-plugin-react-intl": "3.0.1",
    "babel-plugin-styled-components": "1.10.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
    "circular-dependency-plugin": "5.0.2",
    "compare-versions": "3.4.0",
    "compression-webpack-plugin": "^3.0.1",
    "coveralls": "3.0.3",
    "css-loader": "2.1.1",
    "cypress": "^10.10.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "enzyme-to-json": "3.3.4",
    "eslint": "5.16.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-config-prettier": "4.1.0",
    "eslint-import-resolver-webpack": "0.11.1",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "2.17.2",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "1.6.0",
    "eslint-plugin-redux-saga": "1.0.0",
    "file-loader": "3.0.1",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "i": "^0.3.6",
    "image-webpack-loader": "^6.0.0",
    "imports-loader": "0.8.0",
    "jest": "^25.0.0",
    "jest-cli": "24.7.1",
    "jest-dom": "3.1.3",
    "jest-styled-components": "^6.3.1",
    "json-loader": "^0.5.7",
    "lint-staged": "8.1.5",
    "ngrok": "4.3.3",
    "node-plop": "^0.26.2",
    "npm": "6.13.4",
    "null-loader": "0.1.1",
    "offline-plugin": "5.0.6",
    "plop": "^2.7.4",
    "pre-commit": "1.2.2",
    "prettier": "2.7.1",
    "react-app-polyfill": "0.2.2",
    "react-axe": "^3.5.3",
    "react-test-renderer": "16.8.6",
    "react-testing-library": "6.1.2",
    "rimraf": "2.6.3",
    "shelljs": "^0.8.3",
    "style-loader": "0.23.1",
    "stylelint": "10.0.1",
    "stylelint-config-recommended": "2.2.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.6.0",
    "svg-url-loader": "2.3.2",
    "terser-webpack-plugin": "^2.3.1",
    "url-loader": "1.1.2",
    "webpack": "4.30.0",
    "webpack-cli": "3.3.0",
    "webpack-dev-middleware": "3.6.2",
    "webpack-hot-middleware": "2.24.3",
    "webpack-pwa-manifest": "^4.3.0",
    "whatwg-fetch": "3.0.0"
  }

webpack.base.babel.js 

const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv')
const env = dotenv.config().parsed

module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: Object.assign(
    {
      // Compile into js/build.js
      path: path.resolve(process.cwd(), 'build'),
      publicPath: '/',
      filename: 'build.js',
    },
    options.output,
  ), // Merge with env dependent settings
  externals: {
    newrelic: 'newrelic',
  },
  optimization: options.optimization,
  module: {
    rules: [
      {
        test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },
      {
        // Preprocess our own .css files
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        // Preprocess 3rd party .css files located in node_modules
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader',
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true,
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false,
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: 'html-loader',
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        },
      },
    ],
  },
  plugins: options.plugins.concat([
    new webpack.DefinePlugin({
      'process.env': {
            // process env variables
      },
    }),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ]),
  resolve: {
    modules: ['node_modules', 'app'],
    extensions: ['.js', '.jsx', '.react.js'],
    mainFields: ['browser', 'jsnext:main', 'main'],
  },
  node: { fs: 'empty' },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
})
}
martinmckenna commented 9 months ago

looks like the issue is coming from lines like this:

https://github.com/Iterable/iterable-web-sdk/blob/main/src/inapp/utils.ts#L155

all the ?? code is probably going to have to be transpiled via a babel plugin: https://github.com/Iterable/iterable-web-sdk/blob/main/.babelrc#L12

PsionicChic commented 9 months ago

We discovered that even upgrading to latest Webpack 4, Node 16, latest transpiler, and updating plugins wasn't enough to get this thing going. We started the project years ago with react-boilerplate. What worked for us was moving to Node 18 and Webpack 5.

martinmckenna commented 9 months ago

@PsionicChic yep that makes sense. you probably also just could have kept with this approach, but did the same thing in your webpack.prod.babel.js file as well, and it would have fixed the issue since you would have been transpiling in both dev and prod:

Included node-modules in webpack.base.babel.js for babel-loader specifically for iterable. This allowed it to compile locally, but not on the build server

mprew97 commented 8 months ago

Just now getting around to looking at this. Apologies for the late reply. It looks like you have since resolved so going to close the issue out.