Unexpected token export

[christianstrang]

Simple-keyboard version

"next": "^11.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-simple-keyboard": "^3.4.58",
"simple-keyboard-layouts": "^3.1.48"

Describe the bug
The keyboard works fine with the english layout, but once I add layouts via "simple-keyboard-layouts", I receive "unexpected token export"; maybe an issue on my end with webpack?

Code

import Keyboard from 'react-simple-keyboard'  
import 'react-simple-keyboard/build/css/index.css'  
import german from 'simple-keyboard-layouts/build/layouts/german'

  const [input, setInput] = useState('')
  const [layout, setLayout] = useState('default')
  const keyboard = useRef()

  const onChange = (input) => {
    setInput(input)
    console.log('Input changed', input)
  }

  const handleShift = () => {
    const newLayoutName = layout === 'default' ? 'shift' : 'default'
    setLayout(newLayoutName)
  }

  const onKeyPress = (button) => {
    console.log('Button pressed', button)

    /**
     * If you want to handle the shift and caps lock buttons
     */
    if (button === '{shift}' || button === '{lock}') handleShift()
  }

  const onChangeInput = (event) => {
    const input = event.target.value
    setInput(input)
    keyboard.current.setInput(input)
  }

<div>
  <input
    className='block w-full rounded-md border border-[#ececec]  p-4 text-center text-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500'
    value={input}
    placeholder={'Tap on the virtual keyboard to start'}
    onChange={onChangeInput}
  />
  <Keyboard
    keyboardRef={(r) => (keyboard.current = r)}
    layoutName={layout}
    onChange={onChange}
    onKeyPress={onKeyPress}
    {...german}
  />
</div>

Screenshots

[hodgef]

Hey @christianstrang, indeed this appears to be an issue with your setup, do you mind sharing a test git repository (repro) so I can take a look? Otherwise you can get your layout like this:

import KeyboardLayouts from 'simple-keyboard-layouts';
const german = new KeyboardLayouts().get("german");

However this method loads the full list of layouts, so it's preferred to go with the approach you went with initially.

I will reopen this ticket once I get a repro. You can also try googling this, it seems to be a rather common issue with Webpack. Thanks!

[christianstrang]

Thank you for your fast reply!
The issue was caused by Nextjs 11, what basically solved my issue was to install "next-transpile-modules" and then alter my next.config.js (source):

const withTM = require('next-transpile-modules')(["simple-keyboard-layouts"]);

module.exports = withTM({
  reactStrictMode: true
})