Module parse failed: Unexpected token

[wissam-coder]

./node_modules/@nlux/core/umd/nlux-core.js Module parse failed: Unexpected token (1:1405) You may need an appropriate loader to handle this file type.

[salmenus]

Thanks for sharing this info @wissam-coder

The library is bundled in 3 formats: CommonJS / ES6 Modules / and UMD https://www.npmjs.com/package/@nlux/core?activeTab=code

The error that you are sharing is related to the use of umd bundle. I will investigate.

Would you mind sharing some info about your build/runtime config? What bundler or dev server are you using? And any config that you can share?

Thank you so much

[wissam-coder]

Hello Samenus, must typescript version be ^5.2.2? i have "typescript": "^4.8.4", "webpack": "3.8.1", "react": "^18.0.0",

[salmenus]

What module format used depends on 2 params in your typescript/webpack config:

• TS Config -> moduleResolution param (doc here)
• The webpack loader config, and whether the loader supports ESM / CJS / UMD ...

But regardless, even UMD should also work.

I'll try to reproduce the error that you're having and make sure that nlux UMD format works without any issues. I'll comment here once it's done.

[wissam-coder]

my tsconfig.json { "compilerOptions": { "baseUrl": ".", "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": [ "es5", "dom", "es2019", "es2021" ], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node",

"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"importHelpers": true,

"noUnusedLocals": true,
"strictNullChecks": false,
"skipLibCheck": true,
"downlevelIteration": true

}, "exclude": [ "node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts" ] }

---

webpack config has:

module.exports = { bail: true, devtool: shouldUseSourceMap ? 'source-map' : false, entry: ENTRY, output: { path: paths.appBuild, filename: paths.webPartRelativePath + '/[name].js', chunkFilename: paths.webPartRelativePath + '/js/[name].[chunkhash:8].chunk.js', publicPath: publicPath, devtoolModuleFilenameTemplate: info => path .relative(paths.appSrc, info.absoluteResourcePath) .replace(/\/g, '/'), }, resolve: { modules: ['node_modules', paths.appNodeModules].concat( process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ), extensions: [ '.mjs', '.web.ts', '.ts', '.web.tsx', '.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx', ], alias: { 'react-native': 'react-native-web', 'react-dom$': 'react-dom/profiling', 'scheduler/tracing': 'scheduler/tracing-profiling', }, plugins: [ new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), new TsconfigPathsPlugin({ configFile: paths.appTsProdConfig }), ], }, module: { strictExportPresence: true, rules: [ { test: /.(js|jsx|mjs)$/, loader: require.resolve('source-map-loader'), enforce: 'pre', include: paths.appSrc, }, { oneOf: [ { test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/], loader: require.resolve('url-loader'), options: { limit: 10000, name: paths.webPartRelativePath + '/media/[name].[hash:8].[ext]', }, }, { test: /.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: {

          compact: true,
        },
      },
      {
        test: /\.(ts|tsx)$/,
        include: paths.appSrc,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              // disable type checker - we will use it in fork plugin
              transpileOnly: true,
              configFile: paths.appTsProdConfig,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'postcss-loader',
          'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap&sourceComments',
          'postcss-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader'],
          fallback: 'style-loader'
        })
      },
      {
        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], // , /\.scss$/],
        loader: require.resolve('file-loader'),
        options: {
          name: paths.webPartRelativePath + '/[name].[hash:8].[ext]',
        },
      },
    ],
  },
],

}, plugins: [ new InterpolateHtmlPlugin(env.raw), new webpack.optimize.UglifyJsPlugin({ minimize: true, sourceMap: true, include: /.min.js$/, }), new webpack.DefinePlugin(env.stringified), new UglifyJsPlugin({ uglifyOptions: { parse: { ecma: 8, }, compress: { ecma: 5, warnings: false, comparisons: false, inline: 1, }, mangle: { safari10: true, }, output: { ecma: 5, comments: false, ascii_only: true, }, }, parallel: false, cache: true,

  sourceMap: shouldUseSourceMap,
}),
new ExtractTextPlugin({
  filename: cssFilename,
}),
new ManifestPlugin({
  fileName: 'asset-manifest.json',
}),
new SWPrecacheWebpackPlugin({
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  filename: 'service-worker.js',
  logger(message) {
    if (message.indexOf('Total precache size is') === 0) {
      return;
    }
    if (message.indexOf('Skipping static resource') === 0) {
      return;
    }
    console.log(message);
  },
  minify: true,
  navigateFallback: publicUrl + '/indexSP.html',
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new ForkTsCheckerWebpackPlugin({
  async: false,
  tsconfig: paths.appTsProdConfig,
  tslint: paths.appTsLint,
  memoryLimit: 8192,
}),

], node: { dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty', },

};

[salmenus]

@wissam-coder have you tried v2. We had an entire re-write of the React layer.

I was not able to reproduce the issue. Please provide a GitHub sample repo or maybe CodeSanbox where it can be reproduced.

This issue will be closed in a few days unless a reproducable example can be provided.