An uncommon symbol has been encountered - it is possible that you require a suitable loader in order to manage this particular file format

Hey there, I need some help with importing the javascript strapi sdk (link) into my new project that is configured using webpack. Here's what I have so far:

index.ts file

import * as $ from 'jquery';
import  Strapi from 'strapi-sdk-javascript'

const strapi = new Strapi('http://localhost:1337')

Here is my webpack.config.file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/index.ts',
module: {
    rules: [
        {
            test: /\.js$/,
            use: 
            {loader: 'babel-loader',
            options: {
                presets: ['env']
            }
        },
      //  include: [path.resolve(__dirname, "./src/app")],
            exclude: /node_modules/
        }
    ]
},
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
        $: "jquery/src/jquery",
    }
},

devtool: 'inline-source-map',
devServer: {
    contentBase: './dist'
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        template: 'src/assets/template.html'
    })
],
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
}
 }; 

I'm encountering an error like this: https://i.sstatic.net/hUSu3.png

Can someone please guide me on what I might be doing wrong here? Thank you in advance for your help!

Answer №1

Here's a possible solution:

// Utilize Babel for JS processing.
{
  test: /\.(js|jsx|mjs)$/,
  include: [path.resolve(__dirname,"./src/app")path.resolve('node_modules/strapi-sdk-javascript')],
  loader: require.resolve('babel-loader'),
 },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: Adding up whole numbers--- Reference Error: Undefined

I'm having trouble with my code because it's saying that "t1" is not defined, even though it's the name of my text box. I tried making the variable global by declaring it outside the function, but it didn't solve the issue. Interestingl ...

Unable to display remote image source in PhoneGap

Trying to accomplish a simple task here. I aim to showcase an image hosted on a remote server in my phonegap app, but despite my best efforts, I haven't been successful. • Experimented with using an absolute file path in the image tag within the HT ...

Having trouble retrieving the second parent of my input element using jQuery

Within my web application, there exists a particular input element. I am aiming to alter the text within the span below from "-" to a different value. Here is the current markup: <span dir="none"> <table id="OrderQuickOrder_a91a0ce2-7fb6-4c9 ...

Modifying the width of a jQuery UI dialog from within the dialog box itself

I have designed an ASP.Net web page with a div and iFrame to display another page within it. Now, I am wondering if there is a way to change the width of the dialog from a button inside the dialog itself... Is this achievable? Thank you. ...

Simultaneously sort and modify values within an array

I am working with an array where the first number in each sub-array indicates the order. Whenever I change the order, I need to rearrange the array and re-index it starting from 2, 3, 4, 5. const payments = [ [2, paymentName1, '5%'], [3, ...

Conceal the HTML input element until the JavaScript has finished loading

Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...

Is it possible to access an imported module at the top level scope of a file with a 'circular' dependency?

My current project has a modular structure that looks like this: /components ├── Button.js ├── Checkbox.js ├── index.js ├── DateSelect    ├── DateSelect.js    └── index.js In the /components/DateSelect/index.js f ...

Is it possible for the Chrome debugger to locate TypeScript files that have not been served by the

I am creating .js.map files to assist in debugging my TypeScript code within Chrome. The js.map files specify the correct location of the TypeScript in the "sources" property. sourceRoot is set to "", and sources represent the path to the TypeScript code ...

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

When creating a JavaScript animation, it's common practice to use setInterval (or multiple setTimeouts) to create a loop. But what is the optimal delay to set in these setInterval/setTimeout calls? In the jQuery API page for the .animate() function, ...

Tips for inputting text into a Slickgrid cell

Currently, I am working on a project involving an AngularJS application with a Slickgrid component. However, I have encountered a challenge when attempting to write a test for it. Despite successfully using Selenium to click on the cells within the grid, t ...

Development of client and server using socket.io in node.js

I am trying to set up a basic demo using socket.io from http://socket.io The server (app.js) is functioning properly. However, I am encountering issues with the client side: <script src="/socket.io/socket.io.js"></script> <script ...

Verify the position of the scrollbar without triggering any reflow

Here is a function I have: is_bottom: function() { if (settings.scrollBottomOffset === -1) { return false; } else { var scroll_height, scroll_top, height; scroll_height = ...

"Utilizing ReactJS and Typescript: A guide on initiating a Redux dispatch event through an axios

Looking for help with ReactJS typescript and redux dispatch events when calling APIs using axios interceptors? Check out my code snippet below. Codesandbax Repo App.tsx import "./App.css"; import "bootstrap/dist/css/bootstrap.min.css" ...

Extracting information from HTML and transferring it to Javascript using jQuery

My goal is to utilize jsGrid for showcasing database data without repeating code extensively. I aim to generate separate grids for each <div> with a specific id while passing on relevant values accordingly. To clarify my objective, here's a sni ...

What could be causing this JSON object error I'm experiencing?

res.send({ customerDetails:{ fName, lName, }, applicantDetails:{ [ {primaryApplicant:{fName1,lName1}}, {secondaryApplicant:{fName2,lName2}}, {thirdA ...

Storing user responses in an array using jQuery Form

I have developed a form/questionnaire that prompts users with a series of questions. The initial question categorizes users into two groups, either trucks or cars in this scenario. Subsequently, the form delves into specific questions about the chosen vehi ...

Discovering the process to verify and obtain the outcome of an API request through jQuery Ajax

Seeking assistance in utilizing jQuery AJAX to access an API with a URL and parameters using the POST method. Specifically, I aim to determine the availability of delivery for a given Pincode on an e-commerce website. Any guidance on how to retrieve data f ...

Is it possible to generate a JSON file from a flowchart with the help of d3.js?

Situation: I'm currently in the process of developing a tool that will enable us to generate flow charts and then export the data into a JSON file for use in other services. Being new to JavaScript, I've come across d3 quite often. Can d3 handle ...

Tips for utilizing append and remove to modify HTML forms

Currently, I am working on a WordPress project that requires the use of append and remove for dynamically changing forms in HTML. I attempted to implement this functionality, but encountered some errors. The code snippet below provides a brief overview of ...

Creating a new image by converting canvas to an image and displaying it in a separate window with Ruby on Rails and

I'm having some trouble with this issue and would really appreciate your help. My goal is to convert a canvas into an image using toDataURL when a link, button, or image is clicked. Once the image is generated, I want it to open in a new window. Can ...