unexpected '!' in '!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm'. do not use import syntax to configure webpack loaders

[Jansora]

When i using craco replace creact-react-app built the react app.
package.json

    "react-scripts": "4.0.3",
    "sql.js": "^1.6.0",
    "devDependencies": {
      "@craco/craco": "^6.2.0",
      "craco-less": "^1.20.0"
    },

SqlJsDemo.jsx

import initSqlJs from "sql.js";
// Required to let webpack 4 know it needs to copy the wasm file to our assets
// import sqlWasm from "!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm";

  const [db, setDb] = useState(null)
  useEffect( () => {
    if(db == null) {
      initSqlJs(
        {
          locateFile: sqlWasm
        }
      )
        .then(SQL => setDb(new SQL.Database()))
        .catch(err => console.error(err) || Message.error("init sqlite failed"));
    }
  }, [db])

when i run cacro start, i got this error.

[Jansora]

i solve this error with doing this.

1. lock sql.js version "sql.js": "1.5.0",
2. download sql.js 1.5.0 release files.
3. uplaod file to my cdn server. then. try using sql.js with this

import initSqlJs from "sql.js";
...
  useEffect( () => {
    if( db == null) {
      initSqlJs(
        {
          locateFile: file => `https://cdn.jansora.com/lib/sql.js/1.5.0/${file}`
        }
      )
        .then(SQL => setDb(new SQL.Database()))
        .catch(err => console.error(err) || Message.error("init sqlite failed"));
    }
  }, [db])